# scss

# 1、css/scss/sass/less 的区别

CSS，指的是层叠样式表* (Cascading Style Sheets)，用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
SASS，(Syntactically Awesome Style Sheets) 是一种 CSS 预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，SASS 语法属于缩排语法，没有花括号，没有分号，遵循严格的缩进，它在书写规则，变量命名方面和 CSS 代码有着很大的区别，比如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
SCSS，是 Sassy CSS，即 SASS 的改良版，与原来的语法兼容，用 {} 取代了原来的缩进，这个语法带来了对 CSS 友好的语法，试图弥合 SASS 和 CSS 之间的差别。
Less，也是一种动态样式语言. 对 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. Less 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

# 2、安装

npm install sass-loader@8.x -D
npm install sass@1.x -D

1
2

# 3、简单使用

<template>
  <div class="home">
    <div class="test">
      hello scss
    </div>
  </div>
</template>
<script>
  export default {
    name: '',
  };
</script>
<style lang="scss" scoped>
  .home {
    .test {
      background: #fff;
    }

    ::v-deep .page {
      // 设置 v-deep 可穿透
    }
  }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4、嵌套

.footer {
  background-color: red;
  padding: 10px 20px;
  .navigation {
    border: solid 5px black;
    a {
      text-decoration: underline;
      padding: 10px;
      // 伪类所有子元素
      :hover {
        color: red;
      }
    }
  }

  .social-buttons {
    background-color: white;
    float: right;
    a {
      color: white;
      margin-right: 15px;
      // & 父选择器
      &:hover {
        color: red;
      }
    }
  }
}

// 选择一个元素的直接子元素
article > section {
  border: 1px solid #ccc;
}

// 同层相邻组合选择器+选择header元素后紧跟的p元素
header + p {
  font-size: 1.1em;
}

// 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素
article ~ article {
  border-top: 1px dashed #ccc;
}

// 嵌套属性
nav {
  border: {
    style: solid;
    width: 1px;
    color: #ccc;
  }
}
nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 5、变量

$highlight-color: #f90;
.selected {
  border: 1px solid $highlight-color;
}

//编译后
.selected {
  border: 1px solid #f90;
}

1
2
3
4
5
6
7
8
9

# 6、导入 SASS 文件

@import 'colors'; // 导入 colors.scss
@import 'mixins'; // 导入 mixins.scss
@import 'grid'; // 导入 grid.scss

1
2
3

# 7、静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

1
2
3
4

# 8、混合器

// 定义
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 引用
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

// sass 最终生成
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 给混合器传参
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover {
    color: $hover;
  }
  &:visited {
    color: $visited;
  }
}

// 使用
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：
a {
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 9、继承

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

1
2
3
4
5
6
7
8
9

# 10、占位符 %

用占位符声明的代码，如果不被@extend 调用就不会被编译。

%mt5 {
  margin-top: 5px;
}
%pt5 {
  padding-top: 5px;
}
.btn {
  color: red;
}

// 编译后：
.btn {
  color: red;
} //%占位符声明的代码没有被编译产生css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 11、参考

https://www.cnblogs.com/vickylinj/p/13524562.html

https://www.sass.hk/guide/

https://www.cnblogs.com/wphl-27/p/9765647.html

https://www.w3school.com.cn/css/css_jianjie.asp

← 1-css基础 1.2-less →