SCSS变量名插值
是一种在SCSS（Sass的一种扩展语法）中使用变量名来动态生成选择器或属性名的技术。它允许开发人员根据需要生成不同的选择器或属性名，从而提高代码的灵活性和可维护性。
在SCSS中，变量名插值使用#{$variable}的语法来实现。其中，#{$variable}表示将变量$variable的值插入到选择器或属性名中。
SCSS变量名插值的优势在于：
- 灵活性：通过插值，可以根据不同的情况生成不同的选择器或属性名，从而适应不同的需求和场景。
- 可维护性：使用变量名插值可以减少代码的重复，提高代码的可读性和可维护性。
- 动态性：通过插值，可以根据变量的值动态生成选择器或属性名，使得样式的生成更加灵活和动态化。
SCSS变量名插值的应用场景包括但不限于：
- 生成动态选择器：通过插值，可以根据变量的值生成不同的选择器，例如根据不同的颜色生成不同的类名选择器。
- 生成动态属性名：通过插值，可以根据变量的值生成不同的属性名，例如根据不同的方向生成不同的边框属性名。
- 生成动态类名：通过插值，可以根据变量的值生成不同的类名，从而实现样式的复用和动态切换。
腾讯云相关产品中，与SCSS变量名插值相关的产品包括：
- 腾讯云CSS：腾讯云提供的一款云端样式表服务，可以通过使用SCSS变量名插值来动态生成样式，实现样式的灵活管理和动态切换。了解更多信息，请访问：腾讯云CSS产品介绍
- 腾讯云云服务器（CVM）：腾讯云提供的一种可扩展的云计算服务，可以用于部署和运行支持SCSS变量名插值的应用程序。了解更多信息，请访问：腾讯云云服务器产品介绍
请注意，以上产品仅为示例，实际使用时应根据具体需求选择适合的产品。
相关·内容
我没有SCSS的背景，但是我想对现有的SCSS做一个小的修改并重新编译它。但是，我发现输出CSS中出现了带有美元符号的变量。即使我放弃了更改，输出CSS也与原始CSS不匹配。
例如,
@-webkit-keyframes $animation-name {...
在我的输出中
@-webkit-keyframes move-up {...
是预期的原始输出。
我认为这要么是因为我没有使用正确的命令编译SCSS文件，要么是因为SCSS文件是为较旧的编译器编写的。
我尝试了以下命令(在每次试用之前清除任何输出)：
sass --scss main.scss main.css
sass --scss
浏览 2提问于2016-10-30得票数 0
回答已采纳
1回答
我试图循环出一系列的标题字体大小，每个标题级别都有一个变量，并且我不得不将变量名声明为占位符。
_variables.scss
$h1-font-size: 2.5rem;
$h2-font-size: 2.25rem;
$h3-font-size: 2rem;
_heading-loops.scss
@for $i from 1 through 3 {
h#{$i} {
font-size: $#{i}-font-size;
}
}
期望CSS输出
h1 { font-size: 2.5rem; }
h2 { font-size: 2.25rem; }
h3 { fo
浏览 0提问于2018-07-30得票数 0
回答已采纳
我有两个样式头的类。然后，我需要创建一个mixin来定制背景模式，这取决于显示的是哪个标题。
可以在我的混入中使用$has-dept变量吗？
//header 1
.dt-style-user-bar-without-departments {
@extend .dt-style-user-bar;
$has-dept: false;
/...
}
//header 2
.dt-style-user-bar-with-departments {
@extend .dt-s
浏览 0提问于2013-11-27得票数 1
_theme-var.scss
//color palette
$colors:(
"primary":#ff0000,
"secondary":#898989,
"dark":#360000,
"light":#ffaeae,
"white":#fff
);
style.scss
@import "./theme-var";
@each $key,$val in $colors{
.text-#{$key}-color{
color
浏览 4提问于2022-05-26得票数 1
回答已采纳
3回答
我想在我的SCSS中定义我自己的颜色变量，但是如何定义？
我检查了，做了这里描述的所有事情。但不起作用。
我已经安装了一个预处理器！
此外，我尝试创建一个彩色地图，并使用map-get访问颜色。也不管用。
colors.scss文件
$yellow_100: #FFC819;
带有style.scss导入的colors.scss文件
h1 {
color: $yellow_100;
}
我也试过这个：
colors.scss文件
$colors: (
color: #FFBB00
);
style.scss文件
h1 {
color: map-get($colors,
浏览 0提问于2019-04-02得票数 3
使用最新版本的SASS/SCSS，是否可以像这样为@import操作设置变量...
$mpath: "~/../../../node_modules/";
@import {$mpath}+"bootstrap/scss/bootstrap";
上面的语法在@import上显然是错误的，但希望你能明白这一点;)我们能做到吗？
浏览 0提问于2018-04-13得票数 0
1回答
我想把scss写进haml文件里。我创建了一个名为render的混音，它在一个实际的scss文件中非常好地工作，但是给出了一个错误，例如-
这是实际的代码-(它在component.haml文件中)
:scss
@mixin render($property, $value)
{
-webkit-#{$property}: $value;
-moz-#{$property}: $value;
-o-#{$property}: $value;
-ms-#{$property}: $value;
#{$prope
浏览 4提问于2014-08-26得票数 3
回答已采纳
3回答
我有一堆元素：(#cp1，#cp2，#cp3，#cp4)
我想要添加一个背景颜色使用SCSS。
我的代码是：
$colour1: rgb(255,255,255); // white
$colour2: rgb(255,0,0); // red
$colour3: rgb(135,206,250); // sky blue
$colour4: rgb(255,255,0); // yellow
@for $i from 1 through 4 {
#cp#{i} {
background-color: rgba($(colour#{i}), 0.6);
浏览 4提问于2012-05-13得票数 35
1回答
我写了一个SASS混合文件，并将它包含在另一个部分文件中。由于一些奇怪的原因，它没有在编译的CSS中包含代码块。我可以使用@debug转储计算，它们是正确的。为什么它不写到我的CSS文件？其他规则声明在相同的地方，混音正在编译，而不是混音。任何指点都会有很大帮助。下面是代码：
@mixin px2rem($property, $px) {
$property: $px;
$property: ($px / $base-font-size) * 1rem;
@debug inspect(($px / $base-font-size) * 1rem);
}
debug属性输出以下内容：
浏览 3提问于2016-03-28得票数 2
回答已采纳
因此，这个SCSS代码在我的Macbook上运行得很好，但我的Ubuntu机器却没有：
@each $distance, $color in $range-distances{
@each $track in $tracks {
.distance-slider--#{$distance}#{$track}{
background: #{$color};
background-image: linear-gradient(to right, #{$color} #{$distance}%, $grey 0);
浏览 1提问于2016-05-24得票数 1
回答已采纳
2回答
@根目录a#{&}导致错误
、、、、
当我尝试使用@at-root和插值时，我得到了一个错误...但我不确定为什么..。我甚至只是使用了一个书外的例子来测试，但我仍然得到了一个错误：
.button {
@at-root a#{&} {
color: green;
}
}
错误sass/Site.scss (sass/partials/_site-title.scss的第28行：“@at-root a#{”后的无效CSS :预期表达式(例如1px，粗体)，是"&} {")
功能应该在那里，我正在使用Sass 3.4.22和Compass 1.0.3的组合，所以我想这可能是开发环
浏览 0提问于2016-08-18得票数 0
2回答
我希望通过在SCSS中先于父选择器来嵌套选择器。
基本选择器是：
.selector-class .selector-class__element {}
下面是HTML：
<div class="selector-class">
<div class="selector-class__element"></div>
</div>
(A)这里是SCSS的理想结果：
.selector-class {
.selector-class__element {
}
}
(B) --这是我想怎么做的背
浏览 9提问于2014-06-22得票数 2
回答已采纳
我在我的应用程序中使用来自Angular Material 的数据表。
默认分页器如下：
<md-paginator #paginator
[length]="projectTableDatabase.data.length"
[pageIndex]="0"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]">
浏览 0提问于2017-09-29得票数 0
如何根据ruby变量值设置SCSS变量？
以下代码适用于CSS，但不适用于SCSS：
- primaryColor = app.theme_variables['primary-color'];
= content_for(:after_head_script) do
css:
.primaryColor {
color: #{primaryColor};
}
如果我对SCSS做同样的事情：
- primaryColor = app.theme_variables['primary-color'];
= content_for(:aft
浏览 0提问于2016-09-19得票数 7
我以这种方式打开一个模式： const modal:HTMLIonModalElement =
await this.modalController.create({
component: ModalLoteinfoPage,
componentProps: {
pageBody:pageBodyLoadedFromAPI
}
}); 然后，我尝试将内容pageBody作为HTML放入ion-content中 <ion-content>
<div [innerHTML]="{{pageBodyLoad
浏览 29提问于2019-09-05得票数 0
回答已采纳
我对.scss语法不是很了解。
我正在使用带.scss扩展的angular命令行界面。
我想返回基于条件的背景颜色值。
@function getBgColor($value) {
$modular: #{$value}%2;
@debug $modular;
@if($modular == 0) {
@return red;
} @else {
@return green;
}
};
@for $i from 0 through 25 {
.mat-column-#{$i} {
max-wid
浏览 2提问于2019-02-12得票数 2
似乎，当@符号与#符号配对时，就会开始忽略某些字符。它甚至在%{}分隔符中这样做。这里发生什么事情？
"1#@ #9"
#=> "1\#@ #9"
"1#@X#9"
#=> "1#9"
"1#@XXX#9"
#=> "1#9"
"1#@X123#9"
#=> "1#9"
"1#\@X123#9"
#=> "1\#@X123#9"
"#"
#=> "#"
"@&#
浏览 1提问于2015-01-30得票数 1
回答已采纳
编译css
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
SCSS
$fa-css-prefix : 'fa';
@mix
浏览 2提问于2016-12-08得票数 1
回答已采纳
1回答
Webpack与可变路径的自带
、、、、
迁移到Webpack时，我遇到了一些导入sass或css的问题。
我在我的node_modules中安装了引导带，在我的文件结构中，我正在尝试这样做：
// folder scss
- vendor
- bootstrap
- pickadate
- views
- components
- base
在引导scss内部，我有引导文件的导入，因为路径很大，所以我尝试使用一个变量来重用：
$path: '../../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/';
@import '#
浏览 3提问于2017-06-06得票数 0
回答已采纳
1回答
我想知道我的递归混合器到底有什么问题。
@mixin backgroundPosition($x, $limit) {
$temp: #{$x * 32};
background-position-x: -#{$temp} +px;
$num: #{$x + 1};
@if ($limit < 10) {
& > * {
@include backgroundPosition($num, $limit + 1)
}
}
}
理想情况下，我想要的东西
background-po
浏览 9提问于2022-10-04得票数 0
2回答
吴检查不是在安古拉杰工作
、、、
我正面临着ng-checked的一个奇怪的问题。我应用它在我的编辑形式，以显示选定的选项值，但它不起作用。以下是我的代码和屏幕快照-
我的控制器代码-
if( true == $scope.employee.active ) {
$scope.is_active_yes = true;
$scope.is_active_no = false;
}
else {
$scope.is_active_yes = false;
$scope.is_active_no = true;
}
});
我的玉石模板里的代码-
.row
.control-la
浏览 4提问于2014-08-08得票数 1
回答已采纳
1回答
我有一个SCSS混音与以下定义的linear-gradient。
@mixin custom-background(
$color: $color,
$progress: 0
) {
background: linear-gradient(to right, $color #{$progress}%, #9EC9DB 0);
border: #10516C solid #9EC9DB;
}
但是，在使用gulp-sass编译时，它会出现以下错误：
错误:在“. #{$progress} %”之后的CSS无效: file.scss第15行的预期表达式(例如，1px，粗体)是&#
浏览 0提问于2016-07-06得票数 1
我正在尝试使用scss for 生成一个双重类，并避免使用可怕的!important
我试过下面的例子：
.my-class {
color: black;
&.&:hover {
color: red;
}
}
但我得到的只是：
Error: Invalid CSS after "... of parent rule": expected "}", was "&.&:hover {"
浏览 0提问于2017-08-13得票数 2
回答已采纳
1回答
我在SASS中使用了混入特性，我想知道是否有一种方法可以在混入中使用变量。下面是一个非常简单的例子
SASS
=overflow($axe,$show)
overflow-$axe: $show
SCSS
@mixin overflow($axe,$show){
overflow-$axe: $show;
}
感谢所有人的进一步回答:)
浏览 1提问于2016-08-22得票数 0
回答已采纳
我将直接在我的scss中传递属性名，作为函数或混音的一个参数。到目前为止，我还没有传递一个属性名作为参数。
这里我的代码：
@mixin buttonSide($buttonSide){
$buttonSide:10vw;
}
.form__previous-button{
@include buttonSide(left); // I have also tried with @include buttonSide("left")
}
到目前为止，它失败了。您知道在scss中将属性作为变量传递的方法吗？
浏览 2提问于2020-03-27得票数 1
回答已采纳
我不完全确定我正在尝试的东西是否可行，但我已经尽可能多地进行了搜索，并构建了以下嵌套循环来创建许多十六进制颜色的变体(而不是手动键入变量名)。
$colors: (
green: #006938,
pink: #9d1e65,
//...
);
$variations: (
30%, 50%, 70%,
);
@each $hex, $name in $colors {
@each $v in $variations {
#{$name}-#{$v}: lighten($hex, $v);
}
}
然而，在我的第二个循环中，我
浏览 1提问于2017-06-28得票数 3
1回答
在我的SCSS文件中，我有以下内容：
@for $i from 1 to 100 {
$percent : $i + '%';
[fxFlex='$percent'] {
flex: 1 1 $percent ;
}
}
我想要1%，然后2%等等，但我明白了。我希望删除双引号，并将$percent显示为1%，2%而不是$percent：
[fxFlex=' $percent '] {
flex: 1 1 "1%";
}
[fxFlex=' $percent '
浏览 4提问于2022-11-22得票数 0
回答已采纳
1回答
我需要在很多地方包括模块导入，所以我想要在scss中创建混音或函数。
在我的mixin.scss上
@function import-modules($import,$grid){
@return $import +' modules/modulename_'+$grid ;
}
在我想导入的main.scss中，我有
import-modules (@import,1024);
但这给我带来了错误。如何创建返回导入语句的函数？
我得到的错误：“导入模块”之后的CSS无效:预期的"{"，was“(‘@import’，1024)；
浏览 2提问于2014-04-01得票数 0
2回答
我们最近在我们的项目中引入了SASS，我对它非常陌生。
我有一个color.scss文件，它包含项目中使用的所有颜色的变量名及其值。我很难记住所有颜色的名字。
例如，
@include Font(arial,18px,#4a4a4a,left);
我想知道值#4a4a4a的关键是什么，即，如果类型为#4a4a4a，则应该显示相应的$variable名称。我们是否有更好的方法来搜索#4a4a4a中的color.scss文件？
谢谢你提前帮忙。
浏览 1提问于2016-10-25得票数 2
回答已采纳
我正在回顾一些用Perl编写的ClearCase触发器。我注意到，在一些正则表达式中，变量要么直接传递，要么将其名称放在大括号中。
例如，我在触发器中有下面这行代码：
if ($baseline !~ /^${component}_(|.*_)$phase\.\d+(|[a-z]|-\d+|${automateddigit})$/ &&
$baseline !~ /^${project_root}_$phase\.\d+(|[a-z]|-\d+|${automateddigit})$/)
$component、$phase、$automateddigit、$pr
浏览 3提问于2009-05-01得票数 6
回答已采纳
我正在生成几个列类，其宽度在Sass映射中定义，如下所示：
$column-widths: 5 10 20 25 30 33 40 50 60 66 70 80 90 100;
@each $width in $column-widths {
.column-#{$width} {
width: #{$width}%;
}
}
但是，我在编译时遇到以下错误：
Error in plugin 'sass'
Message:
grid.scss
Error: Invalid CSS after "...dth: #{$width}%": e
浏览 0提问于2016-12-15得票数 6
1回答
CSS变量和SCSS混合
、、、
我需要能够使用CSS变量，因为我需要有一个悬停效果(背景颜色)，以便我的VueJs应用程序可以自定义。但是我的CSS样式表应该有一个默认值，它存储在一个嵌套的SCSS映射中。(map-getter是一个从嵌套映射返回值的函数)
我知道我的SCSS代码可以工作，因为当我这样做时，我会得到预期的结果：
.theme--dark .AppNavTile:hover {
background-color: map-getter($theme-dark, AppNav, hover);
//returns background-color: rgba(255, 255, 255, 0.87);
浏览 1提问于2018-06-25得票数 5
我刚刚开始我的scss体验，我正在尝试弄清楚为什么这种代码不能像我想要的那样响应。
@each $key,
$par in (a:1, b:0, c:1) {
@if #{$par}==1 {
.#{$key} {
color:red
}
}
}
我尝试仅在映射的$par元素等于1时创建一个类。
我非常确定我正在进行一些逻辑上简单的步骤，但是在搜索这个简单的例子时，我没有找到任何东西。
浏览 1提问于2017-01-06得票数 0
警告:仅插值表达式已弃用 在main.tf第39行，在资源"aws_ecs_task_definition“"my_first_task"：39: execution_role_arn = "${aws_iam_role.ecsTaskExecutionRole.arn}”
浏览 18提问于2021-06-24得票数 0
2回答
当使用SCSS和变量时，是否可以在media queries中进行计算？
我想给一个断点变量赋值，在某些情况下直接在媒体查询SCSS文件中计算+ 1，如下所示：
$bp-xl: 1024px;
@media (min-width: $bp-xl + 1) { ... } /* MIN-WIDTH = 1025px */
所以我的新最小宽度应该是1025px。
浏览 11提问于2018-01-26得票数 3
回答已采纳
1回答
我在我的Rails应用程序中使用.scss文件，之前我使用的是：
@import "bootswatch/superhero/variables";
@import "bootswatch/superhero/bootswatch";
但我想做这样的事情：
$theme: 'superhero';
@import "bootswatch/#{$theme}/variables";
@import "bootswatch/#{$theme}/bootswatch";
不幸的是，这不起作用，变量没有被嵌入。当我想要改变
浏览 1提问于2012-12-03得票数 1
回答已采纳
我正在使用translate.instant并像这样进行字符串连接
var variable = this.$translate.instant('project.discount') + " % " + this.$translate.instant('project.applied_to') + " " +this.office;
如何在一个$translate.instant中将其作为字符串插值而不是连接
谢谢,
浏览 6提问于2016-07-27得票数 2
3回答
使用BEM和SASS声明活动/焦点/悬停状态的正确方法是什么？例如，我有这样的结构：
<div class="card">
<img class="card__image" src="..." alt="">
<div class="card__overlay">
<div class="card__title"></div>
</div>
</div>
和SCSS：
浏览 1提问于2015-12-01得票数 19
1回答
如何插值多维x数组？
、、、
我使用netCDF读取了一个xarray文件。该数据集包含1975年、1990年、2000年和2015年lat、lon的population信息。
数据集如下所示，我还提供了可用的
import xarray as xr
ds = xr.open_dataset('borneo_pop_t.nc')
ds
对于每一个像素，我希望得到1975年至2000年期间每年的信息，因为我有数据点的趋势。特别是，我要为失踪的年份提供更多的信息和不同层次的人口。
我怎么能这么做？
浏览 7提问于2022-04-06得票数 0
回答已采纳
1回答
我最近从templatemonster.com购买了一个包含SASS源代码的模板。
我尝试使用sass --update style.scss编译它，但它停止并输出以下内容：
Error: Invalid CSS after "...x: #{$postfix}-": expected expression (e.g. 1px, bold), was ";"
on line 7 of custom/mixins/_indent-utilities.scss
有问题的代码是一个mixin。
据我所知，SASS一直在改变它处理变量的方式。
此错误随当前版本3
浏览 3提问于2016-10-21得票数 2
1回答
我想对一个混合调用做一个简单的内插：
$models: "square", "square-green", "circle";
$services: "facebook", "twitter", "linkedin", "gplus", "feed";
@each $model in $models {
@include all-#{$model}-sprites;
@each $service in $services {
浏览 3提问于2012-10-31得票数 1
2回答
我有一个非常简单的问题，因为我是新来的拉拉维尔。我的问题是如何回复邮件申请人的姓名？
以下是代码：
public function toMail($notifiable)
{
$name = $notifiable->name;
return (new MailMessage)
->from('testing@gmail.com', 'Test')
->greeting('Hello!')
浏览 3提问于2017-08-29得票数 0
回答已采纳
1回答
我试图在解析过程中忽略部分.scss代码。
这是我正在制作的shopify主题。我的scss文件被编译成.css.liquid文件，这样我也可以将shopify的模板语言液体放到css中。
我希望编译后的css.liquid如下所示：
.header--logo {
background: url({{ 'header-logo.png' | asset_url }}) 0 0 no-repeat;
}
我以前经常这样做：
.header--logo {
background: ~"{{ 'header-logo.png' | asset_url
浏览 1提问于2014-08-05得票数 11
回答已采纳
3回答
我正在尝试查看字符串s是否包含正则表达式中的任何符号。下面的正则表达式在上运行良好。
s = "asd#d"
s =~ /[~!@#$%^&*()]+/
但在Ruby 1.9.2中，它给出了这个错误消息：
syntax error, unexpected ']', expecting tCOLON2 or '[' or '.'
s = "asd#d"; s =~ /[~!@#$%^&*()]/
怎么啦？
浏览 2提问于2012-02-29得票数 7
回答已采纳
在行政管理的主题设置中，我能够设置原色和第二颜色。我如何在主题scss中使用这些颜色？我已经看过文档，但只能找到，而不是已经存在的以及它们的名称。
浏览 3提问于2021-11-09得票数 2
回答已采纳
4回答
我有这个变量：
$gutter: 10;
我想在像SCSS这样的选择器中使用它：
.grid+$gutter {
background: red;
}
因此，输出变成CSS：
.grid10 {
background: red;
}
但这不管用。有可能吗？
浏览 3提问于2012-10-05得票数 68
回答已采纳
1回答
我一直在努力尝试同时使用css、max()和scss变量。例如，font-size: max(5vw, 991px * 0.075);可以工作，但如下所示：
$lg: 991px * 0.075;
font-size: max(5vw, $lg);
或
$lg: 991px;
font-size: max(5vw, $b * 0.075);
抛出“错误:不兼容的单位px和大众”，尽管它实际上与前者相同。以及以下各点：
$lg: 991px;
$-lg: calc($lg * 0.075);
font-size: max(5vw, $-lg);
抛出“错误: calc($b * 0.075)不是
浏览 1提问于2020-12-05得票数 0
1回答
角形变量
、、、
我有一个带有动态名称的表单，其中包含有动态名称的字段。如果字段无效，我希望使用ng-show显示视觉错误反馈。
但是，由于字段是使用变量设置的，所以我需要执行如下操作：
ng-show="{{form.name}}.{{form.field.name}}.$dirty && {{form.name}}.{{form.field.name}}.$invalid"
我该怎么做？
(以上代码显然不起作用)
浏览 0提问于2015-05-04得票数 1
回答已采纳
在Vue-cli webpack项目中，我在.env文件中定义了一个环境变量，如下所示：VUE_APP_FONT_SIZE=30px
然后在vue.config.js中，我“添加”如下：
let sav = ''
if (/VUE_APP_/i.test('VUE_APP_FONT_SIZE')) {
sav += `$${'VUE_APP_FONT_SIZE'}: "${process.env['VUE_APP_FONT_SIZE']}";`
}
module.expo
浏览 3提问于2020-09-02得票数 0
回答已采纳
我可能陷入了死胡同。我试图用自己的$primary变量覆盖scss的引导变量，通过外部JSON文件中的服务加载到组件中(此文件的内容可能有所不同)。
我想到的最直接的解决办法是这样的：
ComponentStyles.scss
$primary = {{variableLoadedFromConfigFile}};
以前的解决方案是静态的。
$primary = blue;
现在，我需要将其更改为动态行为(在从文件加载该值的意义上)。
这有可能吗？
谢谢。
浏览 3提问于2021-03-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
