Question

我尝试从SASS中的列表自动生成关键帧。

我使用CSS属性构建一个SASS列表

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { render } from 'react-dom';
import  { Provider }  from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';

const booleanReducer = (state = { grid:true, additionalPages:false }, action) => {
  if (action.type === 'GRID'){
    return state = {
      ...state,
      grid:!state.grid
    }
  }
  if (action.type === 'ADDITIONALPAGES'){
    return state = {
      ...state,
      additionalPages:!state.additionalPages
    }
  }
  return state;
};

const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) => {
  if (action.type === 'SEARCHTERM'){
    return state = {
      ...state,
      searchTerm:action.payload
      }
    }
  if (action.type === 'FETCHITUNESALBUMS'){
    return state = {
      ...state,
      itunes: action.payload

      }
    }
      return state;
  }


const middleware = applyMiddleware(thunk, logger)
const store = createStore(combineReducers({booleanReducer,searchItunesReducer}),middleware);
console.log(store.getState());

store.subscribe(() =>{
  console.log("store updated!", store.getState());
});

registerServiceWorker();
ReactDOM.render(
<Provider store={store}>
  <App />
</Provider>
, document.getElementById('root'));

然后我尝试使用$anim: (('color: #f00','background-color: #0f0'), ('color: #0f0','background-color: #00f') );生成CSS动画的关键帧。

@each

但是当试图编译我的代码时，我有这个错误：

@keyframes my-anim {
    $i: 1 ;
    @each $item in $anim {
        #{$i * 10}% {      
            @each $property in $item {
                #{$property};
            }   
        }
        $i: $i + 1 ;
    }
}

有人可以帮助我吗？

由于

Answer 1

我认为你不能使用字符串而只能使用键值对。通过这种方式应该工作：

$anim: ((color: #f00,background-color: #0f0),
        (color: #0f0,background-color: #00f)    
);

@keyframes my-anim {
    $i: 1 ;
    @each $item in $anim {
        #{$i * 10}% {      
            @each $key,$value in $item {
                #{$key}: #{$value};
            }   
        }
        $i: $i + 1 ;
    }
}

从SASS列表生成关键帧

1 个答案: