第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

單文件編譯：

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

多文件編譯：

sass?sass/:css/

開啟“watch”功能，這樣只要你的代碼進(jìn)行任保修改，都能自動(dòng)監(jiān)測(cè)到代碼的變化，并且可以直接編譯出來：

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占位符

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

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

.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. 傳一個(gè)不帶值的參數(shù)

   @mixin border-radius($radius){

   ? ? ? ? border-radius: $radius;

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

   }

   .main{

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

   }

2. 傳一個(gè)帶值的參數(shù)

   這個(gè)值就是默認(rèn)值，當(dāng)不傳值的時(shí)候使用默認(rèn)值，否則使用傳的值

   
   

   
   

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

   ? ? ? ?border-radius: $radius;

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

   }

   .main{

   ? ? ? @include border-radius()

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

   }

3. 傳多個(gè)參數(shù)

   
   

   @mixin size($width, $height){

   ? width: $width;

   ? height: $height;

   }

   
   

   .box-center {

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

   }

   當(dāng)參數(shù)過多時(shí)，可以使用“...”

   
   

@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? 來定義一個(gè)混合宏

用@include 來調(diào)用一個(gè)混合宏

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

??? ?如果數(shù)值或它的任意部分是存儲(chǔ)在一個(gè)變量中或是函數(shù)的返回值。
??? ?如果數(shù)值被圓括號(hào)包圍。
??? ?如果數(shù)值是另一個(gè)數(shù)學(xué)表達(dá)式的一部分。

混合：代碼不會(huì)合并，造成代碼冗余；

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

占位：會(huì)合并所有相同的樣式，同時(shí)占位樣式不使用不會(huì)生成樣式代碼；

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

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

占位符優(yōu)點(diǎn)，相同樣式自動(dòng)合并。

[Sass]壓縮輸出方式 compressed

在編譯的時(shí)候帶上參數(shù)“?--style?compressed”:

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

[Sass]緊湊輸出方式 compact

在編譯的時(shí)候帶上參數(shù)“?--style?compact”:

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

Sass 語(yǔ)法格式

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

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

[Sass]展開輸出方式 expanded

在編譯的時(shí)候帶上參數(shù)“?--style expanded”:

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