scss预处理器的使用总结

变量 、嵌套、Mixin混合、function函数、插值

变量及文件导入

通过$定义变量

$white:#fff; $black:#000;

变量引用

.containner{ color:$black; }

通常我们会单独创建一个局部scss文件来定义这些变量 例如 _varables.scss
varables前面的下划线用来区分这是局部文件，不会生成对应的css文件，通过@import方式在其他文件中导入该文件（下划线可以省略）

@import 'varables'; 嵌套

例如我们有这样一个html结构

<div> <div></div> </div>

使用嵌套语法可以写成：

.containner{ background: #eee; color:$black; .banner{ background: red; } }

最后编译成css：

.containner { background: #eee; color: #000; } .containner .banner { background: red; }

高级用法

&、>、+、~

使用&符合使得区分元素不以后代选择器的方式连接，例如链接使用到的hover效果

a{ color:red; &:hover{ color:blue; } }

编译后

.containner a:hover { color: blue; } mixin混合

如果我们有多个地方使用到相同的样式，我们就可以将其写成一个mixin方法，然后在不同的地方去使用它

一般通过@mixin来定义一个函数，@include来引用

例如定义一个用于清除浮动的mixin方法

@mixin clearfix() { &::after { display: block; clear: both; content: ""; } }

我们就可以这样使用

.list{ list-style: none; @include clearfix(); .item{ float: left; } } mixin方法传参

类似JavaScript函数我们可以传递参数

@mixin colorlink($normal, $hover, $visited){ color: $normal; &:hover { color: $hover; } &:visited { color: $visited; } }

使用

@include colorlink(blue,red,green);

也可以使用这种方式，不用区分参数顺序

@include colorlink( $normal: blue, $visited: green, $hover: red ); 设置默认参数值

通过以下方式来这是默认参数值

@mixin size($size:50px){ font-size: $size; }

调用的时候我们可以根据需求来决定是否传递参数

.title{ // @include size(); @include size(20px); } @fuction和@mixin 区别：

sass本身就有一些内置的函数，方便我们调用，如强大的color函数，还有darken、rgba、ie-hex-str、percentage、lighten、length、nth、unit、unitless等

其次就是它返回的是一个值，而不是一段css样式代码什么的

内置函数

1、rgba

rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

2、percentage

将一个没有单位的数字转成百分比形式

percentage(0.2) => 20% 通过@function来自定义函数 // px转em @function pxToEm($px, $base: 16) { @return ($px / $base) * 1em; }

调用

p{ font-size:pxToEm(20); }

解析

p{ font-size: 1.25em; } 其他

1、插值语句 #{}
通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }

生成

p.foo { border-color: blue; }

2、使用@for指令输出重复格式内容

@for $i from 1 through 28 { .bg-#{$i} { background: url(brand_day_review#{$i}.jpg) no-repeat center / 1560px auto; } }

生成

.containner .bg-1 { background: url(brand_day_review1.jpg) no-repeat center/1560px auto; } .containner .bg-2 { background: url(brand_day_review2.jpg) no-repeat center/1560px auto; } .containner .bg-3 { background: url(brand_day_review3.jpg) no-repeat center/1560px auto; } .containner .bg-4 { background: url(brand_day_review4.jpg) no-repeat center/1560px auto; } .containner .bg-5 { background: url(brand_day_review5.jpg) no-repeat center/1560px auto; }

除了@for，其他的还有@if 、@each、@while等，这些都属于控制指令