sass語法

基礎(chǔ)
  • 聲明變量
Paste_Image.png
  • 普通變量
$fontSize:12px;
  • 默認變量
$fontSize:12px; !default;

變量覆蓋：只需要在默認變量之前重新聲明下變量即可

$fontSize:14px;
$fontSize:12px; !default;
  • 變量的調(diào)用
$fontSize:14px;
.demotest{
  font-size:$fontSize;
}
  • 局部變量和全局變量
    全局變量就是定義在元素外面的變量
$color:orange !default; //定義全局變量
.block{
  color:$color; //調(diào)用全局變量；
}
.em{
    $color:red; //定義局部變量
    a{
      color:$color;//調(diào)用局部變量
    }
}
  • 嵌套
    1、選擇器嵌套
    比如實現(xiàn)下面的css
nav a {
  color:red;
}
header nav a {
  color:green;
}

在sass，就可以使用選擇器嵌套來實現(xiàn)

nav {
  a {
    color:red;
    header & {  //& 符是對當前選擇器的引用
      color:green;
    }
   }
}

2、屬性嵌套
比如實現(xiàn)下面的css

//css有一些屬性前綴相同，只是后綴不一樣
//比如: border、margin、padding、font等
.box{
    border-top:1px solid #eee;
    border-bottom:1px solid #ddd;
}

在sass，就可以使用使用屬性嵌套實現(xiàn)

.box{
    border:{
      top:1px solid #eee;
      bottom:1px solid #ddd;
    }
}

3、偽類嵌套
偽類嵌套和屬性嵌套非常類似，只不過偽類嵌套需要借助'&'符合配合使用
比如寫個大家都熟悉的clearfix

.clearfix {
    display: block;
    &:after{
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
}

編譯出來的css

.clearfix {
    display: block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
  • 混合宏-聲明混合宏
    需要重復(fù)使用大段樣式時，使用變量無法達到目的時就使用混合宏－使用@mixin來聲明一個混合宏。個人建議：如果你的代碼塊中涉及到變量，建議使用混合宏來創(chuàng)建相同的代碼塊。
    1、不帶參數(shù)混合宏
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

2、帶參數(shù)混合宏
a) 傳一個不帶值的參數(shù)

@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

b)傳一個帶值的參數(shù)

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

c)傳多個參數(shù)

@mixin center($width,$height){
     margin-top: -($height) / 2;
     margin-left: -($width) / 2;
}

3、復(fù)雜的混合宏

//帶有多個參數(shù)時，可以使用"..."來替代
@mixin box-shadow($shadow...){
    @if length($shadow) >= 1{
        @include prefixer(box-shadow,$shadow);
    }@else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow,$shadow);
    }
}
  • 混合宏-調(diào)用混合宏
    使用@include來調(diào)用聲明好的混合宏
//調(diào)用上面不帶參數(shù)的混合宏
.button{
    @include border-radius;
}
//調(diào)用傳一個不帶值的參數(shù)
.button{
    @include border-radius(4px);
}
  • 繼承
    通過關(guān)鍵詞 @extend來繼承已存在的類樣式塊，從而實現(xiàn)代碼的繼承。個人建議：如果你的代碼塊不需要專任何變量參數(shù)，而且有一個基類已在文件中存在，那么建議使用 Sass 的繼承。
.btn { 
    border: 1px solid #ccc; 
    padding: 6px 10px;
}
.btn-primary { 
    background-color: #f36;
    @extend .btn;
}

編譯出來后

.btn, .btn-primary{ 
    border: 1px solid #ccc; 
    padding: 6px 10px; 
}
.btn-primary { 
    background-color: #f36;
}
  • 占位符 %placeholder
    %placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會產(chǎn)生任何代碼
%mt5{
    margin-top:5px;
}
%pt5{
    padding-top:5px;
}

上面這段代碼沒有被@extend調(diào)用，不產(chǎn)生任何代碼塊

%mt5{
    margin-top:5px;
}
%pt5{
    padding-top:5px;
}
.btn { 
    @extend %mt5; 
    @extend %pt5;
}
.block { 
    @extend %mt5; 
    span { 
        @extend %pt5; 
    }
}

