Question

我正在尝试在CSS / scss中构建自己的微小可伸缩网格。到目前为止，我发现了这个决定：

:root {
  --page-width: 1170px;
  --gutter: 15px;
  --columns: 12;
}

.wrapper {
  max-width: var(--page-width);
  margin-right: auto;
  margin-left: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.row {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
}

.col {
  display: block;
  margin-left: var(--gutter);
  margin-right: var(--gutter);
}

然后我尝试使用scss来缩短列类描述（同时允许我在整个代码中的一个地方更改列数 - 在CSS变量--columns中）像这样

@for $n from 1 through var(--columns) {
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
}

但它不起作用。有趣的细节是，当我将@for语句从@for $n from 1 through var(--columns) `更改为@for $n from 1 through 12 它汇编得很好。在@for体内编译CSS变量没有问题。 .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }可以很好地编译所需的一系列课程。

如果我使用scss变量$columns而不是CSS变量，那么我需要将grid.scss文件导入到项目的所有其他scss文件中。

这是我在StackOverflow上的第一个问题，所以如果需要任何其他细节，请告诉我。

Answer 1

CSS和SCSS变量是两个非常不同的东西（请参阅this pen）

要使其工作，您需要一个静态变量供SCSS编译

// static (SCSS) variables used produce CSS output
$page-width: 1170px;
$gutter : 15px
$columns: 12;  

// dynamic (CSS) variables used at run-time
:root {
  --page-width: $page-width;
  --gutter : $gutter;
  --columns: $columns;
}

//  the for loop is aimed at producing CSS output
//  ... why you need the static variable
@for $n from 1 through $columns {  

  //  the content becomes CSS output
  //  ... why you can use dynamic variables   
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }

}

Answer 2

您需要对变量使用插值（例如＃{$ var}），以便Sass将其视为CSS属性。没有它，你只需执行变量赋值。

@mixin w_fluid($property_name, $w_element, $w_parent:16) { #{$property_name}: percentage(($w_element / $w_parent)); }

如何将CSS变量值分配给scss变量或表达式

2 个答案: