sass (scss)

具体步骤

安装全局sass环境：
```
      npm install sass -g
```

转换scss和css：

      sass index.scss index.css
      //将名为index.scss文件转为index.css文件

实时编译：

      //1~监听index.scss文件和index.css文件
      sass --watch index.scss:index.css
      
      //2~监听scss文件夹和css文件夹（实用与很多文件的时候使用）
      sass --watch scss:css

也可以直接使用vscode插件Easy Sass

QQ图片20220315190242.png

语法

变量
```
  $c:red;
  h1{
      color:$c;
  }
```

嵌套

  ul{
      width：100px;
      li{
          width：80px;
          div{
              width：70px;
              p{
                  span{
                      color:red;
                 }
             }
          }
      }
  }

嵌套中的&

   div{
       width:100px;
       height:200px;
       
       &:hover{
           width:50px;
           color:red;
       }
   }
   //编译结果
   div{
       width:100px;
       height:200px;
   }
   div:hover{
        width:50px;
        color:red;
   }

群组嵌套

    h1,h2,h3{
        wwidth:100px;
        
        .box{
            color:red;
        }
    }
    //编译结果
    h1,h2,h3{
        width：100px;
    }
    h1 .box, h2 .box, h3 .box{
        color:red;
    }

混入

     就好比js里面的函数可以调用
     @mixin radius{
         border:1px solid red;
         border-radius:10px;
     }
     div{
         width:100px;
         height:30px;
         
         //调用上面的
         @include radius;
     }

继承

  div,p{
      width:100px;
      heght:50px;
      bacground-color:pink;
  }
  p{
      @extend div;
      
      fon-size:20px;
      color:red;
  }

注释

  //在编译的时候就会被过滤
  /*我在编译的时候会被一起编译过去*/
  /*!我是一个强力注释，不光会编译过去，将来压缩的时候也在*/

导入文件

  导入文件
  @import './index.scss';
  @import './mixin.scss';
  
  
  div{
      @include 其他文件里面封装好了的东西
  }

更过语法查看官网

sass(scss)css预处理工具

sass (scss)

具体步骤

语法