Sass进阶之路,之二(进阶篇)

Sass之二(进阶篇)

1. 数据类型

1.1 Number

• 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型
• Number类型详情请点击这里,下面是小例子

1.$n1: 1.2;
2.$n2: 12;
3.$n3: 14px;
4.$n4: 1em;

1.2 String

• 不加双引号的,加双引号的,加单引号的全部都属于String类型
• String类型详细内容请点击这里, 下面是小demo

1.$s1: container;
2.$s2: 'container';
3.$s3: "container";

1.3 List

• List类型的取值,语法nth(list, index),第一个参数表示要取谁的,也就是list类型的变量的名称,第二个表示索引,这里的索引和JavaScript略有不同,JavaScript索引基本上都是从零开始,而这里是从一开始的.
• List类型的方法的详情请点击这里, 下面是小demo

1.$padding: 1px 5px 10px 15px;
2..container {
3.    padding: nth($padding,2) nth($padding,4);
4.}
5.
6.// out css
7..container { padding: 5px 15px; }

1.4 Map

• Map类型取值,语法map-get(map, key),第一个参数表示要取谁的,也就是map类型的变量的名称,第二个参数表示要取的key
• Map类型的方法的详情请点击这里, 下面是小demo

1.$map: (color: red,background-color: #f00);
2.
3.body {
4.    color: map-get($map, color);
5.}
6.
7.// out css
8.body { color: red; }

1.5 Color

1./*! 颜色类型*/
2.$c1: blue;
3.$c2: #fff;
4.$c3: rgba(255,255,0,0.5);
5.body {
6.    color: $c3;
7.}
8.
9.// out css
10.body { color: rgba(255, 255, 0, 0.5); }

1.6 Boolean

• 布尔类型分为两种true和false
• $bt: true;
• $bf: false;

1.7 Null

• null的应用场景如下

1.$null: null;
2.body {
3.    @if $null == null{
4.        color: red;
5.    }
6.}
7.
8.// out css
9.body { color: red; }

2. 变量的操作

2.1 ==, !=

• 支持所有的类型

2.2 <,>,<=,>=

• 只支持Number类型

2.3 +,-,*,/,%

• 进行计算的时候最好用空格进行隔开,例如减号如果不隔开,会把两个变量当成一个变量来处理.
• 下面是一些小例子

1.// scss 
2.$width1: 100px;
3.$width2: 125px;
4.span {
5.    width: $width1 + $width2;
6.}
7.
8.a:hover {
9.    cursor: e + -resize;
10.}
11.a::before {
12.    content: A + 'bc';
13.}
14.a::before {
15.    content: "A" + bc;
16.}
17.p {
18.    padding: 3px + 4px auto;
19.}
20.$version: 3;
21.p::before {
22.    content: "hello,Sass #{$version}"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */
23.}
24.
25.p {
26.    font: (20px/10px);
27.    width: $width2 / 2;
28.    width: round($width2 / 2);
29.    height: (100px / 2); /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/
30.}
31.
32.// out css
33.span { width: 225px; }
34.a:hover { cursor: e-resize; }
35.a::before { content: Abc; }
36.a::before { content: "Abc"; }
37.p { padding: 7px auto; }
38.p::before { content: "hello,Sass 3"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */ }
39.p { font: 2; width: 62.5px; width: 63px; height: 50px; /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/ }
40.
41.

3.Mixin

3.1简单实例

• 学过JavaScript的都对方法耳熟能详,那么Scss中的mixin就类似于JavaScript中的方法

1.// 没有参数的mixin
2.@mixin test1 {
3.    color: red;
4.}
5.
6.body {
7.    @include test1;
8.}
9.
10.// 一个参数
11.@mixin test2($color: red) {
12.    color: $color;
13.}
14.body {
15.    @include test2(#fff);
16.}
17.
18.// 多个参数
19.@mixin test3($color: red, $fontSize: 12px) {
20.    color: $color;
21.    font-size: $fontSize;
22.}
23.
24.body {
25.    // 直接传值, 不可以打乱顺序
26.    // @include test(blue, 18px);
27.
28.    // 通过键值对的方式,可以打乱传值的顺序
29.    @include test3($fontSize: 18px, $color: blue);
30.}
31.
32.// out css
33./* line 6, test1 */
34.body { color: red; }
35.
36./* line 14, test2*/
37.body { color: #fff; }
38.
39./* line 24, test3*/
40.body { color: blue; font-size: 18px; }

3.2 传递多值参数

• 传递多值参数的时候,需要在参数后面加上三个点...表示这个参数可能含有多条属性,告诉sass不要区分逗号了,把传递的参数当做一个参数来解析.

1.// scss
2.// 多值传递
3.@mixin test4($shadow...) {
4.    text-shadow: $shadow;
5.    -webkit-text-shadow: $shadow;
6.    -moz-text-shadow: $shadow;
7.}
8..text {
9.    @include test4(1px 1px 10px red, 0 0 5px blue);
10.}
11.
12.// out css
13..text { text-shadow: 1px 1px 10px red, 0 0 5px blue; -webkit-text-shadow: 1px 1px 10px red, 0 0 5px blue; -moz-text-shadow: 1px 1px 10px red, 0 0 5px blue; }

3.3 传递内容

• 传递内容就好比在方法中弄了个占位符, 当你调用的时候,所写的内容会直接放在占位符那里;

1.// scss
2.@mixin style-for-iphone {
3.    @media only screen and (min-320px) and (max-568px){
4.       @content;
5.    }
6.}
7.@include style-for-iphone {
8.    height: 100px;
9.    font-size: 12px;
10.}
11.
12.// out  css
13.@media only screen and (min- 320px) and (max- 568px) { height: 100px; font-size: 12px; }

4. 函数

4.1 内置函数

• 内置函数是系统给我们定义好了的一些函数,详情请点击这里

4.2 自定义函数

• 提到函数我们不有自主的想到JavaScript中的函数,Sass需要在function和return前面加一个@符号,例如:

1.// scss
2.@function double($width){
3.    @return $width * 2;
4.}
5.
6.body {
7.    $color: rgba(255,0,0, .3);
8.    color: $color;
9.    width: 100%;
10.    height: 100%;
11.    p {
12.        // 内置函数
13.        color: darken($color, 0.5); // 加深
14.        background-color: lighten($color, 0.9);// 变浅
15.        z-index: str-length('aaaa'); // 字符串的长度
16.        z-index: str-index('aaabddd','b');// 指定字符的索引的位置
17.        width: double(5px);
18.    }
19.}
20.
21.// out css
22.body { color: rgba(255, 0, 0, 0.3); width: 100%; height: 100%; }
23.body p { color: rgba(252, 0, 0, 0.3); background-color: rgba(255, 5, 5, 0.3); z-index: 4; z-index: 4; width: 10px; }

5. 编译输出

5.1 debug

• @debug "这里的内容会在控制台输出"

5.2 warn

• @warn "这里的内容会在控制台输出"

5.3 error

6. 条件语句及循环语句

6.1 条件语句

• if的几种用法,如下

1.// scss
2./*!if 的用法*/
3.$width: 800;
4.body {
5.    // 跟三目运算符类似
6.    color: if($width > 800, blue, red);
7.}
8.@if $width > 800 {
9.    body {
10.        color: red;
11.    }
12.} 
13.@else if $width == 800 {
14.    p {
15.        color: blue;
16.    }
17.}
18.@else {
19.    body{ 
20.        color: blue;
21.    }
22.}
23.
24./// out css
25.body { color: red; }
26.p { color: blue; }

6.2 循环语句

• 语法1for $i from 1 to 10
  
  • 此语句表示从1 到10,但是不包括10
• 语法2for $i from 1 through 10
  
  • 此语句表示从1到10,包括10
• 下面代码是 through的用法,to的用法在这里就不演示了

1.// scss
2.@for $i from 1 through 5 {
3.    .span#{$i} {
4.        width: 20% * $i; 
5.    }
6.}
7.
8.// out css
9..span1 { width: 20%; }
10..span2 { width: 40%; }
11..span3 { width: 60%; }
12..span4 { width: 80%; }
13..span5 { width: 100%; }

6.3 while

• 使用while 需要注意一下几点,
  
  • 第一: 变量要提前声明
  • 第二: while里面可以设置步长

1.// scss
2.$j: 6;
3.@while $j > 0 {
4.    .p#{$j} {
5.        width: 20% * $j;
6.    }
7.    $j: $j - 3;
8.}
9.
10.// out css
11..p6 { width: 120%; }
12..p3 { width: 60%; }

7. each

7.1 常规遍历

1.// each 普通的用法
2.$k: 1;
3.$color: red, green, blue;
4.@each $c in $color {
5.    .div#{$k} {
6.        color: $c;
7.    }
8.    $k: $k + 1;
9.}
10.
11.// out css
12.
13..div1 { color: red; }
14..div2 { color: green; }
15..div3 { color: blue; }
16.

