sass的用法
一、内置函数变亮和变暗颜色
内置函数：可以自动变化颜色
lighten 和 darken 函数都是通过增加或者减小 HSL 中颜色的亮度来实现调节的。
$amount: 50%;
h1 {
$color1: #000000;
color: lighten($color1, $amount);
}
h2 {
$color2: #ffffff;
color: darken($color2, $amount);
}
二、列表（Lists）
列表就是 Sass 的数组。列表是一个一维的数据结构（不同于 maps），用于保存任意类型的数值（包括列表，从而产生嵌套列表）。
$font-stack: ('Helvetica', 'Arial', sans-serif);
三、Maps
$breakpoints: (
'small': 767px,
'medium': 992px,
'large': 1200px,
);
多个变量建议使用map，因为：最重要的优势就是 map 的遍历功能，这在多个不同变量中是不可能实现的。另一个支持使用 map 的原因，是它可以创建 map-get() 函数以提供友好 API 的功能。比如，思考一下下述 Sass 代码：
map-get(map，key)
$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$z-indexes: (
"modal": 5000,
"dropdown": 4000,
"default": 1,
"below": -1
);
h1 {
font-size: map-get($font-sizes, "small"); // 12px
z-index: map-get($z-indexes, 'modal'); // 5000
}
四、变量的作用域标识符
-
!default：有利于开发者重写样式 -
!global：默认不写
!default：
如果创建一个库、框架、栅格系统甚至任何的 Sass 片段，是为了分发经验或者被其他开发者使用，那么与之配置的所有变量都应该使用 !default 标志来定义，方便其他开发者重写变量。
// your-library
$baseline: 1em !default;
开发者才能在引入你的库之前定义自用的 $baseline，引入后又不必担心自己的值被重定义了。
// 开发者自己定义的变量来覆盖第三方库的样式
$baseline: 2em;
// 引入第三方库，当不加 !default 会默认覆盖第二行的变量
@import "your-library";
// 最后输出：$baseline == 2em;
!global:
!global 标志应该只在局部范围的全局变量被覆盖时使用。定义根级别的变量时，!global 标志应该省略。
$baseline: 2em;
五、扩展@Extend
@extend ：它允许一个选择器继承另一个选择器的所有样式，从而减少重复代码并提高样式的可维护性。
例如：
sass代码
%button {
display: inline-block;
padding: 10px;
border-radius: 5px;
}
.button-primary {
@extend %button;
background-color: blue;
color: white;
}
编译后
.button-primary {
display: inline-block;
padding: 10px;
border-radius: 5px;
background-color: blue;
color: white;
}
📖知识点：使用
%占位符类
%button是一个占位符类，不会直接生成 CSS 代码。- 只有当它被
@extend引用时，才会将它的样式应用到实际的选择器中。
六、混合（Mixin）
通过@mixin定义变量，@include使用变量，@content作占位
- 无参混合
- 含参混合
无参混合：
@mixin content {
width: 100px;
height: 100px;
background-color: sandybrown
};
h1 {
@include content;
}
含参混合：
- 用法1
@mixin content($width, $height, $color) {
width: $width;
height: $height;
background-color: $color;
};
h1 {
@include content(100px, 100px, #ff8c00);
}
也可以给默认值
@mixin content1($width: 100px, $height: 100px, $color: blue) {
width: $width;
height: $height;
background-color: $color;
}
h2 {
@include content1;
}
- 用法2
使用...将参数展开
@mixin content($width, $height, $color) {
width: $width;
height: $height;
background-color: $color;
}
h1 {
$params: (100px, 100px, #ff8c00);
@include content($params...);
}
@content：
通常用于在调用@mixin时插入传递的内容
@mixin myMixin {
color: blue;
@content;
}
.demo {
@include myMixin {
font-size: 20px;
}
}
编译后：
.demo {
color: blue;
font-size: 20px;
}
七、条件语句
Sass 通过 @if 和 @else 指令提供了条件语句
$flag: true;
@if $flag {
h2 {
color: blue;
}
} @else {
h2 {
color: red;
}
}
八、循环
- @each
- @for
1、@each
@each 循环绝对是 Sass 提供的三个循环方式中最常用的。它提供了一个简洁的 API 来迭代列表或 map。
- 遍历list
$themes: (
red,
yellow,
green,
blue,
purple
);
$prefix: 'my-theme';
@each $theme in $themes {
.#{$prefix}-#{$theme} {
background-color: $theme;
}
}
#{}语法：用于在 SCSS 中插入变量的值。- 动态生成类名：在选择器中使用
#{}可以根据变量的值动态生成类名。- 避免字面字符串：不使用
#{}时，变量会被当作字面字符串处理，而不是变量的值。
生成的结果为：
.my-theme-red {
background-color: red;
}
.my-theme-yellow {
background-color: yellow;
}
.my-theme-green {
background-color: green;
}
.my-theme-blue {
background-color: blue;
}
.my-theme-purple {
background-color: purple;
}
- 遍历map
$map: (
'red': red,
'yellow': yellow,
'green': green,
'blue': blue,
'purple': purple
);
@each $key, $value in $map {
.section-#{$key} {
background-color: $value;
}
}
2、@for
当需要聚合伪类 :nth-* 的时候，使用 @for 循环很有用。除了这些使用场景，如果必须迭代最好还是使用 @each 循环。
@for $i from 1 through 10 {
.item:nth-of-type(#{$i}) {
color: hsl($i * 36, 50%, 50%);
}
}
编译后：
.item:nth-of-type(1) {
color: hsl(36, 50%, 50%);
}
.item:nth-of-type(2) {
color: hsl(72, 50%, 50%);
}
.item:nth-of-type(3) {
color: hsl(108, 50%, 50%);
}
.item:nth-of-type(4) {
color: hsl(144, 50%, 50%);
}
.item:nth-of-type(5) {
color: hsl(180, 50%, 50%);
}
.item:nth-of-type(6) {
color: hsl(216, 50%, 50%);
}
.item:nth-of-type(7) {
color: hsl(252, 50%, 50%);
}
.item:nth-of-type(8) {
color: hsl(288, 50%, 50%);
}
.item:nth-of-type(9) {
color: hsl(324, 50%, 50%);
}
.item:nth-of-type(10) {
color: hsl(360, 50%, 50%);
}
九、函数
1、基本使用
$width1: 10px;
$width2: 40px;
@function widthFn($n) {
@return $n * $width1 + ($n - 1) * $width2; // 5 * 10px + (4 * 40px) = 210px
}
.leng {
width: widthFn(5);
}
2、内置函数
sass的内置函数就如同js的对象原型上的方法一样，下面列举两个：
percentage()
percentage()函数主要是将一个不带单位的数字转换成百分比形式
/*
错误写法，不能带单位
percentage(2px / 10px)
*/
div {
width:percentage(.2);
}
round()
round()函数将一个数四舍五入为一个最接近的整数，在round()函数中可以携带单位的任何数值。
div {
width: round(12.5px); // 13px
}