亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

在Sass的編譯的過程中，是不是支持“GBK”編碼的。所以在創建 Sass 文件時，就需要將文件編碼設置為“utf-8”。

單文件編譯：

sass?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

多文件編譯：

sass?sass/:css/

開啟“watch”功能，這樣只要你的代碼進行任保修改，都能自動監測到代碼的變化，并且可以直接編譯出來：

sass?--watch?<要編譯的Sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css

@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); } }

混合宏VS繼承VS占位符

通過使用關鍵字@extend 來繼承已存在的類樣式塊

并且編譯出來的css會將選擇器合并在一起，形成組合選擇器

.btn {

? border: 1px solid #ccc;

? padding: 6px 10px;

? font-size: 14px;

}

.btn-primary {

? background-color: #f36;

? color: #fff;

? @extend .btn;

}

編譯后

.btn, .btn-primary {

????border: 1px solid #ccc;

????padding: 6px 10px;

????font-size: 14px;

}

.btn-primary{

????backgroud-color: #f36;

????color: #fff;

}

1. 傳一個不帶值的參數

   @mixin border-radius($radius){

   ? ? ? ? border-radius: $radius;

   ? ? ? ? -webkit-border-radius: $radius

   }

   .main{

   ? ? ? @include border-radius(3px)

   }

2. 傳一個帶值的參數

   這個值就是默認值，當不傳值的時候使用默認值，否則使用傳的值

   
   

   
   

   @mixin border-radius($radius: 3px){

   ? ? ? ?border-radius: $radius;

   ? ? ? ? -webkit-border-radius: $radius

   }

   .main{

   ? ? ? @include border-radius()

   ? ? ? ?/*@include border-radius(5px)*/

   }

3. 傳多個參數

   
   

   @mixin size($width, $height){

   ? width: $width;

   ? height: $height;

   }

   
   

   .box-center {

   ? @include size(500px,300px);

   }

   當參數過多時，可以使用“...”

   
   

@mixin?box-shadow($shadows...){
??@if?length($shadows)?>=?1?{
????-webkit-box-shadow:?$shadows;
????box-shadow:?$shadows;
??}?@else?{
????$shadows:?0?0?2px?rgba(#000,.25);
????-webkit-box-shadow:?$shadow;
????box-shadow:?$shadow;
??}
}

.box?{
??@include?box-shadow(0?0?1px?rgba(#000,.5),0?0?2px?rgba(#000,.2));
}

.box?{
??-webkit-box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
??box-shadow:?0?0?1px?rgba(0,?0,?0,?0.5),?0?0?2px?rgba(0,?0,?0,?0.2);
}

用@mixin? 來定義一個混合宏

用@include 來調用一個混合宏

@mixin border-radius{

? ? -webkit-border-radius: 3px;

? ? border-radius: 3px;

}

button {

? ? @include border-radius;

}

p:before?{
??content:?"Foo?"?+?Bar;
??font-family:?sans-?+?"serif";
}

編譯出來的 CSS：

p:before?{
??content:?"Foo?Bar";
??font-family:?sans-serif;?}

??? ?如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。
??? ?如果數值被圓括號包圍。
??? ?如果數值是另一個數學表達式的一部分。

混合：代碼不會合并，造成代碼冗余；

繼承：繼承的樣式會合并到一起，其他相同樣式不會；

占位：會合并所有相同的樣式，同時占位樣式不使用不會生成樣式代碼；

定義：%占位符 { 樣式體 }

使用：選擇器 { @extend %占位符; }

占位符優點，相同樣式自動合并。

[Sass]壓縮輸出方式 compressed

在編譯的時候帶上參數“?--style?compressed”:

sass?--watch?test.scss:test.css?--style?compressed

[Sass]緊湊輸出方式 compact

在編譯的時候帶上參數“?--style?compact”:

sass?--watch?test.scss:test.css?--style?compact

Sass 語法格式

$font-stack:?Helvetica,?sans-serif;
$primary-color:?#333;

body?{
??font:?100%?$font-stack;
??color:?$primary-color;
}

[Sass]展開輸出方式 expanded

在編譯的時候帶上參數“?--style expanded”:

sass?--watch?test.scss:test.css?--style?expanded