本文概述
- SASS连接字符串
- SASS串联颜色
SASS连接字符串加法(+)运算符用于连接两个字符串。我们必须遵循一些规则来串联两个字符串。
规则：
- 如果添加带引号的字符串(在+运算符之前指定)和未带引号的字符串, 则结果将显示在带引号的字符串中。
- 如果将带引号的字符串添加未加引号的字符串(在+运算符之前指定), 则结果将以无引号的字符串显示。
@mixin string-concat {
&
:after {
content: "My favorite language is " + Sass;
font: Arial + " sans-serif";
}
}
h2 {
@include string-concat;
}编译后, 生成的CSS将具有以下代码。
h2:after {
content: "My favorite language is Sass";
font: Arial sans-serif;
}SASS串联颜色我们还可以使用加法运算符(+)产生新的颜色值。让我们举个例子。
Sass语法：
h2 {
color: #468499 + #204479;
}编译后, 生成的CSS将具有以下代码：
【SASS连接操作示例】CSS：
h2 {
color: #66c8ff;
}Sass对颜色对执行相应的计算, 并在连接后形成新的颜色值。
46+20=66 (red color), 84+44=c8 (green color), and 99+79=ff (blue color)十六进制值是红色, 绿色和蓝色值的组合。它们由数字0-9和字母A-F表示。
推荐阅读
- Sass嵌套用法详解
- Sass的混合用法详解
- Sass mixin参数
- Sass @media指令用法示例
- Sass（包含mixin用法）
- Sass继承/扩展用法详解
- SASS @import指令用法
- Sass @ else-if指令用法示例
- Sass @each指令用法示例