sass 基础

sass

• CSS扩展语言 预编译css 预处理css

• sass文件

  • *.sass 不能够直接支持css写法

  • *.scss 采用 能够直接支持原生css写法

  • 这种后缀名文件不能直接引入到页面使用，页面只支持*.css格式

• sass文件需要编译才能使用，sass文件编译之后会生成css文件

• 利用node环境编译sass文件，需要安装一个依赖 sass,把这个依赖当成一个命令来使用

  • 全局安装sass

    • npm i sass -g

  • 检测是否安装成功

    • sass --version

  • sass命令列表

    • sass sass文件 css文件

    • sass sass文件夹:css文件夹

    • sass sass文件夹:css文件夹 --watch

• sass的语法

  1. 变量

     • 定义变量 $color: #fff

     • 使用变量 $color

     • 变量优点：

       1. 方便代码的维护

  2. 嵌套

     • 可以按照html的结构写css代码

     • 默认嵌套生成的是后代选择器

     • 可以利用&代表嵌套父级选择器

     • 优点

       1. 复用

       2. 维护

     • 使用sass尽量不要使用群组选择器，会导致无法预期效果

  3. 混合 mixin

     • 使用混合来替代群组选择器

     • 定义

           @mixin commonStyle{
               // 公共的样式
           }

     • 使用

           .box{
               @include commonStyle;
           }

  4. 函数 function

     • 定义

           @function 函数名(形参){
               // 函数必须要有返回值
               @return 值
           }

     • 调用

           .box{
               width: 函数名(实参);
           }

  5. 继承 extend

  6. 导入

     • @import '路径'

  7. 循环

     • @for $var from <start> to <end>

     • @for $var from <start> through <end>

  8. 判断

     • @if