Sass安装使用

vs code 安装Sass插件

点开设置，找到扩展设置，打开如下 

 

 点开settings.jdon中编辑

{
    "explorer.confirmDelete": false,
    "liveSassCompile.settings.autoprefix": [
        



    
    ],
        /* 压缩设置 */
        "liveSassCompile.settings.formats":[
            // This is Default.
            {
                "format": "compact", // nested, expanded, compact, compressed
                "extensionName": ".min.css",
                "savePath": "~/../css"  // 为 null 表示当前目录
            }
        ],
     
        /* 排除目录 */
        "liveSassCompile.settings.excludeList": [
             
            "**/node_modules/**",
            ".vscode/**" 
        ],
     
        /* 是否生成对应的map */
        "liveSassCompile.settings.generateMap": false,
     
        /* 是否添加兼容前缀 如： -webkit- , -moz- ... */
        "liveSassCompile.settings.autoprefix": [
            "> 1%",
            "last 2 versions"
        ],
     
        "liveSassCompile.settings.showOutputWindow": true
    
}

把这短代码复制进去就能使用

 "format": "compact",

// nested, expanded, compact, compressed   是压缩的4种形式
                "extensionName": ".min.css",  生产css名称
                "savePath": "~/../css"  生产css的目录

sass特点

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

   $fontSize: 12px;
   body{
       font-size:$fontSize;
   }

   编译后

4. body{
       font-size:12px;
   }

 

默认变量

sass 的默认变量仅需要在值后面加上 !default 即可。

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后

body{
    line-height:1.5;
}

选中 header 中的 a 标签，在写 CSS 会这样写

nav a {
  color:red;
}

header nav a {
  color:green;
}

在 Sass 中，就可以使用选择器的嵌套来实现

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}