被@extend調(diào)用后，編譯出來的css(編譯出來的代碼會將相同的代碼合并在一起

.btn, .block {
  margin-top: 5px;
}
.btn, .block span {
  padding-top: 5px;
}
Paste_Image.png
  • 插值#{}
    插值--通常是指變量插值，或者變量替換，Sass是基于Ruby的，它使用 ${}進行表達式替換
$description:"awesome";
@warn "this is #{$description} "
//輸出 this is awesome

需要注意的是，變量中的$不能像PHP一樣丟掉。變量被#{}包裹了起來。另外值得一提的是：你可以插入任何類型的變量，不僅僅是字符串
什么時候應(yīng)該使用插值？
1、字符串－最常見的變量替換場景：打印字符串中變量的內(nèi)容
情景1

//假設(shè)你有一組叫$colors名的顏色映射（映射是指一個存儲了一系列 key/value 組合的變量），但你已經(jīng)受夠了一次又一次地敲 map-get($colors, ...)。所以，你寫了一個簡單的color()函數(shù)，使用key去獲得相應(yīng)的值
 $colors: ( 
    "primary": tomato, 
    "secondary": hotpink 
);
@function color($key) { 
    @return map-get($colors, $key); 
} 
.el { 
    background-color: color(primary); 
}

現(xiàn)在，當你敲錯名稱，或者去取一個不存在的key時，你想給出哪個key沒有找到錯誤的信息。
調(diào)用color(awesomeness)

@function color($key) {
      @if not map-has-key($colors,$key) {
         @warn "key '#{$key}' not found in $colors map.";
      }
      @return map-get($colors , $key);

在這個場景里，由于這個$colors變量沒有使用插值，它將打印以下信息：

Key awesomeness not found in $colors map.

2、css函數(shù)－css函數(shù)中的變量，如calc(),url()等
情景1:

  $sidebar-width: 250px;
 .main { 
    width: calc(100% - $sidebar-width);
 }
//你會驚訝地發(fā)現(xiàn)，根本不work。沒有報錯，容器的大小卻又不正確。如果你去審查你的dom元素，你會看到這個 — 被劃掉了。因為，這是不合法的
//因為calc()是一個CSS函數(shù)，不是一個Sass函數(shù)。這就是說Sass會將整個表達式解釋成一個字符串
$type-of-expression: type-of(calc(100% - $sidebar-width)); // string
.main{
    width:calc(100% - #{$sidebar-width});
}
//$sidebar-width被認為是一個常規(guī)字符串，所以打出來就是它自己,當我們用插值這樣做時，Sass編譯這個樣式文件時，它會用#{$sidebar-width}的值，即
.main {
     width: calc(100% - 250px); 
}

情景2

@for $i from 1 through $max {
    .el:nth-of-type(#{$i}) { 
        ...
     }
}
//for循環(huán)和:nth-*()選擇器一起使用。再一次說明，你需要使用插值變量，才能最終得到想得到的結(jié)果

Sass會把CSS函數(shù)認為是字符串，所以想要在最后獲得它們的值，要求你轉(zhuǎn)義所有同它們一起使用的變量
3、css指令－如 @support , @page , @media

//如果你的變量在@media字符串后面，需要使用插值才可以
$value : screen;
@media #{$value} {
    ...
}

//如果@media后面緊跟()，你就不再需要插值變量里，因為sass會求出所有在這些括號里的值
$value: 1336px; 
@media (max-width: $value) { 
    ... 
}

4、選擇器－使用變量作為一個選擇器，或者選擇器的一部分

$value : cunstom;
selector-#{$value} {
    property : value;
｝

借鑒文章：
https://webdesign.tutsplus.com/tutorials/all-you-ever-need-to-know-about-sass-interpolation--cms-21375

  • 數(shù)據(jù)類型
    1、數(shù)字：如，12、12px
    2、字符串：如，jill、"jill"
    3、顏色：如，blue、#ddd、rgba(0,0,0,.3)
    4、布爾值
    5、空值
    6、值列表：如，1.5rem 1rem 0 、1.5rem,1rem,0

  • 數(shù)學運算－單位最好一致（函數(shù)中有不同單位，將會報錯）
    1、加法

.box{
    width : 20rem + 1rem;
}

2、減法

$full-width: 960px;
$sidebar-width: 200px;
.content { 
    width: $full-width - $sidebar-width;
}

3、乘法
注意：兩個值單位相同時，只需要為一個數(shù)值提供單位即可，單位不一致，也會報錯哦

.box { width:10px * 2px; } //20px*px isn't a valid CSS value.
.box { width: 20px * 2em;}//40em*px isn't a valid CSS value.
.box { width: 10px * 2;}//ok

4、除法
”/ ”符號被當作除法運算符時有以下幾種情況：
a 如果數(shù)值或它的任意部分是存儲在一個變量中或是函數(shù)的返回值。
b 如果數(shù)值被圓括號包圍。
c 如果數(shù)值是另一個數(shù)學表達式的一部分。

p { 
    font: 10px/8px; // 純 CSS，不是除法運算 
    $width: 1000px;width: $width/2; // 使用了變量，是除法運算
    width: round(1.5)/2; // 使用了函數(shù)，是除法運算 
    width:(1000 / 100px);//? 
    height: (500px/2); // 使用了圓括號，是除法運算 
    margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
    width: (1000px / 100px); //如果兩個值帶有相同的單位值時，除法運算之后會得到一個不帶單位的數(shù)值   
}
  • 字符運算
    1、通過加法符號“+”來對字符串進行連接
$content: "Hello" + "" + "Sass!";
.box:before {
     content: " #{$content} ";
}
//編譯后
.box:before {
    content: " Hello Sass! ";
}

2、通過 +，把字符連接在一起

div {
    cursor: e + -resize;
}
//編譯后
div {
    cursor: e-resize;
}
控制命令
  • @if
//控制一個元素隱藏或顯示
@mixin blockOrHidden($boolean:true) {
    @if $boolean {
       @debug "$boolean is #{$boolean}";
       display:block;
    }
    @else {
       @debug "$boolean is #{$boolean}";
       display:none;
    }
//編譯后
.block {
    display: block;
}
.hidden {
    display: none;
}
  • for循環(huán)
    在sass的@for有兩種方式
//$i 表示變量,start 表示起始值,end 表示結(jié)束值
@for $i from <start> through <end>//關(guān)鍵字 through 表示包括 end 這個數(shù)
@for $i from <start> to <end>     //而 to 則不包括 end 這個數(shù)

$grid-prefix : span !default;
$grid-width : 60px !default;
$grid-gutter: 20px !default;
%grid {
    float: left;
    margin-left: $grid-gutter / 2;
    margin-right: $grid-gutter / 2;
}
//方式1
@for $i from 1 through 12{
    .#{$grid-prefix}#{$i} {
        width : $grid-width * $i + $grid-gutter * ($i - 1);
        @extend %grid;
    }
}
//編譯后
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}
  • @while循環(huán)
$types : 4;
$type-width : 20px;
@while $types > 0 {
    .while-#{$types} {
        width : $type-width + $types;
    }
    $types : $types - 1;
}
//編譯后
.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}
  • @each循環(huán)
    @each循環(huán)就是去遍歷一個列表，然后從列表中取出對應(yīng)的值
