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);
}