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

【问题标题】：How to Assign CSS Variable Value to scss Variable or Expression如何将 CSS 变量值分配给 scss 变量或表达式
【发布时间】：2017-12-20 22:49:45
【问题描述】：

我正在尝试在 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 上的第一个问题，如果需要任何其他详细信息，请告诉我。

【问题讨论】：

How to force integer in CSS Variable?的可能重复
Saurabh Gour，实际上，是的。你提出的问题涵盖了我的问题。但我永远不会在其当前标题“如何在 CSS 变量中强制使用整数”下找到它。
我几乎按下了That solved my problem! 按钮，但随后我阅读了解释消息。它说This will mark your question as a duplicate, directing future readers to the original question and preventing further answers from being posted here. 我不介意将我的问题标记为一般重复。但在这个具体案例中，我认为How to force integer in CSS Variable? 不是重点，也不是主题。我的问题会保持可见，还是会被隐藏？重定向将如何发生？

标签： css sass css-variables

【解决方案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
// 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 ); }

}

【讨论】：

雅各布 E，非常感谢。你的解决方案对我有用。另外，我看了你的笔，让我更了解了。
此答案不再有效，请查看我的答案，了解截至 2021 年 9 月的有效解决方案
我已更新示例以使用插值

【解决方案2】：

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

更多详情请参考here

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

【讨论】：

【解决方案3】：

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

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

【讨论】：