【項(xiàng)目實(shí)戰(zhàn)】sass使用基礎(chǔ)篇（上）

Sass是一種CSS預(yù)處理語(yǔ)言。CSS預(yù)處理語(yǔ)言是一種新的專(zhuān)門(mén)的編程語(yǔ)言，編譯后形成正常的css文件，為css增加一些編程特性，無(wú)需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)，可讀性更佳，更易于代碼的維護(hù)等諸多好處。

CSS預(yù)處理語(yǔ)言有Scss(Sass) 和Less、Postcss。
Scss和Sass

sass一開(kāi)始用的是一種縮進(jìn)式的語(yǔ)法格式

采用這種格式文件的后綴名是.sass

在sass3.0版本后我們常用的是sassy css語(yǔ)法，擴(kuò)展名是.scss，更接近與css語(yǔ)法
區(qū)別：

    后綴名不同 .sass和.scss
    語(yǔ)法不同，請(qǐng)看下面

新版：

/*新版本
多行文本注釋*/

//新版本
//單行文本注釋

@import "base";

@mixin alert{
    color:red;
    background:blue;
}

.alert-warning{
    @include alert;
}

ul{
    font-size:15px;
    li{
        list-style:none;
    }
}



老版本：

/*新版本
多行文本注釋

//新版本
  單行文本注釋

@import "base"

=alert
    color:red
    background:blue


.alert-warning
    +alert


ul
    font-size:15px
    li
        list-style:none



變量
變量的意義

在sass里我們可以定義多個(gè)變量來(lái)存放顏色、邊框等等的樣式，這樣就可以在下面想要使用樣式的時(shí)候使用變量了

這樣的優(yōu)點(diǎn)就是便于維護(hù)，更改方便
變量的使用

可以通過(guò)$來(lái)定義變量，在變量名字中可以使用-和_來(lái)作為連接，并且-和_是可以互通的，就是用起來(lái)一模一樣。

變量的值可以是字符串、數(shù)字、顏色等等，在變量里還可以使用其他變量，使用的時(shí)候直接寫(xiě)變量名就好了

例如

$primary-color:#ff6600;
$primary-border:1px solid $primary_color;

div.box{
    background:$primary-color;
}

h1.page-header{
    border:$primary-border;
}



css寫(xiě)法—》

div.box {
  background: #ff6600;
}

h1.page-header {
  border: 1px solid #ff6600;
}



嵌套的使用

合理的使用嵌套語(yǔ)法，可以使我們編寫(xiě)代碼更為快捷

假設(shè)我們想寫(xiě)這樣的css：

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}



在sass里我們可以這樣寫(xiě)

.nav{
    height:100px;
    ul{
        margin:0;
        li {
            float:left;
            list-style:none;
            padding:5px;
        }
    }
}



大家會(huì)發(fā)現(xiàn)，寫(xiě)出來(lái)的代碼父和子之間都有空格隔開(kāi)，如果我們需要給a加上偽類(lèi)的話我們這樣寫(xiě)

.nav{
    height:100px;
    a{
        color:#fff;
        :hover{
            color:#ff6600;
        }
    }
}



在里面就會(huì)出現(xiàn)這樣的情況

.nav a :hover {
  color: #ff6600;
}



我們發(fā)現(xiàn)在a和:hover之間有了空格，這樣是不好的，所以我們需要在寫(xiě)的時(shí)候在：hover之前把a(bǔ)加上，這樣就需要用到在之類(lèi)里引用父類(lèi)選擇器的方式，我們可以用&符號(hào)代替父類(lèi)

例如：

.nav{
    height:100px;
    a{
        color:#fff;
        &:hover{
            color:#ff6600;
        }
    }
}








這樣就好了，下面來(lái)個(gè)完整的代碼：

.nav{
    height:100px;
    ul{
        margin:0;
        li{
            float:left;
            list-style:none;
            padding:5px;
        }
        a{
            display:block;
            color:#000;
            &:hover{
                color:#f60;
                background:red;
            }
        }
    }

    & &-text{
        font-size:15px;
    }
}



css寫(xiě)法-----》

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul a {
  display: block;
  color: #000;
}
.nav ul a:hover {
  color: #f60;
  background: red;
}
.nav .nav-text {
  font-size: 15px;
}



嵌套屬性

我們可以把一些復(fù)合屬性的子屬性來(lái)嵌套編寫(xiě)，加快編寫(xiě)速度，例如

body{
    font:{
        family:Helvitica;
        size:15px;
        weight:bold;
    }
}
.nav{
    border:1px solid red{
        left:none;
        right:none;
    }
}

.page-next{
    transition:{
        property:all;
        delay:2s;
    }
}



css寫(xiě)法-----》

body {
  font-family: Helvitica;
  font-size: 15px;
  font-weight: bold;
}

.nav {
  border: 1px solid red;
  border-left: none;
  border-right: none;
}

.page-next {
  transition-property: all;
  transition-delay: 2s;
}



mixin 混合

    你可以把它想象成一個(gè)有名字的定義好的樣式

每一個(gè)mixin都有自己的名字，類(lèi)似于js里的函數(shù)定義方法如下

@mixin 名字(參數(shù)1，參數(shù)2...){
    ...
}



使用方法是在其他選擇器css樣式里通過(guò)@include引入，其實(shí)就相當(dāng)于將mixin里的代碼寫(xiě)入到這個(gè)選擇器的css里，如下：

@mixin alert {
    color:#f60;
    background-color:#f60;
    a{
        color:pink;
    }
    &-a{
        color:red;
    }
}

.alert-warning{
    @include alert;
}



css寫(xiě)法-----》

.alert-warning {
  color: #f60;
  background-color: #f60;
}
.alert-warning a {
  color: pink;
}
.alert-warning-a {
  color: red;
}



剛才是沒(méi)有參數(shù)的mixin，mixin也可以擁有參數(shù)，需要注意的是：

    形參的名字前要加$
    傳參的時(shí)候只寫(xiě)值的話要按順序傳
    傳參的時(shí)候不想按順序的話需要加上形參名字

例如：

@mixin alert($color,$background) {
    color:$color;
    background-color:$background;
    a{
        color:darken($color,10%);//把顏色加深百分之十
    }
}

.alert-warning{
    @include alert(red,blue);
}

.alert-info{
    @include alert($background:red,$color:blue);
}



css寫(xiě)法------》

.alert-warning {
  color: red;
  background-color: blue;
}
.alert-warning a {
  color: #cc0000;
}

.alert-info {
  color: blue;
  background-color: red;
}
.alert-info a {
  color: #0000cc;
}



繼承拓展 extend

如果我們有一個(gè)選擇器想要擁有另一個(gè)選擇所有的東西，不管是樣式還是子元素等等，可以使用@extend來(lái)繼承

大家需要注意的是，++b繼承a的時(shí)候，a的子元素設(shè)置了樣式，也會(huì)給b的子元素設(shè)置樣式++，達(dá)到完全一樣的情況，例如：

.alert {
    padding:5px;
}

.alert a {
    font:{
        weight:bold;
        size:15px;
    }
}

.alert-info {
    @extend .alert;
    backgournd:skyblue;
}



css寫(xiě)法----》

.alert, .alert-info {
  padding: 5px;
}

.alert a, .alert-info a {
  font-weight: bold;
  font-size: 15px;
}

.alert-info {
  backgournd: skyblue;
}



partials

在以前咱們編寫(xiě)css的時(shí)候，一個(gè)css引入另一個(gè)css需要使用@import，其實(shí)這是不好的，會(huì)多發(fā)一次http請(qǐng)求，影響咱們站點(diǎn)的響應(yīng)速度。

在sass里，咱們可以把小的sass文件分出去，叫做partials，在某個(gè)sass里通過(guò)@import ‘partials名’去引入，注意路徑喲，這樣的話就可以把partials里的代碼引到咱們大的sass里一起編譯

    需要注意的是 partials的文件名前要加_

_base.scss :

body{
    margin:0;
    padding:0;
}



style.scss :

@import "base";

.alert {
    padding:5px;
}

.alert a {
    font:{
        weight:bold;
        size:15px;
    }
}

.alert-info {
    @extend .alert;
    backgournd:skyblue;
}



css寫(xiě)法----------->

body {
  margin: 0;
  padding: 0;
}

.alert, .alert-info {
  padding: 5px;
}

.alert a, .alert-info a {
  font-weight: bold;
  font-size: 15px;
}

.alert-info {
  backgournd: skyblue;
}



這樣的話我們就可以把模塊化的思想引入到sass里了
comment注釋

sass里的注釋有三種

    多行注釋
    單行注釋
    強(qiáng)制注釋

多行注釋?zhuān)簤嚎s后不會(huì)出現(xiàn)在css里 /* */

單行注釋: 不會(huì)出現(xiàn)在css里 //

強(qiáng)制注釋?zhuān)簤嚎s后也會(huì)出現(xiàn)在css里 /*! */


歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端