scss基本用法

 

sass的功能远不止这点，我只是记下自已常用的功能，具体请看sass官网

定义sass变量

 

#{} 插值语句，作用有点像es6的字符串模板

 

 嵌套

 

 父选择器 &

 在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

@import 引入外部文件 

 

 Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。 Sass 在当前地址，或 Rack, Rails, Merb 的 Sass 文件地址寻找 Sass 文件，如果需要设定其他地址，可以用 :load_paths 选项，或者在命令行中输入 --load-path 命令。 通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

@extend

 @extend可以继承另一个选择器的属性

等同于 .box{width:100px;height:100px}

混合指令 @mixin @includes

@mixin 用于定义一个混合指令，指令中可以设置多个形参，每个参数都需要默认值，如果不传，则使用默认值 

 

如果指令中只传入值，则按顺序赋值

如果想不按顺序或者只给某个参数赋值，可以带上参数名