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 用來設定預設值 對預...