SASS常用语法

原文地址：这里

@charset "UTF-8";

/**
 * 自定义变量
 */
$blue: #1875e7;
div {
	color: $blue;
}

/**
 * 变量要嵌在字符串中间
 */
$side: left;
.rounded{
	border-#{$side}-radius: 5px;
}

/**
 * 计算
 */
$unit: .05rem;

.box{
	height: $unit / 2;
	width: 10 * $unit;
}

/**
 * 标签嵌套
 */
.parent{
	background: #fff;
	.child{
		font-size: 12px;
	}
}

/**
 * 属性嵌套
 */
p{
	border: {
		color: red;
		width: 1px;
	}
}

/**
 * 伪类
 */
a{
	&:hover {
		color: red;
	}
}

/**
 * 注释
 *
 * // 单行注释编译后删除
 * ** 多行注释编译后保留
 */

/**
 * 继承
 */
.class1{
	border: 1px solid #ddd;
}
.class2{
	@extend .class1;
	font-size: 12px;
}
.class3{
	@extend .class1;
	border-color: red;
}

/**
 * mixin 复用代码块
 * 如果不需要传参数，可以不带括号
 */
@mixin left{
	float: left;
	margin-left: 10px;
}
.someclass{
	@include left;
}

/**
 * mixin 可以指定参数和缺省值，就像函数了
 */
@mixin left($value: 10px){
	float: left;
	margin-left: $value;
}
.someclass2{
	@include left(20px);
}

/**
 * 颜色函数
 */
.color1{
	color: lighten(#cc3, 10%);
	/**
	 * 浅 10%
	 * #d6d65c
	 */
}
.color2{
	color: darken(#cc3, 10%);
	/**
	 * 深 10%
	 * #a3a329
	 */
}
.color3{
	color: grayscale(#cc3);
	/**
	 * 将颜色转化为灰度
	 * #808080
	 *
	 * 怎么计算的？
	 * (cc + 33) / 2 = 80
	 */
	background: grayscale(#c03);
	/**
	 * 这个算出来是 #666666
	 * 那就是。。
	 * (cc + 00) / 2 = 66
	 */
	border-color: grayscale(#c30);
	/**
	 * 那来看看这个，会有区别吗？
	 * #666666
	 */
	background-color: grayscale(#03c);
	/**
	 * #666666
	 * 好吧。。
	 *
	 * 查了文档，等同于 desaturate($color, 100%)，将色彩饱和度调至0
	 * #cc3 	-> hsl(60, 60%, 50%);
	 * #c03 	-> hsl(345, 100%, 40%);
	 * #c30 	-> hsl(15, 100%, 40%);
	 * #03c 	-> hsl(225, 100%, 40%);
	 *
	 * H(色上) S(饱和度) L(明度)
	 * S 为 0 时，RGB 都为 L
	 * 256 * 50% = 128 		-> 80
	 * 256 * 40% = 102 		-> 66
	 */
}
.color4{
	color: complement(#cc3);
	/**
	 * 反象
	 * #33c
	 */
}

/**
 * 插入文件
 * 注：会插到本文件头部
 */
@import "reset.css";

/**
 * 再试一下，如果出现两个相同的选择器，会合并到一起吗？
 * 不会合并，定义几处，翻译后还是几处
 */
div{
	background: #fff;
}
.color4{
	background: #fff;
}

/**
 * 高级用法
 */

/**
 * 条件语句
 */
p {
	@if 1 + 1 == 2 { border: 1px solid; }
	@if 5 < 3 { border: 2px dotted; }
}
p {
	@if 1 + 1 == 2 {
		background-color: #000;
	} @else {
		background-color: #fff;
	}
}

/**
 * 循环语句
 */
@for $i from 1 to 10 {
	.border-#{$i} {
		border: #{$i}px solid blue;
	}
}

$i: 6;
@while $i > 0{
	.item-#{$i} {
		width: 2em * $i;
	}
	$i: $i - 2;
}

@each $member in a, b, c, d{
	.#{$member}{
		background-image: url("/images/#{$member}.jpg");
	}
}

/**
 * 自定义函数
 */
@function double($n){
	@return $n * 2;
}
#sidebar {
	width: double(5px);
}

$unit: .05rem;
@function unit($value){
	@return $unit * $value;
}
#sidebar {
	width: unit(720);
}

/**
 * 修改单位，只影响后面的 css
 */
$unit: 1px;
#sidebar {
	width: unit(720);
}