深入分析 Sass：从根本到进阶的 CSS 预处理处罚器应用指南

使用流程

演变汗青

.Sass
从前的 sass 的文件名后缀是 .sass, 下面为其语法

1. h1
2.     color: #000
3.     background: #fff

复制代码

.Scss
在 3.x 以后的版本, 引入了 .scss 的语法, 雷同于我们的 css 语法
有了 "花括号“、“分号”, 可以直接兼容 老的项目的 css

1. h1 {
2.     color: #000;
3.     background: #fff;
4. }

复制代码

留意: 一个项目中可以混淆使用两种语法, 但不能在一个文件中使用两种语法
安装方法

• 使用 npm 举行安装, 其他安装方法可自行百度
  

1. npm install -g sass

复制代码

• 检察版本
  

1. sass --version

复制代码

• 编译
  

1. // 直接将输出结果输出在终端
2. sass test.scss

复制代码

1. // 将结果以文件输出, 后面再加 .css 的文件名即可
2. sass test.scss test.css

复制代码

根本使用

变量的界说与使用

sass 变量界说, 使用 $ 符号

1. /* 定义变量与值 */
2. $bgcolor: lightblue;
3. $textcolor: darkblue;
4. $fontsize: 18px;
6. /* 使用变量 */
7. body {
8.     background-color: $bgcolor;
9.     color: $textcolor;
10.     font-size: $fontsize;
11. }

复制代码

扩展: css 变量的界说与使用

1. /* 变量的定义 */
2. /* -- 两个减号 */
3. :root {
4.     --main-bg-color: brown;
5. }
7. /* 变量的使用 */
8. .element {
9.     background-color: var(--main-bg-color);
10. }

复制代码

文件的引用

直接使用 @import, 即可导入, 这个语法原生 css 也是有的

1. // 单文件引入
2. @import "variables";
4. // 多文件引入
5. @import "variables", "compass/reset";

复制代码

如果要使用 css 原生 @import , 可以按以下既定规则

• 当 @import 后边跟着文件名是以 .css 末了的时间
  
• 当 @import 后边跟着的是 http:// 开头的字符串的时间
  
• 当 @import 后边跟着的是 url() 开头的字符串的时间
  
• 当 @import 后边跟着的是 media queries 开头的字符串的时间
  

如果要使用 sass 的 @import , 可以按以下既定规则

• 没有文件后缀名的时间, sass 会添加 .scss 大概 .sass 的后缀
  
• 同一个目次下, 全部文件不能重名
  

扩展: 如果你不想 sass 文件被编译, 可以在前面加 _ 下划线, 好比 _filename 如许文件就会被忽略
表明的差异

sass 有两种表明方式

1. // test.scs 文件
2. // 主题样式
3. .headline {
4.     font-family: $headline-ff;
5. }
7. /* 页面样式 */
8. .main-sec {
9.         font-family: $main-sec-ff;
10. }

复制代码

那这两种样式有何差异呢? 我们看下编译后的文件

1. /* test.css 文件, 由 test.scss 编译而来 */
2. .headline {
3.     font-family: Braggadocio;
4. }
6. /* 页面样式 */
7. .main-sec {
8.         font-family: Arial;
9. }

复制代码

可以看到, .headline 没有表明信息, 而 .main-sec 有, 分析 // 双斜线表明, 不会被编译
扩展: css 表明, 只能使用 /* */ 举行表明
作用域

Sass 具有作用域雷同于 JavaScript 的中的函数作用域

1. $myColor: red;
3. h1 {
4.     $myColor: green;   // 只在 h1 里头有用，局部作用域
5.           color: $myColor;
6. }
8. p {
9.           color: $myColor;
10. }

复制代码

编译效果

1. h1 {
2.           color: green;
3. }
5. p {
6.           color: red;
7. }

复制代码

嵌套规则与属性

嵌套规则的使用

1. // scss 文件
2. nav {
3.           ul {
4.             margin: 0;
5.             padding: 0;
6.             list-style: none;
7.   }
8.           li {
9.             display: inline-block;
10.   }
11.           a {
12.             display: block;
13.                    padding: 6px 12px;
14.             text-decoration: none;
15.   }
16. }

复制代码

1. /* 编译后 .css 文件 */
2. nav ul {
3.           margin: 0;
4.           padding: 0;
5.           list-style: none;
6. }
7. nav li {
8.           display: inline-block;
9. }
10. nav a {
11.           display: block;
12.           padding: 6px 12px;
13.           text-decoration: none;
14. }

复制代码

嵌套属性的使用

1. // scss 文件
2. font: {
3.           family: Helvetica, sans-serif;
4.           size: 18px;
5.           weight: bold;
6. }
8. text: {
9.           align: center;
10.           transform: lowercase;
11.           overflow: hidden;
12. }

复制代码

1. /* 编译后 .css 文件 */
2. font-family: Helvetica, sans-serif;
3. font-size: 18px;
4. font-weight: bold;
6. text-align: center;
7. text-transform: lowercase;
8. text-overflow: hidden;

复制代码

混入的使用

混入的根本使用
混入的界说 @mixin

1. @mixin mixin-name {
2.           color: red;
3.           font-size: 25px;
4.           font-weight: bold;
5.           border: 1px solid blue;
6. }

复制代码

混入的使用 @include

1. selector {
2.           @include mixin-name;
3. }

复制代码

混入可以通报变量

