CSS预处理器之Sass（二）：https://developer.aliyun.com/article/1556764
7.2 多继承
index.scss
.message { padding: 15px; margin-top: 100px; border: 1px solid transparent; } .important { @extend .message; font-weight: 800; font-size: 14px; } .message-danger { @extend .important; background-color: #000; border-color:#B1EBB6; }
转为 css 后
index.css
.message, .important, .message-danger { padding: 15px; margin-top: 100px; border: 1px solid transparent; } .important, .message-danger { font-weight: 800; font-size: 14px; } .message-danger { background-color: #000; border-color: #B1EBB6; } /*# sourceMappingURL=index.css.map */
7.3 占位符 %
%message，它是一个占位符选择器。占位符选择器不会生成实际的 CSS 输出，只有在被继承时才会生成对应的样式规则。
index.scss
%message { padding: 15px; margin-top: 100px; border: 1px solid transparent; } .important { @extend %message; font-weight: 800; font-size: 14px; } .message-danger { @extend .important; background-color: #000; border-color:#B1EBB6; }
转为 css 后
index.css
.important, .message-danger { padding: 15px; margin-top: 100px; border: 1px solid transparent; } .important, .message-danger { font-weight: 800; font-size: 14px; } .message-danger { background-color: #000; border-color: #B1EBB6; } /*# sourceMappingURL=index.css.map */
⑧ Sass 运算符的基本使用 ✅
8.1 等号操作符
所有数据类型都支持等号运算符
==、!=
$them: "dark"; .container { @if $them == 'dark' { background-color: #000; color: #fff; font: { weight: 400; size: 12px; } } @else { background-color: #fff; color: #000; font: { weight: 500; size: 14px; } } }
转为 css 后
index.css
.container { background-color: #000; color: #fff; font-weight: 400; font-size: 12px; } /*# sourceMappingURL=index.css.map */
8.1 关系（比较）运算符
关系运算符只支持整数这一数据类型
< 、> 、<=、>=
$them: 1; .container { @if $them >= 1 { background-color: #000; } @else { background-color: #fff; } }
8.2 逻辑运算符
and、or、not
$width: 100; $height: 200; $last: false; div { @if $width > 50 and $height < 300 { font-size: 16px; } @else { font-size: 14px; } @if not $last { border-color: red; } @else { border-color: blue; } }
转为 css 后
div { font-size: 16px; border-color: red; } /*# sourceMappingURL=index.css.map */
8.3 数字操作符
sass 中支持的数字类型有哪些呢？
纯数字、百分号、css 部分单位
可以使用如下操作符作为运算
+、-、*、/、%
8.3.1 +
.container { width: 50 + 20; width: 50 + 20%; width: 50% + 20%; width: 50 + 20px; width: 50px + 20px; width: 50px + 20pt; }
转为 css 后
.container { width: 70; width: 70%; width: 70%; width: 70px; width: 70px; width: 76.6666666667px; } /*# sourceMappingURL=index.css.map */
8.3.2 -
.container { width: 50 + 20; width: 50 - 20%; width: 50% - 20%; width: 50 - 20px; width: 50px - 20px; width: 50px - 20pt; }
转为 css 后
.container { width: 70; width: 30%; width: 30%; width: 30px; width: 30px; width: 23.3333333333px; } /*# sourceMappingURL=index.css.map */
8.3.3 *
.container { width: 10 * 20; width: 5 * 10%; // width: 10% * 10%; ❌ // width: 10px * 10px; ❌ width: 10px * 2; }
转为 css 后
.container { width: 200; width: 50%; width: 20px; }/*# sourceMappingURL=index.css.map */
8.3.4 /
/ 运算符只有在某些特殊情况下才会当作是运算符，不然就是一个普通的分隔符。
以下 3 种情况，/ 将被视为除法运算符号
- 如果值或值的一部分，是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
$width: 100px; .container { width: 10 / 5; width: (10 / 5); width: $width / 5; width: round($number: 50) / 2; width: 10px / 2px; width: 10px / 2px + 3px; width: 10px / 2 + 3px; }
转为 css 后
.container { width: 10/5; width: 2; width: 20px; width: 25; width: 10px/2px; width: 8px; width: 8px; } /*# sourceMappingURL=index.css.map */
8.3.5 %
$width: 100px; .container { width: 10 % 5; width: 50 % 3px; width: 50px % 3px; width: 50% / 7; width: 50px % 7; width: 50% % 9%; // width: 50% % 10px; ❌ width: 50px % 10pt; // => 等价于 50px % 13.33333px width: 50px + 10pt; // => 10pt = 13.33333px width: 50px % 13.33333px; }
转为 css 后
.container { width: 0; width: 2px; width: 2px; width: 50%/7; width: 1px; width: 5%; width: 10px; width: 63.3333333333px; width: 10.00001px; } /*# sourceMappingURL=index.css.map */
8.4 字符串运算
+ 可用于连接字符串
注意：如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果式有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
$width: 100px; .container { content: "foo" + bar; content: foo + "bar"; content: foo + bar; content: "foo" + "bar"; }
转为 css 后
.container { content: "foobar"; content: foobar; content: foobar; content: "foobar"; } /*# sourceMappingURL=index.css.map */
⑨ 插值语句 #{ … } 的基本使用 ✅
可以用于
- 选择器
- 属性名
- 属性值
- 注释
$class-name: danger; $attr: color; $font-size: 12px; $line-height: 30px; $author: "一勺"; /* 文件说明 @author: #{$author} */ a.#{$class-name} { border-#{$attr}: #f00; font: #{$font-size} / #{$line-height} Helvetica; }
转为 css 后
@charset "UTF-8"; /* 文件说明 @author: 一勺 */ a.danger { border-color: #f00; font: 12px/30px Helvetica; } /*# sourceMappingURL=index.css.map */
