sass学习笔记

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