21-scss

sass

• 概念：css的预处理器，可以帮助我们减少css重复代码的编写，减少开发时间，提高css代码开发效率

• 安装：在插件库中搜索easy sass进行安装即可

  

• 路径配置：

  

  • 注意：路径配置基于当前根目录出发

使用

• 嵌套编写，建议最多嵌套三层

  .header{
      width: 100px;
      height: 100px;
      background-color: $mycolor;
      .center{
          width: 50px;
          height: 50px;
          margin: 0 auto;
          background-color: $mycolor;
          &:hover{
              color: pink;
          }
          div{
              width: 100%;
              height: 200px - 10px;
          }
          ~div{
              border:$myborder;
          }
      }
  }
  

  • &：可以标签当前父元素

• 支持变量：可以将需要使用的数据保存在变量中

  1.定义
  $自定义变量名：属性值;
  2.使用
  css属性名:$自定义变量名;
  

  • 变量必须先定义再使用

• 支持数学运算

       div{
            width: 100%;
            height: 200px - 10px;
        }