Scss预处理器的使用总结

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

变量及文件导入

通过$定义变量

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

变量引用

.containner{
	color:$black;
}

通常我们会单独创建一个局部scss文件来定义这些变量 例如 _varables.scss

varables前面的下划线用来区分这是局部文件，不会生成对应的css文件，通过@import方式在其他文件中导入该文件（下划线可以省略）

@import 'varables';

嵌套

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

<div class="containner">
		<div class="banner"></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等，这些都属于控制指令

参考阅读

sass中文网

组织你的Sass文件

sass揭秘之@mixin，%，@function

Sass基础——Rem与Px的转换