Sass学习笔记

sass语法糖

嵌套规则

允许像嵌套HTML一样嵌套css。

1
2
3
4
5
<div class="granfather">
<div class="father">
<div class="son"></div>
</div>
</div>

如果编写对应这个html的css话sass可以直接:

1
2
3
4
5
6
7
8
9
.granfather {
height:100px
.father {
height:70px
.son {
height:30px
}
}
}

变量

以$开头,赋值方法与css属性的写法一样。这个可以把重复的样式放到变量里。下次使用直接使用变量。
在局部变量后面添加 !global能把局部变量改为全局变量

1
2
3
4
5
6
7
8
9
10
11
$width: 5em
#main{
width: $width
}

#xnnn{
$height: 100vh!global
}
#xnnnOut{
height: $height
}

数据类型

SassScript 支持6中数据类型:
1. 数字
2. 字符串
3. 颜色
4. 布尔
5. 空值(null)
6. 数组

运算

常见的运算符都可以使用。/ * - + % == !=

1
2
3
p{
width: 1in + 8pt; // 单位不同也可以计算
}

颜色也可以计算,老数学家了。

1
2
3
4
5
6
7
p{
color: #010203 + #010203 // 两位两位的加 01+01=02 02+02=04
}
// 计算结果
p{
color: #020406
}

字符串、布尔、数组、数字也都能运算。

@import

  1. Sass拓展了@import的功能,允许其导入SCSS和sass文件,编译后将会合并到一个文件里。另外,被导入的文件中包含的变量或者混合指令(mixin)都可以在导入的文件中使用。这个就跟平时引用js文件一样使用就可以。
  2. 使用@import时如果导入的文件名有重复的,import会首先以sass结尾的导入。
  3. 导入多个可以用一条语句,文件名之间用逗号隔开。

弊端:多次import相同的文件,会降低编译速度且造成样式覆盖,并产生重复的输出。以后可能会被弃用。

@use

@use和@import的用法类似,但是还是点区别。

  1. 用use的文件只导入一次,不管在项目中use他多少次。
  2. 以下划线或者连字符( _ or - )开头的变量,mixin和成员变量(函数)被认为是私有的。
  3. 导入的文件有局部作用域,不会传递。
  4. 当我们在同一个文件里@use多个文件时,sass会为每个文件生成一个命名空间。这样他们之间就不能互相访问了。所以我们要是用 . 号语法来访问。类似于js的对象属性。
    1
    2
    3
    4
    5
    6
    7
    8
    @use 'button'
    @use 'form'
    buttonColor{
    background-color: button.$color
    }
    form {
    font-size:form.$size
    }

我们也可以在导入时添加 as xxxx 来改变或者删除命名空间

1
2
@use 'button' as * //星号会删除所有命名空间
@use 'forms' as 'f' // 用了f之后我们就不用在写 'forms'了,直接写 f.$size就可以。

@extend

使用@extend可以将一个选择器下的所有样式继承给另一个选择器。like this。

1
2
3
4
5
6
7
.error {
backgroud-color: #fff
}
.otherError {
@extend .error
border-width: 3px
}

一些概念:

  1. 延伸复杂的选择器。例如:a:hover
  2. 多重延伸。 同一个选择器可以延伸多个选择器,他的属性将积诚阁所有被延伸的选择器。
  3. 继续延伸。 爷爷传爸爸,爸爸传儿子。儿子也能用。
  4. 有待补充,其他不常用。

    控制指令

    if
    能做判断.
    1
    2
    3
    p{
    color:if(1+1=2, red, green)
    }
@if

当@if的表达式返回值不是false或者null时,条件成立,输出{}内的代码。

1
2
3
4
5
6
7
8
p{
@if 1+1 == 2 {border:1px soild}
@if 5<3 {border:2px soild}
}
//编译后
p{
border:1px soild
}

感谢您的阅读。 🙏