7.2 遍历list

• 这里出现的方式是以一个键一个值的形式出现的,如果是但数据的变量,那么可以在外边顶一个索引,内部执行加1 操作,也可以得到相应的效果.
• $key表示键值,$color表示值

1.@each $key, $color in (default, green), (dange,blue), (error, red) {
2.    .aler-#{$key} {
3.        color: $color;
4.    }
5.}
6.
7.// out css
8..aler-default { color: green; }
9..aler-dange { color: blue; }
10..aler-error { color: red; }

7.3 遍历map

• 遍历map $key表示键值, $val表示值

1.//scss
2.@each $key, $val in (default: green, dange: blue, error: red) {
3.    .alert-#{key} {
4.        color: $val;
5.    }
6.}
7.
8.// out css
9..alert-key { color: green; }
10..alert-key { color: blue; }
11..alert-key { color: red; }
12.

8. 小实例

• 这里写了个小实例, 有兴趣的朋友可以看看,其实我也是抄的别人的实例,等会去写个小项目,orz我要睡觉了,明天写吧….好累的说,代码粘在下面了…

1.// scss
2.@function buildContainer($num: 5) {
3.    $map: (defaultValue: 0);
4.    $rate: percentage(1 / $num); // percentage 求出百分比
5.    @for $i from 1 through 5 {
6.        $tempMap: (col#{$i} : $rate * $i);
7.        $map: map-merge($map, $tempMap);
8.    }
9.    $map: map-remove($map, defaultValue);
10.
11.    @return $map;
12.
13.}
14.@mixin buildContainer($num: 5) {
15.    $map: buildContainer($num);
16.    @each $key, $val in $map {
17.        .#{$key} {
18.            width: $val;
19.        }
20.    }
21.}
22.
23.@include buildContainer();
24.
25.// out css
26..col1 { width: 20%; }
27..col2 { width: 40%; }
28..col3 { width: 60%; }
29..col4 { width: 80%; }
30..col5 { width: 100%; }