文章目录
一、变量$
需要复用的CSS值,比如字体、颜色等,可以使用 $
将其变成一个变量。
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
.alert {
border: 1px solid $border-dark;
}
在官网文档的”重大变化“中提到:为了提供与纯CSS的最大兼容性,较新版本的 Sass 要求将自定义属性值中的 SassScript 表达式写入插值中。插值也适用于较旧的 Sass 版本,因此建议用于所有样式表。
$accent-color: #fbbc04;
:root {
// Wrong,在最新的版本中将不可用。
--accent-color-wrong: $accent-color;
// Good,在所有的Sass版本中可用。
--accent-color-right: #{
$accent-color};
}
因为插值会从带引号的字符串中删除引号,所以可能需要将它们包装在 meta.inspect() 函数中以保留它们的引号。
@use "sass:meta";
$font-family-monospace: Menlo, Consolas, "Courier New", monospace;
:root {
--font-family-monospace: #{
meta.inspect($font-family-monospace)};
}
二、嵌套
// scss 可以使用变量、可以嵌套。文件扩展名.scss
$primary-color: #333;
nav {
color: $primary-color
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
// css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
三、父选择器 &
父选择器 & 是 Sass 发明的一种特殊选择器,在嵌套选择器中用于引用外部选择器。它可以以更复杂的方式来复用外部选择器。
.alert {
// 可用于向外部选择器添加伪类
&:hover {
font-weight: bold;
}
// 可用于在特定上下文中设置外部选择器的样式
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
// 可用于作为 伪类选择器的参数。
:not(&) {
opacity: 0.8;
}
}
四、插值 #{表达式}
用来输出或计算一个表达式的内容。字符串与变量的拼接使用 #{表达式}
。
常用于在写mixins时根据传入的参数创建选择器。
@each $size, $value in variables.$avatar-sizes {
// 根据传入的参数生成选择器
.thy-avatar-#{
$size} {
@include mixin.avatarSize($size, $value);
}
}
五、函数 @function 和 @return
@function
和 @return
结合,用于定义可在 SassScript 表达式中使用的自定义函数,函数最后通过@return返回计算结果。
与所有Sass标识符一样,函数名称将连字符和下划线视为相同。这意味着scale-color和scale_color都指的是相同的功能。
@function pow($base, $exponent) {
$result: 1;
@for $_ from 1 through $exponent {
$result: $result * $base;
}
@return $result;
}
.sidebar {
float: left;
margin-left: pow(4, 3) * 1px;
}
可选参数:可以通过定义一个默认值来使参数成为可选参数,如果该参数未传递,则将使用该默认值。
@function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
@return mix($inverse, $color, $amount);
}
$primary-color: #036;
.header {
background-color: invert($primary-color, 80%);
}
任意参数:如果@function声明中的最后一个参数以 ...
结尾,则该函数的所有额外参数都作为列表传递给该参数。此参数称为参数列表。
@function sum($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
.micro {
width: sum(50px, 30px, 100px);
}
六、混合 @mixin 和 @include
@mixin
和@include
结合使用,使我们可以很容易地复用样式块。有助于保持样式表的简洁性。
同时可以给 @mixin 传参,使得样式的书写更加灵活。
@mixin theme($theme: DarkGray) {
background: $theme