Sass使用

语法格式

sass以.scss作为拓展名。解决代码重复问题。

使用变量

生命一个变量 $变量名:值.

使用伪类的时候，在前面加上&可以去除空格；叫父选择器。

{    /* 压缩设置 */    "liveSassCompile.settings.formats":[        // This is Default.       {            "format": "compressed", // 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 }

变量声明

$textColor:green;

变量引用

color: $textColor;

中划线和下划线意义相同，编译时不会区分

//声明变量
$textColor-hover:red;
//引用变量
color: $textColor_hover;

嵌套规则

父选择器

div{&div{}}
//使用&可去除选择器之间的空格，叫父选择器，可以用在伪类伪元素等等

群组选择器

div{div,p,span{}}

层次选择器：>、+和~

div{>div{}}
div{+div{}}
div{~div{}}

嵌套属性

div{
    border: {
        width: ;
        style: ;
        radius: ;
    }
}

使用SASS部分文件

@import "sass","index";

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

注释

//注释不会被css编译

/* 注释会被编译到css文件中 */