//mixin类似于函数
@mixin border-radius($radius) { //如参数是一组值,如(0 5px 0 5px)则需在参数后加...以表明这是组参数, 引用时保持原样
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
//编译后
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}//extend 注入
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;//注入message的样式
border-color: green;
}
//编译后
.message, .success {
border: 1px solid #cccccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}#{ }//插值语句将{}包裹起来的变量去引号放入当前位置 主要用于变量传递, 颜色计算//三个参数分别表示：条件，条件为真的值，条件为假的值。
font-weight:@if($condition, 10px, 20px);
//while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
//同样还有 for 及each循环
@each $var in < list >{}
@for $i from through{}//类比 >=
@for $i from to{}//类比>
/*字符函数
unquote($string)：删除字符串中的引号；
quote($string)：给字符串添加引号。
*/
/*数字函数
Sass中的数字函数提要针对数字方面提供一系列的函数功能：
percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。
*/
/*颜色函数
hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
*/