@each $var in <list>

$list: adam john wynn mason kuroir;//$list 就是一個列表
@mixin author-images { 
    @each $author in $list { 
        .photo-#{$author} { 
            background: url("/images/avatars/#{$author}.png") no-repeat; 
        } 
     }
}
.author-bio { @include author-images;}
//編譯后
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
函數(shù)功能
字符串函數(shù)
  • unquote($string) : 刪除字符串中的引號
.test4 {
    content: unquote("'Hello Sass!'");
}
//編譯后
.test4 {  content: 'Hello Sass!'; }
//從測試的效果中可以看出，unquote( ) 函數(shù)只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號。如果字符沒有帶引號，返回的將是字符串本身

  • quote($string) : 給字符串添加引號
    如果字符串，自身帶有引號會統(tǒng)一換成雙引號 ""

  • To-upper-case()、To-lower-case()

//To-upper-case() 函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母
.text{
    test : to-upper-case(aAa);
}
//編譯后
.text{
    test : AAA
}
//To-lower-case() 函數(shù) 與 To-upper-case() 剛好相反，將字符串轉(zhuǎn)換成小寫字母
數(shù)字函數(shù)
  • percentage($value) ： 將一個不帶單位的數(shù)轉(zhuǎn)換成百分比值
.footer{
    width : precentage(20px / 200px);
}
  • round() ： 將一個數(shù)四舍五入為一個最接近的整數(shù)
.footer {
   width:round(12.3px)
}
  • ceil()：將一個數(shù)轉(zhuǎn)換成最接近于自己的整數(shù)，會將一個大于自身的任何小數(shù)轉(zhuǎn)換成大于本身 1 的整數(shù)。也就是只做入，不做舍的計算
