小编Tho*_*ley的帖子

使用LESS递归获取当前索引

我想这样做:

忧虑程度

我有这样一个数组:

@levels:'level_one','level_two','level_three','level_four','level_five','level_six','level_seven','level_eight';
Run Code Online (Sandbox Code Playgroud)

这些级别中的每一个还具有对应的变量,该变量是颜色,并且匹配级别指示符的列表标记中的类.我能够轻松地遍历这些以生成每个级别的背景颜色.

我希望能够为每个项目自动设置高度,所以从理论上讲,如果我想在指标中添加第9或第10级,我只需添加颜色变量,将其添加到数组并添加相关标记,必须在每个类上明确设置高度.

.for(@levels); .-each(@color) {
   @name: e(@color);
   &.@{name} {
      background:@@name;
   }
}
Run Code Online (Sandbox Code Playgroud)

我正在循环上面的级别,但是以某种方式可以获得循环的当前索引以及@levels数组的计数来计算每个项目的基于百分比的高度?例如.如果有10个项目,第一个项目是10%的高度等等?

期待任何建议!

谢谢!

css less

3
推荐指数
1
解决办法
356
查看次数

babel-plugin-react-css-modules添加类但不转换css

我正在尝试使用babel-plugin-react-css-modules弹出的副本create-react-app来限制我的LESS CSS.

我已经设法安装和配置插件,它正在使用styleName属性正确设置范围类名,我已将其配置为使用LESS以及文档.

但是,在导入生成的CSS时,它不会转换类名以匹配元素上设置的类名.这是我webpack.config.dev.jsApp.js文件的相关部分.

module: {
    // First, run the linter.
    // It's important to do this before Babel processes the JS.
    preLoaders: [
        {
            test: /\.(js|jsx)$/,
            loader: 'eslint',
            include: paths.appSrc,
        }
    ],
    loaders: [
        // ** ADDING/UPDATING LOADERS **
        // The "url" loader handles all assets unless explicitly excluded.
        // The `exclude` list *must* be updated with every change to loader extensions.
        // When adding a new loader, you …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack react-css-modules create-react-app

2
推荐指数
1
解决办法
1437
查看次数