Question

我正在使用Sass（.scss）作为我当前的项目。以下示例：

SCSS

$ratioW : calc(100% / 1080);

@mixin ratio($width){
  $ratioW : calc(#{$width} / 1080) !global;
}

.column-1 {
  @include ratio(100vw);
}
.column-2 {
  @include ratio(50vw);
}
.column-3 {
  @include ratio(33.33vw);
}
.column-4 {
  @include ratio(25vw);
}
.column-5 {
  @include ratio(20vw);
}

.section-category {
  .section-in {
    position: relative;
    $margin-top-content : calc( #{$ratioW} * 240);
    $margin-top-content-half : calc( #{$margin-top-content} * 0.5);
    width:100%; height:100%;
    padding-top: $margin-top-content;
    box-sizing:border-box;
    // padding-top: $margin-
  }
}

body有单类column1~5。它是由javaScript添加的。但是$ ratioW只有20vw。如何通过className更改它？

Answer 1

因此，您希望根据body上的类应用5个不同的属性值？您可以使用@for循环以及父选择器&。

Sass文档：

$ratioW: calc(100% / 1080);
$nbCol: 5;

.section-category {
  .section-in {
    position: relative;
    width:100%; height:100%;
    box-sizing: border-box;

    @for $i from 1 through $nbCol {
      .column-#{$i} & {
        $margin-top-content: calc( #{$ratioW} / #{$i} * 240);
        $margin-top-content-half: calc( #{$margin-top-content} * 0.5);
        padding-top: $margin-top-content;
      }
    }
  }
}

编辑：Sassmeister是一个Sass游乐场，您可以在其中复制粘贴我的代码段并查看已编译的CSS（àlaCodepen ）。

输出是：

.section-category .section-in {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.column-1 .section-category .section-in {
  padding-top: calc( calc(100% / 1080) / 1 * 240);
}
.column-2 .section-category .section-in {
  padding-top: calc( calc(100% / 1080) / 2 * 240);
}
.column-3 .section-category .section-in {
  padding-top: calc( calc(100% / 1080) / 3 * 240);
}
.column-4 .section-category .section-in {
  padding-top: calc( calc(100% / 1080) / 4 * 240);
}
.column-5 .section-category .section-in {
  padding-top: calc( calc(100% / 1080) / 5 * 240);
}

如何在Sass上通过className更改全局变量

1 个答案: