SASS插值表达式用法介绍

2021年3月10日16:02:28 发表评论 783 次浏览

插值基本上是插入。插值允许我们将sass表达式插值到简单的SASSCSS代码中。意思是, 你可以定义(部分或全部)选择器名称, 属性名称, CSS规则, 带引号或不带引号的字符串等, 作为变量。插值是一种新原理, 在SASS中被广泛使用。

要插入表达式, 我们需要使用#{}包装表达式。

语法如下:

......#{$variable_name}........

…..代表一些文本。

请参阅下面的示例以了解更多信息:

SASS文件:

@mixin interpolation($changeable, $val, $val2, $prop1, $prop2)
{
    background-#{$changeable}: $val;
    position: $val2;
    #{$prop1}: 0px; 
    #{$prop2}: 0px;
}


.blockarea{
    @include interpolation("image", url("img.png"), absolute, top, right);
}

.anotherbloakarea{
    @include interpolation("color", lightgray, absolute, top, left);
}

编译的CSS文件:

.blockarea {
    background-image: url("img.png");
    position: absolute;
    top: 0px;
    right: 0px;
}
  
.anotherbloakarea {
   background-color: lightgray;
   position: absolute;
   top: 0px;
   left: 0px;
}

SASS表达式中的插值始终返回未加引号的字符串, 无论该字符串是否已加引号。

插值的用途:

  1. 要将动态创建的名称用作属性名称, 变量名称或用于任何其他相同目的。
  2. 创建一个非常可重用的代码;你可以在其中定义属性名称, 字符串, 选择器名称等作为变量。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: