如何将 CSS 变量值分配给 scss 变量或表达式
How to Assign CSS Variable Value to scss Variable or Expression
我正在尝试在 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
它编译得很好。编译 CSS-Variable inside @for
body 也没有问题。 .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
可以很好地编译成所需的 类.
系列
如果我使用 scss 变量 $columns
而不是 CSS 变量,那么我需要将我的 grid.scss 文件导入到项目的所有其他 scss 文件中。
这是我在 Whosebug 上的第一个问题,如果需要任何其他详细信息,请告诉我。
您需要对变量使用插值(例如#{$var}),以便 Sass 将其视为 CSS 属性。没有它,你只是在执行变量赋值。
@mixin w_fluid($property_name, $w_element, $w_parent:16) {
#{$property_name}: percentage(($w_element / $w_parent));
}
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 ); }
}
已接受的答案不再有效。 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};
}
我正在尝试在 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
它编译得很好。编译 CSS-Variable inside @for
body 也没有问题。 .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }
可以很好地编译成所需的 类.
如果我使用 scss 变量 $columns
而不是 CSS 变量,那么我需要将我的 grid.scss 文件导入到项目的所有其他 scss 文件中。
这是我在 Whosebug 上的第一个问题,如果需要任何其他详细信息,请告诉我。
您需要对变量使用插值(例如#{$var}),以便 Sass 将其视为 CSS 属性。没有它,你只是在执行变量赋值。
@mixin w_fluid($property_name, $w_element, $w_parent:16) {
#{$property_name}: percentage(($w_element / $w_parent));
}
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 ); }
}
已接受的答案不再有效。 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};
}