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-width:320px) and (max-width: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-width: 320px) and (max-width: 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 循環語句
- 語法1
for $i from 1 to 10
- 此語句表示從1 到10,但是不包括10
- 語法2
for $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%; }