sass與scss的區(qū)別

sass嚴(yán)格按縮進(jìn)式，不帶打括號(hào)和分號(hào)，scss與css類似

Paste_Image.png

編譯

命令編譯
單個(gè)文件編譯
sass <要編譯的sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
多文件編譯
Sass sass/:css/
動(dòng)態(tài)編譯
Sass –watch <要變異的sass文件路徑>/style.scss:<要輸出CSS文件路徑>/style.css
GUI頁面工具編譯
koala/docegit
自動(dòng)化編譯
grunt/gulp
常見編譯錯(cuò)誤
在Sass的編譯的過程中，是不支持“GBK”編碼的。在項(xiàng)目中文件命名或者文件目錄命名不要使用中文字符

不同樣式風(fēng)格的輸出方法

嵌套Nested 展開expanded 緊湊compact 壓縮 compressed

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

變量

/*局部變量和全局變量*/
/*選擇器嵌套*/
nav {
    a {
        color: red;
        header & {
            color: green;
        }
    }
}
nav a {
    color: red;
}
header nav a {
    color: green;
}
/*屬性嵌套*/
.box {
    border: {
        top: 1px solid red;
        bottom: 1px solid green;
    }
}
.box{
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
/*偽類嵌套*/
.clearfix {
    &:before,
    &:after {
        content:"";
        display: table;
    }
}
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}

混合宏

/*定義*/
/*單個(gè)參數(shù)*/
@mixin border-radius($radius:3px) {
    -webkit-border-radius:$radius;
    border-radius: $radius;
}
button {
    /*調(diào)用*/
    @include border-radius(3px);
}
/*多個(gè)參數(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)
}

繼承

.btn {
    border: 1px solid #ccc;
}
.btn-primary {
    @extend .btn
}

占位符

%placeholder 聲明的代碼，如果不被 @extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼

 %mt5 {
    margin-top: 5px;
 }
.block{
    @extend %mt5;
}

插值

$properties:(margin,padding);
@mixin set-value ($side,$value){
    @each $prop in $properties {
        #{$prop}-#{$side}:$value;
    }
}
.login-box {
    @include set-value(top,14px);
}

字符串

注意引號(hào)

@mixin firefox-message($selector){
    body.firefox #{$selector}:brfore{
        content:"hi";
    }
}
@include firefox-message(".header");

運(yùn)算

（不同單位相加在編譯時(shí)還會(huì)報(bào)錯(cuò)）（注意運(yùn)算符號(hào)前后加空格）

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

/乘法（兩個(gè)值單位相同時(shí)，只需要為一個(gè)數(shù)值提供單位即可）/
/除法！/
/*
"/"符號(hào)被當(dāng)作除法運(yùn)算符時(shí)有以下幾種情況：

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