sass指令

1. @if指令

Sass的@if指令和js的if条件语句差不多，可配合@else if 和 @else来使用，我们可以通过该指令来控制一个元素的显示隐藏。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//scss
@mixin blockOrHidden($boolean:true) {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}
.block {
    @include blockOrHidden;
}
.hidden {
    @include blockOrHidden
}

*@degub 用于sass调试时，编译出错时即显示@debug设定的信息。
编译后的css

1
2
3
4
5
6
7
.block {
    display: block;
}

.hidden {
    display: none;
}
2. @for循环

sass的@for循环有两种用法：

1
2
@for $i from <start> through <end>
@for $i from <start> to <end>

$i 为循环的变量，start 表示起始值，end 表示结束值，这两个的区别在于关键字 through 表示包括 end 这个数值，而 to 则不包括 end 这个值。如下：

1
2
3
4
5
6
//scss
@for $i from 1 through 3 {
    .item-#{$i} {
        width: 20px * $i;
    }
}

编译出来的css

1
2
3
4
5
6
7
8
9
.item-1 {
    width: 20px;
}
.item-2 {
    width: 40px;
}
.item-3 {
    width: 60px;
}
3. @while循环
1
2
3
4
5
6
7
8
9
//scss
$types: 4;
$type-width: 20px;
@while $type > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $type - 1;
}

编译出来的css

1
2
3
4
5
6
7
8
9
10
11
12
.while-4 {
    width: 24px;
}
.while-3 {
    width: 23px;
}
.while-2 {
    width: 22px;
}
.while-1 {
    width: 21px;
}
4. @each遍历

用法： @each $var in <list> ，list为一个值列表。
用例：

1
2
3
4
5
6
7
8
9
10
11
12
//scss
$list: adam john wynn mason kuroir;
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/views/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

编译出来的css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.author-bio .photo-adam {
    background: url("/images/views/adam.png") no-repeat; 
}
.author-bio .photo-john {
    background: url("/images/views/john.png") no-repeat; 
}
.author-bio .photo-wynn {
    background: url("/images/views/wynn.png") no-repeat; 
}
.author-bio .photo-mason {
    background: url("/images/views/mason.png") no-repeat; 
}
.author-bio .photo-kuroir {
    background: url("/images/views/kuroir.png") no-repeat; 
}

sass函数

sass中的函数有字符串函数、数字函数、列表函数、颜色函数、Introspection函数、三元函数、Maps函数等

1. 字符串函数
  • unquote($string)：删除字符串中的引号；
  • quote($string)：给字符串添加引号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

编译后的 css 代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

从测试的效果中可以看出，unquote() 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。
另外还有 To-upper-case() 函数将字符串小写字母转换成大写字母。To-lower-case() 函数与 To-upper-case() 刚好相反，将字符串转换成小写字母.

2. 数字函数
  • percentage($value)：将一个不带单位的数转换成百分比值；
  • round($value)：将数值四舍五入，转换成一个最接近的整数；
  • ceil($value)：将大于自己的小数转换成下一位整数；
  • floor($value)：将一个数去除他的小数部分；
  • abs($value)：返回一个数的绝对值；
  • min($numbers…)：找出几个数值之间的最小值；
  • max($numbers…)：找出几个数值之间的最大值；
  • random()： 获取随机数
3. 列表函数
  • length($list)：返回一个列表的长度值；
  • nth($list, $n)：返回一个列表中指定的某个标签值
  • join($list1, $list2,[$separator])：将两个列给连接在一起，变成一个列表；
  • append($list1, $val, [$separator])：将某个值放在列表的最后；
  • zip($lists…)：将几个列表结合成一个多维的列表；
  • index($list, $value)：返回一个值在列表中的位置值。
4. Introspection函数

Introspection 函数包括了几个判断型函数：

  1. type-of($value)：返回一个值的类型
  2. unit($number)：返回一个值的单位
  3. unitless($number)：判断一个值是否带有单位
  4. comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并
5. Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：
if($condition,$if-true,$if-false)

6. Map和Maps函数

Map类型：

1
2
3
4
5
6
$map:(
    key1: vaule1,
    key2: value2, 
    key3: value3
)

在sass中通常这样定义变量：

1
2
$default-color: #fff !default;
$primary-color: #22ae39 !default;

我们使用 map 可以更好的进行管理，便于值的增删：

1
2
3
4
$color: (
    default: #fff,
    primary: #22ae39
);

另外，Map也可以嵌套Map。
Maps函数：

  • map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
  • map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
  • map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
  • map-keys($map)：返回 map 中所有的 key。
  • map-values($map)：返回 map 中所有的 value。
  • map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
  • keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。
7. RGB()颜色函数
  • rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
  • rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
  • red($color)：从一个颜色中获取其中红色值；
  • green($color)：从一个颜色中获取其中绿色值；
  • blue($color)：从一个颜色中获取其中蓝色值；
  • mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
8. HSL函数
  • 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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。
9. Opacity函数
  • alpha($color) /opacity($color)：获取颜色透明度值；
  • rgba($color, $alpha)：改变颜色的透明度值；
  • opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
  • transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。
1
2
3
4
5
 alpha(red)
1
>> alpha(rgba(red,.8))
0.8

**sass初识请移步站内文章…如有不足之处，多多指教！