sass的scss的語法

1.$s:"red"定義變數後面加!default就是預設值，有值掉值，沒值取預設，不論前後$a:"red"; $a:"blue" !default;

2.&：hover{}裡面呼叫指向父級

3.&+&相當於兄弟元素

4.@at-root跳出當前的整個巢狀

5.@media only screen and(max-width: 768px)**查詢跳不出去 需要借助@at-root(without:media)

6.#用來拼接

7.@if（）{}else{}可以使用條件語句

8.@extend繼承

9.@mixin定義混合器

10.@mixin flex-box($dir:row)

11.@content佔位符

//to是不包含10

@for $i from
1 to 10
px;}
}//through包含10
@for $j from
1 through 10
px;        color:
if($j %2==
0,red,blue)
;// @if($j % 2 == 0) @else
}}

遍歷陣列

$colorlist:red,

blue,
yellow,
green;
//怎麼遍歷陣列
}

$colortype:

(default
:#ffffff,
primary:#418bca,
success:#5bb85d,
info:#5bc0de,
warning:#f0ae4e,
danger:#d9544f);
@each $key,$value in $colortype 
.bg-#
}.text-primary
.abc

//scss 定義了很多函式，當然也可以自定義函式

.div1
@function
getcolor
($num)
@else
if $num >=
300    @else
if $num >=
200    @else
}.div2
text:
animation:;}
//@function定義函式  ，@return 函式的返回值

//其他功能彙總

$list1:red,
blue,
yellow,
green;
$list2:orange;
//nth-child()從1開始
.div1 
.div2 
$list3:
($list1, black)
;.div3 
;//while迴圈比for迴圈高階
$i:10
;@while $i >
0px;};
$i : $i -2;
}

SASS與SCSS的區別

sass是對css進行自動化的工具，有為css新增瀏覽器字首，精靈圖合圖及樣式優化等功能。sass有.sass 和 scss兩種語法。1 sass 是一種類ruby的縮排式語法，對空格敏感，不使用花括號，並且每個屬性之間通過換行來分割，如 h1 color 666 font size 20px 2 ...

sass和scss的區別

sass 是一款強化 css 的輔助工具，它在 css 語法的基礎上增加了變數 variables 巢狀 nested rules 混合 mixins 匯入 inline imports 等高階功能，這些拓展令 css 更加強大與優雅。使用 sass 以及 sass 的樣式庫 如 compass 有...

SCSS 的使用語法

注釋 注釋分為三種 css中顯示，css中不顯示，重要注釋 壓縮不會被刪掉。import 命令匯入外部sass scss css檔案 變數 宣告變數的語法是 變數名 變數值 如下 color red 宣告變數 color區分預設變數 預設變數只需要在變數值後加上 default 用來設定預設值 對預...