sass用法

变量的使用

1. 使用美元符号$
2. 注意声明的顺序
3. 可以在一个变量中引用另一个变量
4. 调用的时候依然用美元符号加变量

嵌套

可以将多个内容嵌套在一起写

&

一般搭配伪类元素

多种选择器

• 相邻兄弟选择弃

子元素选择器 ～ 后继选择器

支持多属性叠写

.app {
  border:  {
    width: 1px,
    style: 1px,
    color: red
  }
}

import

1. 导入外部scss文件，不要添加.scss后缀

!default

如果这个变量被声明赋值了，就用声明赋值的否则就用默认值

$default-test: 4000px !default;
.div {
  width: $default-test;
}

mixin

1. 可以把它当作一个大型的结构体，声明格式如下：@mixin name {}
2. 在任意处使用@include即可把@mixin定义的内容引入
3. mixin声明后可以添加函数

@mixin textCut {
}
.note {
    @include textCut;
}

extends

extends name 来继承关系