在SASS中动态嵌套CSS类

gajydyqb  于 2023-05-02  发布在  其他
关注(0)|答案(2)|浏览(181)

我试图在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函数来查找拼写错误,但没有找到任何错误。

olmpazwi

olmpazwi1#

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

我的Sass版本是:

dart-sass是:

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

tpgth1q7

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>
  );
});

相关问题