Sass开发【三】
目录
编辑
Sass选择器
选择器列表
选择器组合器
父选择器 &
占位符选择器
自定义属性
Sass里的值
数字
字符串
映射
查找值
添加到映射
合并映射
true和false
其它
Sass选择器
Sass选择器比CSS选择器更加灵活，可以用非常少的代码替代CSS冗余的代码
选择器列表
选择器列表即“逗号分隔的选择器”，Sass将它们分别嵌套然后将它们组合回CSS选择器中：
.div,.template {.p,.span {font-size: large;}
}这个CSS选择器的意思是：
- div下的p：font-size:large;
- div下的span：font-size:large;
- template下的p：font-size:large;
- template下的span：font-size:large;
编译后的CSS：
.div .p, .div .span, .template .p, .template .span {font-size: large;
}选择器组合器
Sass甚至允许您嵌套组合器，并且可以将组合器放在“外部选择器”的末尾、内部选择器的开头，甚至可以在两者之间单独放置
.div > {p {font-size: large;}
}.div {+ span {font-size: large;}
}.div {~ {span {font-size: large;}p {font-size: large;}}
}编译后的CSS如下：
.div > p {font-size: large;
}.div + span {font-size: large;
}.div ~ span {font-size: large;
}
.div ~ p {font-size: large;
}父选择器 &
父选择器是Sass发送的一种特殊选择器，它嵌套在子选择器中引用外部选择器
使用父选择器可以很轻松的为父选择器添加伪类选择器
.div {background-color: green;&:hover {background-color: red;}&:active {background-color: black;}
}父选择器也可以在SassScript中使用，它是一个特殊表达式，以选择器函数使用的相同格式放回当前父选择器：(一个逗号分隔的选择器列表)
.main aside:hover,
.sidebar p {parent-selector: &;
}编译后的CSS：
.main aside:hover,
.sidebar p {parent-selector: .main aside:hover, .sidebar p;
}占位符选择器
Sass添加了一种特殊的选择器：“占位符选择器”，它以%开头，不会被Sass编译，不会生成对应的CSS语句
占位符选择器常与“类继承”配合使用，通过类继承我们可以很方便的复写CSS语句
%toolbelt {box-sizing: border-box;border-top: 1px rgba(#000, .12) solid;padding: 16px 0;width: 100%;&:hover { border: 2px rgba(#000, .5) solid; }
}.action-buttons {@extend %toolbelt;color: #4285f4;
}.reset-buttons {@extend %toolbelt;color: #cddc39;
}编译后的CSS文件：
.reset-buttons, .action-buttons {box-sizing: border-box;border-top: 1px rgba(0, 0, 0, 0.12) solid;padding: 16px 0;width: 100%;
}
.reset-buttons:hover, .action-buttons:hover {border: 2px rgba(0, 0, 0, 0.5) solid;
}.action-buttons {color: #4285f4;
}.reset-buttons {color: #cddc39;
}自定义属性
CSS自定义属性(CSS变量)在Sass中同样得到了支持，声明一个CSS变量时，可以使用插值的方式为变量填充值
$primary: blue;
$warn: orange;
$success: green;:root {--primary:#{$primary};--warn:#{$warn};--success:#{$success};
}不过插值会删除字符串的引号，这可能导致在某些需要字符串的场景出现错误（如font-family的值是一个字符串）
作为解决方法，可使用meta.inspect()函数保留引号，使用该函数前请务必使用“use sass:meta”来引入meta库
@use "sass:meta";$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;:root {--font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};--font-family-monospace: #{meta.inspect($font-family-monospace)};
}编译后的CSS：
:root {--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}Sass里的值
Sass支持多种值类型，其中大多数来自CSS，也有Sass特有的值
来自CSS的值：
- 数字：12或12px
- 字符串：blue、red、green或"Hello World"
- 颜色：十六进制，RGB、HSL
- 值列表：“10px 20px 30px 40px”
Sass特有的值：
- 布尔值：true和false
- null值
- 映射值：("background":red, "foreground":pink)
- 由get-function()返回并用call()调用的函数引用
数字
Sass中的数字有两个组成部分：“数字本身”、“单位”，例如16px，16就是数字本身，px就是单位
Sass数字支持科学计数法，它用数字与幂e表示，但Sass始终将其编译为完全展开的数字
// sass：
.main {font-size: 1e-2px;
}// css:
.main {font-size: 0.01px;
}
字符串
Sass字符串支持两种内部结构相同但渲染方式不同的字符串：
- 带引号的字符串："Hello World"
- 不带引号的字符串：bold、blue、red
所有Sass字符串都支持标准CSS转义代码
- 除了A到F的字符或0到9的数字之外的任何字符，都可以作为字符串的一部分包含在内，方法是在其前面加上“ / ”
@debug "\""; // '"'
@debug \.widget; // \.widget
@debug "\a"; // "\a" (a string containing only a newline)
@debug "line1\a line2"; // "line1\a line2"映射
Sass的映射包含键值对，并且可以通过其对应的键轻松查找值
它们是以(<表达式>:<表达式>, <表达式>:<表达式>)的形式编写
键必须是唯一的
查找值
使用map.get($map, $key)函数，如果该映射没有$map键的值，返回null
@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null添加到映射
使用map.set($map,$key,$value)函数，它返回$map的副本，不在原$map上修改：
@use "sass:map";
$font-weights: ("regular": 400, "medium": 500, "bold": 700);@debug $font-weights; // ("regular": 400, "medium": 500, "bold": 700)
@debug map.set($font-weights, "light", 300); // ("regular": 400, "medium": 500, "bold": 700, "light": 300)
@debug $font-weights; // ("regular": 400, "medium": 500, "bold": 700)合并映射
使用map.merge($map1,$map2)函数，它返回$map1和$map2合并后的新映射
如果两个映射中有相同的键，那么会用第二个位置$map2映射的值来填充
@use "sass:map";$light-weights: ("lightest": 100, "light": 300);
$heavy-weights: ("medium": 500, "bold": 700);@debug map.merge($light-weights, $heavy-weights);
// ("lightest": 100, "light": 300, "medium": 500, "bold": 700)Sass中的映射是不可变的，这意味着映射值的内容永远不会改变
map映射函数都会返回新的映射，而不是修改原映射
true和false
在Sass中可以使用关系运算符：
@debug 1px == 2px; // false
@debug 1px == 1px; // true
@debug 10px < 3px; // false还可以使用逻辑运算符：
@debug true and true; // true
@debug true and false; // false@debug true or false; // true
@debug false or false; // false@debug not true; // false
@debug not false; // true甚至还有if()，相当于JS里的“expression ? value1 : value2”
@debug if(true, 10px, 30px); // 10px
@debug if(false, 10px, 30px); // 30px注意：
- 在Sass中，空字符串、空映射、数字0都是真值
- Sass假值只有：“false”和“null”
其它
更多CSS学习可以参考我的专栏：
CSS_是洋洋a的博客-CSDN博客