.footer {
     width:ceil(12.3px);
}
//編譯后
.footer {
     width: 13px;
}
  • floor()：剛好與 ceil() 函數(shù)功能相反，其主要將一個數(shù)去除其小數(shù)部分，并且不做任何的進位。也就是只做舍，不做入的計算
.footer {
     width:floor(12.3px);
}
//編譯后
.footer {
     width: 12px;
}

  • abs() ： 返回一個數(shù)的絕對值

  • min()、max()：在多個數(shù)之中找到最小的一個，這個函數(shù)可以設(shè)置任意多個參數(shù)

  • random() ：用來獲取一個隨機數(shù)

列表函數(shù)
  • length($list)：返回一個列表的長度值
$list:(1,2px) ;
length(10px 20px (border 1px solid) 2em) //4
length($list) //2
  • nth($list, $n)：返回一個列表中指定的某個標簽值
    $n 必須是大于 0 的整數(shù),且1 是指列表中的第一個標簽值，2 是指列給中的第二個標簽值，以此類推
nth(10px 20px 30px,1) //10px
nth((1px solid #eee) border left,1) //1px solid #eee
nth((1px solid #eee),border,left,1) //?
nth((Helvetica,Arial,sans-serif),2) //Arial
  • join($list1, $list2, [$separator])：將兩個列給連接在一起，變成一個列表
//join() 只能將兩個列表連接成一個列表，如果直接連接兩個以上的列表將會報錯
//但很多時候不只碰到兩個列表連接成一個列表，這個時候就需要將多個 join() 函數(shù)合并在一起使用
join((blue red), join((#abc #def),(#dee #eff)))

結(jié)合以上，來個演示

$list1:jill,mage,leng;
$list2:2,33;
$joins: join($list1,$list2,space); //join() 函數(shù)中 $separator 除了默認值 auto 之外，還有 comma 和 space 兩個值，其中 comma 值指定列表中的列表項值之間使用逗號（,）分隔，space 值指定列表中的列表項值之間使用空格（ ）分隔。
$nthList:$joins;
.test-join {  
    content:length($joins);
}
@for $i from 1 through (length($nthList)) {  
    .test-#{$i}{
      color: nth($nthList,$i); 
    }
}
//編譯后
.test-join {  content: 5; }
.test-1 {  color: jill; }
.test-2 {  color: mage; }
.test-3 {  color: leng; }
.test-4 {  color: 2; }
.test-5 {  color: 33; }
  • append($list1, $val, [$separator])：將某個值放在列表的最后
  • zip($lists…)：將幾個列表結(jié)合成一個多維的列表
    注意：
    1、在使用zip()函數(shù)時，每個單一的列表個數(shù)值必須是相同的
    2、每行每行的存，每列每列的取
$zips:zip(1px 2px 3px,solid dashed dotted,green blue red);//1px solid green, 2px dashed blue, 3px dotted red
.test-zip { content:length($zips);} //3
@for $i from 1 to (length($zips)+1){
    .test-#{$i} {
        border: nth($zips,$i);
    }
}
//編譯后
.test-zip {  content: 3; }
.test-1 {  border: 1px solid green; }
.test-2 {  border: 2px dashed blue; }
.test-3 {  border: 3px dotted red; }
  • index($list, $value)：返回一個值在列表中的位置值
index(1px solid red, 1px) //1 ->在 Sass 中，第一個值就是1，第二個值就是 2
index(1px solid red,dotted) //false -> 列表中沒有找到 dotted
false
  • Introspection函數(shù)
    Introspection 函數(shù)包括了幾個判斷型函數(shù)－這幾個函數(shù)主要用來對值做一個判斷的作用：
    1、type-of($value)：返回一個值的類型
.testIntrospection{
    content:type-of(1 / 2 = 2);
}
//編譯后
.testIntrospection {  content: string; }

2、unit($number)：返回一個值的單位
3、unitless($number)：判斷一個值是否帶有單位

unitless(100) //true ->如果不帶單位返回的值為 true
unitless(100px) //false ->帶單位返回的值為 false

4、comparable($number-1, $number-2)：判斷兩個值是否可以做加、減和合并

comparable(2rem,1em)//false ->不可以返回的值是 false
comparable(2px,1cm)//true ->可以返回的值為 true
  • Miscellaneous函數(shù)
    在這里把 Miscellaneous 函數(shù)稱為三元條件函數(shù)，主要因為他和 JavaScript 中的三元判斷非常的相似。他有兩個值，當條件成立返回一種值，當條件不成立時返回另一種值
if($condition,$if-true,$if-false)
  • map －管理變量
//用個 $ 加上命名空間來聲明 map。后面緊接是一個小括號 ()，將數(shù)據(jù)以 key:value 的形式賦予，其中 key 和 value 是成對出現(xiàn)，并且每對之間使用逗號 (,) 分隔，其中最后一組后面沒有逗號
$map:(
    $key1:value1,
    $key2:value2,
    $key3:value3
}

使用 map 可以很容易收集鍵的值和動態(tài)插入，比如換皮膚的項目

//map 嵌套 map。其實就是 map 的某一個 key 當成 map，里面可以繼續(xù)放一對或者多對 key:value
$theme-color:(
    defalt:(
      bgcolor:#fff;
      text-color:#444;
      link-color:#ddd;
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    )

在 Sass 中 map 自身帶了七個函數(shù)
1、map-get($map,$key)：根據(jù)給定的key值，返回map中相關(guān)的值

//$map：定義好的map；$key：需要遍歷的key；如果$key不存在$map中，將返回null值
$social-colors:(
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
//假設(shè)需要獲取facebook鍵值對應(yīng)的值
.btn-dribble{
    color:map-get($social-colors,facebook);
    background-color: map-get($social-colors,weibo);//如果 $key 不在 $map 中，不會編譯出 CSS，其實在 Sass 中，map-get($social- colors,weibo) 返回了一個 null 值
}
//編譯后
.btn-dribble {
    color: #3b5998;
}

2、map-merge($map1,$map2)：將兩個map合并成一個新的map
3、map-remove($map,$key)：從map中刪除一個key，返回一個新的map

$map:map-remove($social-colors,dribble);
//編譯后
$map:(
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);

4、map-keys($map)：返回map中所有的key

@each $name in map-keys($social-colors) {
    .btn-#{$name} {
        color : colors($name);
    }
}

5、map-values($map)：返回map中所有的value
6、map-has-key($map,$key)：根據(jù)給定的key值判斷map是否有對應(yīng)的value值，如果有返回true，否則返回false

//自定義一個函數(shù)
@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "no color found for '#{$color}' in $social-colors map";
    }
    @return map-get($social-colors,$color);
}
//調(diào)用函數(shù)
.btn-dribble { color: colors(dribble);}
.btn-facebook { color: colors(facebook);}
.btn-github { color: colors(github);}

7、keywords($args)：返回一個函數(shù)的參數(shù)，這個參數(shù)可以動態(tài)的設(shè)置key和value

//其中 $args 變成 key(會自動去掉$符號)，而 $args 對應(yīng)的值就是value
@mixin map($args...){
    @debug keywords($args);
}
@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);
顏色函數(shù)

  • RGB()顏色函數(shù)
    1、rgb($red,$green,$blue)：根據(jù)紅、綠、藍三個值創(chuàng)建一個顏色；
    2、rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍和透明度值創(chuàng)建一個顏色；
    3、red($color)：從一個顏色中獲取其中紅色值；
    4、green($color)：從一個顏色中獲取其中綠色值；
    5、blue($color)：從一個顏色中獲取其中藍色值；
    6、mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起

  • HSL函數(shù)
    1、hsl($hue,$saturation,$lightness)：
    通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色；
    2、hsla($hue,$saturation,$lightness,$alpha)：
    通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色；
    3、hue($color)：
    從一個顏色中獲取色相（hue）值；
    4、saturation($color)：
    從一個顏色中獲取飽和度（saturation）值；
    5、lightness($color)：
    從一個顏色中獲取亮度（lightness）值；
    6、adjust-hue($color,$degrees)：
    通過改變一個顏色的色相值，創(chuàng)建一個新的顏色；
    7、lighten($color,$amount)：
    通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個新的顏色；
    8、darken($color,$amount)：
    通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個新的顏色；
    9、saturate($color,$amount)：
    通過改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個新的顏色
    10、desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個新的顏色；
    11、grayscale($color)：將一個顏色變成灰色，相當于desaturate($color,100%);
    12、complement($color)：
    返回一個補充色，相當于adjust-hue($color,180deg);
    13、invert($color)：
    反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。

  • Opacity函數(shù)
    1、alpha($color) /opacity($color)：獲取顏色透明度值；
    2、rgba($color, $alpha)：改變顏色的透明度值；
    3、opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明；
    4、transparentize($color, $amount) / fade-out($color, $amount)**：使顏色更加透明。

@規(guī)則
  • @import
    @import 根據(jù)文件名引入。 默認情況下，它會尋找 Sass 文件并直接引入， 但是，在少數(shù)幾種情況下，它會被編譯成 CSS 的 @import 規(guī)則：
    1、文件的擴展名是 .css。
    2、文件名以 http:// 開頭。
    3、文件名是 url()。
    4、@import 包含了任何媒體查詢（media queries）
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
//編譯后
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

//如果你有一個 SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個 CSS 文件， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯
//例如，你有一個文件叫做 _colors.scss。 這樣就不會生成 _colors.css 文件了， 而且你還可以這樣引入 _colors.scss 文件
@import "colors";//不用加下劃線
//注意：在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。 例如， _colors.scss 不能與 colors.scss 并存

嵌套@import

//example.scss文件
.example{ color:red};
//引用
#main{@import "example";}
//編譯后
#main .example{color:red}
  • @media
    1、嵌套在css規(guī)則中，有點類似js的冒泡功能
.sidebar{
    width:300px;
    @media screen and (orientation: landscape) {
        width: 500px;
  }
}
//編譯后
.sidebar {width: 300px; }
 @media screen and (orientation: landscape) {
    .sidebar {
        width: 500px; 
    }
 }

2、@media 嵌套 @media(還可以使用插值哦）

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media #{$media} {
    .sidebar {
        @media (#{$feature}: #{$value}) {
           width: 500px;
        }
     }
}
//編譯后
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .sidebar {width: 500px; } 
}
  • @extend
    Sass 中的 @extend 是用來擴展選擇器或占位符
//@extend 是用來擴展選擇器
.hoverlink { 
    @extend a:hover;
}
a:hover { text-decoration: underline;}
//編譯后
a:hover, .hoverlink {text-decoration: underline; }
//使用 @extend 來繼承多個選擇器或占位符的樣式
.error {
    border: 1px #f00;
    background-color: #fdd;
}
.attention {
    font-size: 3em;
    background-color: #ff0;
}
.seriousError {
    @extend .error;
    @extend .attention;
    border-width: 3px;
}
  • @at-root
    @at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root
.a { color: red; 
    .b { color: orange; 
        .c { color: yellow; 
            @at-root .d { color: green; }
         } 
     }
 }
//編譯后
.a { color: red;}
.a .b { color: orange;}
.a .b .c { color: yellow;}
.d { color: green;} //跳出來了
  • @debug
    @debug 在 Sass 中是用來調(diào)試的，當你的在 Sass 的源碼中使用了 @debug 指令之后，Sass 代碼在編譯出錯時，在命令終端會輸出你設(shè)置的提示 Bug
  • @warm
    @warn 和 @debug 功能類似，用來幫助我們更好的調(diào)試 Sass。
  • @error
@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要將#{$x}值設(shè)置在10以內(nèi)的數(shù)";
  }
}
.test {
  @include error(15);
}
//編譯后
你需要將15值設(shè)置在10以內(nèi)的數(shù) on line 7 at column 5
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • -------------------------一、控制指令--------------------------...
    夜幕小草閱讀 3,174評論 0贊 5
  • 寫在前面的話 本文所有語法格式是基于SCSS格式的 scss 和 sass語法的相互轉(zhuǎn)換 編譯 命令行編譯 GUI...
    xoyoz閱讀 10,001評論 2贊 13
  • 本文簡單的介紹SASS預(yù)處理語言，更多的應(yīng)用請參考官方文檔 一、什么是SASS 二、為什么使用SASS 三、安裝S...
    CharlesDarwin閱讀 465評論 0贊 0
  • 1. @if 編譯出來的css： 2.@for $i 表示變量 使用through的例子： 編譯出來的css： 使...
    恰皮閱讀 3,634評論 0贊 9
  • 變量的操作分為兩種：一、直接操作變量（即變量表達式）；二、通過函數(shù)。 函數(shù)又分為兩種：一、跟代碼塊無關(guān)的函數(shù)，多是...
    劉尐六閱讀 418評論 2贊 2