Sass

语法

注释：

1. 多行注释： /* */
2. 单行注释： //

变量

1. 变量以$开头，$+变量名:变量值；
2. 全局变量与局部变量：定义在任何选择器之外的变量称为全局变量，定义在选择器内的变量称为局部变量。要在局部修改全局变量,需要添加!global(sass 3.4版本后可用)
3. 默认变量 !default，假如有两个变量重名，下面的变量引用了 !default，则不会覆盖上面的变量。
4. 变量特殊用法：变量作为属性或在某些特殊情况下要以#{$变量名}形式使用
5. 多值变量：分为list类型和map类型，list类型像js中的数组，map类型像js中的对象

	# 局部变量修改全局变量
	$color: #333; // 全局变量
	.box{
		$color:#fff !global;// 局部修改全局变量
	}

	# 特殊变量用法：
	$borderDirection:top;
	//应用于class和属性
	.border-#{$borderDirection}{
		border-#{$borderDirection}:1px solid #ccc;
	}

	# list类型使用
	$pd: 5px 10px 15px 20px;
	.content{padding:$pd;}
	.btop{border-top:nth($pd,1);}//$pd从1开始数,这里得到第一个  5px

	# map类型使用
	$headings:(h1:2em,h2:1.5em,h3:1.2em);
	h1{font-size:map-get($headings,h1)}

嵌套

在sass里,可以使用嵌套写样式
在嵌套里用&表示父元素选择器

	div{
		width:100px;
		height:100px;
		p{
			width:50px;
			height:50px;
			&:hover{
				background-color:blue;// 这里&表示p
			}
			span{
				width:25px;
				height:25px;
			}
		}
	}

mixin混合器

实现大量、复杂重复样式的使用
sass中使用@mixin声明混合,通过@include来调用

• 无参数mixin
• 有参数mixini：参数名以$符号开始
• 多个参数mixin：多个参数以逗号分开
• @content：多用于媒体查询的封装

        @mixin important-text {
            color: red;
            font-size: 25px;
            font-weight: bold;
            border: 1px solid blue;
        }
        @mixin bordered($width,$color) {
            border: $width solid $color;
        }
        @mixin max-screen($res){
          @media only screen and ( max-width: $res )
          {
            @content;
          }
        }

		// 使用
        h4{ @include important-text; }
        .myArticle {
            @include bordered(1px,blue);
        }
        @include max-screen(480px) {
          body { color: red }
        }

继承

使用选择器的继承，使用关键词@extend

	//继承一般样式
	h1{font-size:20px;}
	@extend h1;

	//占位选择器%
	//占位符编译后不存在css样式中
    %ir{
    	color: transparent;
    	text-shadow: none;
    	background-color: transparent;
    	border: 0;
    }
    @extend %ir;

函数

Sass中的数字函数主要针对数字方面提供一系列的函数功能

常用函数:

• percentage($value)：将一个不带单位的数转换成百分比值；
• round($value)：将数值四舍五入，转换成一个最接近的整数；
• ceil($value)：将大于自己的小数转换成下一位整数；
• floor($value)：将一个数去除他的小数部分；
• abs($value)：返回一个数的绝对值；
• min($numbers…)：找出几个数值之间的最小值；
• max($numbers…)：找出几个数值之间的最大值；
• lighten($color,$percent) 通过改变颜$color色的亮度值（0% - 100%），让颜色变亮；
• darken($color,$percent) 通过改变颜$color色的亮度值（0% - 100%），让颜色变暗；
• 自定义函数：格式：@function函数名

  •   	  $oneWidth: 10px;  
          $twoWidth: 40px;  
          
          @function widthFn($n) {  
              @return $n * $twoWidth + ($n - 1) * $oneWidth;  
          }  
          
          .leng {   
              width: widthFn($n : 5);  
          }```
    
    

运算

sass具有运算的特性,可以对数值型的value(如数字,颜色,变量等)进行加减乘除四则运算

	$fontSize:10px;
	div{
		width:$fontSize * 2 ;
	}

条件判断及循环

• if判断

    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else {
        color: black;
    }

• for循环

	@for $var from <start> through <end>//（包含end值）
    @for $var from <start> to <end>//（不包含en值）

导入

sass中导入其他sass文件,最后编译为一个css文件,优于纯css的@import

	@import 'sass2';

编译

使用gulp-sass