Scss中使⽤变量、运算
⽬录
1.$变量
最普遍的⽤法就是变量，变量以美元符号开头，赋值⽅法与 CSS 属性的写法⼀样
$width: 5em;
// 直接使⽤即调⽤变量：
#main {
width: $width;
}
变量⽀持块级作⽤域，嵌套规则内定义的变量只能在嵌套规则内使⽤（局部变量），不在嵌套规则内定义的变量则可在任何地⽅使⽤（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
2.数据类型
⽀持 6 种主要的数据类型：
数字，1, 2, 13, 10px
字符串，有引号字符串与⽆引号字符串，"foo", 'bar', baz
颜⾊，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，⽤空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
3.运算
⽀持数字的加减乘除、取整等运算 (+, -, *, /, %)
以下三种情况 / 将被视为除法运算符号：
如果值，或值的⼀部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的⼀部分
p {
font: 10px/8px;            // Plain CSS, no division
$width: 1000px;
width: $width/2;            // Uses a variable, does division
width: round(1.5)/2;        // Uses a function, does division
height: (500px/2);          // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
圆括号可以⽤来影响运算的顺序：
p {
width: 1em + (2em * 3);
}
编译为
p {
width: 7em;
}
如果需要使⽤变量，同时⼜要确保 / 不做除法运算⽽是完整地编译到 CSS ⽂件中，只需要⽤ #{} 插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px;
}
颜⾊值运算 (Color Operations)
颜⾊值的运算是分段计算进⾏的，也就是分别计算红⾊，绿⾊，以及蓝⾊的值：
p {
color: #010203 + #040506;
}
计算 01 + 04 = 0502 + 05 = 0703 + 06 = 09，然后编译为
p {
color: #050709;
}
数字与颜⾊值之间也可以进⾏算数运算，同样也是分段计算的，⽐如
p {
color: #010203 * 2;
}
计算 01 * 2 = 0202 * 2 = 0403 * 2 = 06，然后编译为
p {
color: #020406;
}
需要注意的是，如果颜⾊值包含 alpha channel（rgba 或 hsla 两种颜⾊值），必须拥有相等的 alpha 值才能进⾏运算，因为算术运算不会作⽤于 alpha 值。
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
编译为
p {
color: rgba(255, 255, 0, 0.75);
}
+ 可⽤于连接字符串
p {
cursor: e + -resize;
// 这种是⽆符号字符
}
编译为
p {
cursor: e-resize;
}
注意，如果有引号字符串（位于 + 左侧）连接⽆引号字符串，运算结果是有引号的，相反，⽆引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif;
}
css变量
运算表达式与其他值连⽤时，⽤空格做连接符：
p {
margin: 3px + 4px auto;
}
编译为
p {
margin: 7px auto;
}
在有引号的⽂本字符串中使⽤ #{} 插值语句可以添加动态的值（类似于vue的双花括号）：
p:before {
content: "I ate #{5 + 10} pies!";
}
编译为
p:before {
content: "I ate 15 pies!"; }
空的值被视作插⼊了空字符串：
$value: null;
p:before {
content: "I ate #{$value} pies!";
}
编译为
p:before {
content: "I ate pies!";
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。