在SASS中动态嵌套CSS类

gajydyqb 于 2023-05-02 发布在其他

关注(0)|答案(2)|浏览(180)

我试图在SASS中创建动态嵌套类。使用React 18和SASS 1。62（Craco）.
我有一个scss文件，需要看起来像这样
.gridRow.scss

.root {
  &.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  &.row-cols-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  &.row-cols-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  &.row-cols-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  &.row-cols-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  &.row-cols-5>* {
    flex: 0 0 auto;
    width: 25%;
  }

  &.row-cols-6>* {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
}

我想动态地创建所有这些CSS类。为此，我编写了以下mixin：

$grid-row-columns: 6;

@mixin create-row-cols () {
  &.row-cols-auto>* {
    flex: 0 0 auto;
    width: auto;
  }

  @for $i from 1 through $grid-row-columns {
    &.row-cols-#{$i}>* {
      flex: 0 0 auto;
      width: math.percentage(math.div(1, $i));
    }
  }
}

然而，当我使用mixin作为：

.root {
 @include create-row-cols()
}

它不工作。
有人知道怎么修吗？我现在没办法了。谢谢。
我试着对这些值进行硬编码，这很有效。
我试图检查捆绑的css文件，但找不到它，也许峰值到它将显示它实际上是创建。
我尝试重构mixin函数来查找拼写错误，但没有找到任何错误。

css

来源：https://stackoverflow.com/questions/76089970/dynamically-nest-css-classes-in-sass

2条答案

按热度按时间

olmpazwi1#

我认为它不起作用的原因是因为你的SASS版本有点低。尝试升级可能会解决此问题。
或者另一个解决方案：使用width: math.percentage(1/$i);代替width: math.percentage(math.div(1, $i));。
下面是我的测试：

我的Sass版本是：

dart-sass是：

而且很有效。
所以我仍然认为你的sass版本不够高。

赞(0）回复(0）举报 2023-05-02

tpgth1q72#

最终，问题不在SCSS，而在react文件。由于对类名的处理不当，它没有击中要害。
固定组件的示例：

const Row = React.forwardRef(({
  as: Component,
  className,
  rowCols,
  g,
  gx,
  gy, 
  children,
  ...props
}, ref) => {

    // parse possible {XS: 4, ...} to {GridRow-row-cols-xs-4: 4, ...}
  const mappedRowCols = _.isObject(rowCols) ?
    _.mapKeys(rowCols, (value, key) => [styles[`row-cols-${_.toLower(key)}-${value}`]]) :
    rowCols && {[styles[`row-cols-${rowCols}`]]: rowCols};

  const mappedGutters = _.isObject(g) ?
    _.mapKeys(g, (value, key) => [styles[`g-${_.toLower(key)}-${value}`]]) :
    g && {[styles[`g-${g}`]]: g};

  const mappedGuttersX = _.mapKeys(gx, (value, key) => [styles[`gx-${_.toLower(key)}-${value}`]]);
  const mappedGuttersY = _.mapKeys(gy, (value, key) => [styles[`gy-${_.toLower(key)}-${value}`]]);

  return (
    <Component
      ref={ref}
      {...props}
      className={classNames(
        styles.root,
        mappedGuttersX,
        mappedGuttersY,
        mappedGutters,
        mappedRowCols,
        className)}
    >
      {children}
    </Component>
  );
});

赞(0）回复(0）举报 2023-05-02

我来回答

在SASS中动态嵌套CSS类

2条答案

相关问题

热门标签

最新问答