## CSS CSS, Cascading Style Sheets,层叠样式表，是HTML文件中用来显示样式的一种标识语言。可以用来设置字体、颜色、边框距离等。 Sass(Syntactically Awesome Style Sheets) 语法很棒的样式表。 2010 SCSS ， Sass CSS。 CSS缺点： 大型项目选择器，层叠复杂度高。 Sass接近编程语言，提供变量、嵌套、混合、继承等特性。 https://sass-lang.com/guide Sass基于Ruby开发。 ## VS 插件 Live Sass Compiler 安装之后，点击最下方的 "Watch Sass", 会实时编译打开目录的scss 文件。 自动产生一个 .css.map 后缀的文件， 里面内容是源文件和编译后的css文件的对应。 注意： 打开到指定目录， 会扫描打开目录的所有文件。 ## 变量 Variables ## 嵌套 Nesting 不宜过度 ## 模块（Modules） ``` //模块 @import 'base'; html{ background-color: $hcolor; } //嵌套 html { body { background-color: $hcolor; } } ``` ## 混合 Mixin Mixin翻译过来是混合， 所以这个功能也称为混合宏，其实就是相当于函数。 * 使用@mixin 定义 * 使用@include调用 在浏览器兼容的时候非常有用。 ``` @mixin div-size($width:50px,$height:50px) { width:$width; height:$height; } #div1 { @include div-size; } #div2 { @include div-size(100px,100px); } ``` ## 继承 ## 操作符 ## CSS扩展 引用父级选择器 "`&`" ## 嵌套属性 ``` //引用父级选择器 a{ font-weight: bold; &:hover{text-decoration: underline;} } #mydiv{ a{ font-weight: bold; &:hover{text-decoration: underline;} } } #mydiv2{ &-sidebar{ border:1px; } } //命名空间 .myclass{ //命名空间后有冒号 font: { size:30em; } } ```