7

我正在尝试在 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 throughvar(--columns)`` 更改为@for $n from 1 through12它时编译良好。@for并且在body内编译 CSS-Variable 没有问题。.col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }很好地编译成所需的一系列类。

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

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

4

3 回答 3

5

CSS 和 SCSS 变量是两个非常不同的东西（请看这支笔）

为了让它工作，你需要一个静态变量来编译 SCSS

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

// dynamic (CSS) variables used at run-time
// note the values are interpolated 
: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 ); }

}
于 2017-07-16T11:45:46.140 回答
2

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

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

于 2017-07-16T08:43:05.243 回答
0

接受的答案不再有效。较新版本的 SASS 需要对变量使用插值。

请参阅此处了解更多详情

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}
于 2021-09-24T17:44:22.480 回答