1. /* 混入接收两个参数 */
2. @mixin bordered($color, $width) {
3.           border: $width solid $color;
4. }
6. .myArticle {
7.           @include bordered(blue, 1px);  // 调用混入，并传递两个参数
8. }
10. .myNotes {
11.           @include bordered(red, 2px); // 调用混入，并传递两个参数
12. }

复制代码

编译后的 .css 文件

1. .myArticle {
2.           border: 1px solid blue;
3. }
5. .myNotes {
6.           border: 2px solid red;
7. }

复制代码

也可以设置默认值

1. @mixin sexy-border($color, $width: 1in) {
2.           border: {
3.             color: $color;
4.             width: $width;
5.             style: dashed;
6.           }
7. }
8. p { @include sexy-border(blue); }
9. h1 { @include sexy-border(blue, 2in); }

复制代码

编译效果

1. p {
2.           border-color: blue;
3.           border-width: 1in;
4.           border-style: dashed;
5. }
7. h1 {
8.           border-color: blue;
9.           border-width: 2in;
10.           border-style: dashed;
11. }

复制代码

不定参数的情况下, 我们可以使用 ... 来设置参数

1. @mixin box-shadow($shadows...) {
2.      -moz-box-shadow: $shadows;
3.      -webkit-box-shadow: $shadows;
4.      box-shadow: $shadows;
5. }
7. .shadows {
8.           @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
9. }

复制代码

编译效果

1. .shadows {
2.           -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
3.           -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
4.           box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
5. }

复制代码

扩展: 欣赏器前缀使用混入, 会很方便

1. @mixin transform($property) {
2.           -webkit-transform: $property;
3.           -ms-transform: $property;
4.           transform: $property;
5. }
7. .myBox {
8.           @include transform(rotate(20deg));
9. }

复制代码

编译效果

1. .myBox {
2.           -webkit-transform: rotate(20deg);
3.           -ms-transform: rotate(20deg);
4.           transform: rotate(20deg);
5. }

复制代码

继续

根本使用
场景: 三个样式只有少量区别, 此中一个样式, 别的两个都有, 那么就可以使用继续

1. .button-basic  {
2.           border: none;
3.           padding: 15px 30px;
4.           text-align: center;
5.           font-size: 16px;
6.           cursor: pointer;
7. }
9. .button-report  {
10.           @extend .button-basic;
11.           background-color: red;
12. }
14. .button-submit  {
15.           @extend .button-basic;
16.           background-color: green;
17.           color: white;
18. }

复制代码

编译效果

1. .button-basic, .button-report, .button-submit {
2.           border: none;
3.           padding: 15px 30px;
4.           text-align: center;
5.           font-size: 16px;
6.           cursor: pointer;
7. }
9. .button-report  {
10.           background-color: red;
11. }
13. .button-submit  {
14.           background-color: green;
15.           color: white;
16. }

复制代码

继续多个选择器

1. .one {
2.         width:100px;height:100px;
3. }
4. .two {
5.         /*继承的样式*/
6.         @extend .one, .three;
7.         /*独立的样式*/
8.         background:red;
9.         border:5px solid #000;
10. }
11. .three {
12.         padding:10px;
13. }

复制代码

编译效果

1. .one, .two {
2.           width: 100px;
3.           height: 100px;
4. }
6. .two {
7.           /*独立的样式*/
8.           background: red;
9.           border: 5px solid #000;
10. }
12. .three, .two {
13.           padding: 10px;
14. }

复制代码

使用 %, 用来构建只用来继续的选择器
不使用 % 的情况

1. .error {
2.     color: #f00;
3. }
5. .serious-serror {
6.     @extend .error;
7.     border: 1px #f00;
8. }

复制代码

编译效果

1. .error, .serious-serror {
2.         color: #f00;
3. }
5. .serious-serror {
6.           border: 1px #f00;
7. }

复制代码

使用 % 的情况

1. %error {
2.     color: #f00;
3. }
5. .serious-serror {
6.     @extend %error;
7.     border: 1px #f00;
8. }

复制代码

编译效果

1. .serious-serror {
2.           color: #f00;
3. }
5. .serious-serror {
6.           border: 1px #f00;
7. }

复制代码

可以看到使用 % 的选择器 .error 就不体现了
扩展: extend 不可以继续嵌套选择器
选择器

在函数内部使用 & 体现当前 (& add 符合)

1. .webdome-sec {
2.     &:hover {
3.         background-color: #f5f5f5;
4.     }
5. }

复制代码

编译效果

1. .webdome-sec:hover {
2.           background-color: #f5f5f5;
3. }

复制代码

函数

@function 界说函数, 知道就好, 根本不消
拼接

1. <template>
2.   <div class="box">
3.     <div class="box-content">
4.       <div class="box-content-header"></div>
5.       <div class="box-content-body"></div>
6.     </div>
7.   </div>
8. </template>
10. <style lang="scss">
11. // 拼接方式 写样式代码，减少类名长度，且优雅
12. .box {
13.   width: 200px;
14.   height: 200px;
15.   background-color: aqua;
16.   &-content {
17.     display: flex;
18.     // 继承整合相同样式
19.     &-size {
20.       width: 50px;
21.       height: 50px;
22.     }
23.     &-header {
24.       @extend .box-content-size;
25.       background-color: red;
26.     }
28.     &-body {
29.       @extend .box-content-size;
30.       background-color: yellow;
31.     }
32.   }
33. }
34. </style>

复制代码