scss的快速使用指南-基本同less

1. 安装

   # npm全局安装sass, 这样在其他项目里,也能直接调用,不需要重新安装
   npm install -g sass
   
   # 查看版本,确定安装成功
   sass --version
   
   # 基本使用
   # 保存main.scss,将其编译为普通样式
   
   sass ./src/css/main.scss ./src/css/main.css

2. 变量

   /* 语法是"$+变量名" */
   /* 定义了themeColor变量 */
   $themeColor: #ff5100;
   
   /* 使用 */
   .tutor {
       background-color: $themeColor;
   }
   
   /* 对比less：*/
   @themeColor: #ff5100;
   /* 使用 */
   .tutor {
       background-color: @themeColor;
   }

3. 嵌套

   同html的标签嵌套那样：

   .app-container {
     width: 37.5rem;
       /* & 表示当前父级，类似于JS的this：.app-container */
     & > header {
       height: 5rem;
       opacity: 0.8;
       }
       .logo {
         width: 5rem;
         height: 1.38rem;
       }
   }
   
   /*对比less：相同 */

4. 混入（mixin）

   即相当于是JS的函数。

   将公共的样式抽离出来变成一个mixin,然后使用@use 该mixin

   第一步，定义mixin:

   /* 定义mixin ; 比如要将绝对定位的代码抽离出来 */
   /* 其中参数是变量，可以设置默认值 */
   @mixin absolutePosition($top:1rem, $right) {
     position: absolute;
     top: $top;
     right: $right;
   }
   
   /* 对比less：*/
   rounded-corners (@radius: 5px) {
       border-radius: @radius;
   }
   

   第二步：在的样式中,通过@include来使用mixin：

   span {
     display: inline-block;
     z-index: 2;
     /* 使用absolutePosition，传入实际参数 */
     @include absolutePosition(-3.2rem, 0);
   }
   
   /* 对比less： */
   #header {
       rounded-corners(10px);
   }

5. 继承（@extend）

   可以通过@extend直接继承。

   第一步：比如有如下样式需要被继承，而不是单独复制一遍到需要的地方：

   .tutor {
       background-color: red;
   }

   第二步：使用，哪里要用，就在哪里通过@extend继承

   .order {
       /*继承 */
       @extend .tutor;
        /*下面是.order中自己的样式*/
        color: #111111;
   }

6. 模块

   相当于是css的import语法，即在A.scss中导入B.scss.因为容易与css的@import混淆，所以才用use语法。

   在main.scss中引入base.scss,语法为@use

   第一步：在main.scss中通过命名空间导入或整体导入

   // 把变量和@mixin, header样式等抽离; 模块化引入
   @use "base"; // 创建一个 base 命名空间
   
   @use "../../node_modules/reset-css/sass/reset"; // 整体引入reset,初始化样式

   第二步：使用命名空间.属性名来使用

   .banner-container {
       background-color: #242345;
       border-top: 2px solid base.$themeColor; //使用base中的变量：$themeColor
   }
   
   h1 {
         @include base.fontSet(2.4rem, 600); //使用base中的mixin
   }

7. 注释

   标准的 CSS 注释 / comment / ，会保留到编译后的文件
   单行注释 // comment，只保留在 scss 文件中，编译到 css 文件后,会被省略
   重要注释:在/后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注

   */**!
   　　　　这是重要注释！即使压缩了样式，也会保留
   */

8. 计算

   在 css 样式文件里,我们可以直接进行某些样式值的计算

   @use "sass:math"; // 引入sass内置的math模块
   
   width: math.div(600, 960) * 100%;

   还原设计稿的时候,有些计算起来比较麻烦的值,就不用自己先计算出来了

9. 其他 Sass 特性
   Sass 还有很多其他的功能，包括丰富的内置函数(颜色函数等)、允许用户自定义函数等，感兴趣的自己拓展.

相关资源：Sass官网