1、变量

1-1、变量声明

$符号开头

$highlight-color: #F90;

可以使用多个属性值

$basic-border: 1px solid black;

1-2、 变量引用

和声明时一样的写法

$highlight-color

2、嵌套CSS

2-1、基本嵌套

如下所示

.dome{ width: 200px; height: 100px; background-color: #999; .dome-box{ color: #fff; } }

2-2、 父选择器的标识符&

一般用于伪类写法

article a { color: blue; &:hover { color: red } }

2-3、群组嵌套

.container { h1, h2, h3 {margin-bottom: .8em} }

2-4、子组合选择器和同层组合选择器：>、+和~;

.dome{ width: 200px; height: 100px; background-color: #999; >.dome-box{ color: #fff; } }

2-5、属性嵌套

可以把border: 1px solid #000;写成：

nav { border: { style: solid; width: 1px; color: #000; } }

3、混合器

3-1、声明混合器

@mixin定义混合器

@mixin text-overflow{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

3-2、 使用选择器

@include使用混合器

.dome { @include text-overflow(); width: 200px; height: 100px; background-color: #999; > .dome-box { color: #fff; } }

3-3、给混合器传参

定义可传参混合器

@mixin text-overflow($normal) { color: $normal; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

使用混合器

@include text-overflow(#fff);

混合器会存在死区，需要先定义后使用。

4、继承

4-1、实现继承

@extend实现继承，继承会寻找上下文的被继承者，与混合器相反。

.text-overflow { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .text { color: #fff; @extend .text-overflow; }

PS:如何在VUE项目中使用sass？ 安装 node-sass和sass-loader

npm install node-sass --save-dev npm install sass-loader --save-dev