scss/less語法以及在vue項目中的使用(轉載)

1.scss與less都是css的預處理器，首先咱們的明白爲何要用scss與less，由於css只是一種標記語言，其中並無函數變量之類的，因此當寫複雜的樣式時必然存在侷限性，不靈活，而scss與less正好爲css提供這些，讓css能夠像編程同樣靈活書寫樣式，並且scss與還提供了一些css兼容性的處理，因此運用scss就不須要像寫css時隊友的語法須要作hack處理。SCSS 是 Sass 3 引入新的語法，其語法徹底兼容 CSS3，而且繼承了 Sass 的強大功能。也就是說，任何標準的 CSS3 樣式表都是具備相同語義的有效的 SCSS 文件。

2.本文咱們只對scss介紹，其實less都差很少，當你使用scss語法是要用.scss後綴，使用sass語法時用.sass後綴。
3.在vue項目中的使用：

•      安裝：在命令行中輸入：npm install node-sass sass-loader --save-dev
•      在樣式中聲明使用scss:<style lang=scss scoped><style>（到這裏就能夠愉快的使用scss語法了）
•      注：在webpack.config.js中不須要配置使用sass-loader，由於vue-loader會自動解析

4. scss經常使用語法簡介：

1.自定義變量以及子元素書寫：

<style lang=scss scoped>
/*scss的使用:*/
/*1.自定義變量*/
$color:pink; 
$width:200px;
$height:200px;
$right:right;
$num:2;
.test{
    background:$color;
    width:$width;
    height:$height;
    margin:30px auto;
    /*插入變量*/
    border-#{$right}:2px solid blue;
    /*子元素的書寫 選擇器嵌套*/
    p{
        color:orange;
        font-size: 30px;
    }
}

2.樣式的加減乘除以及繼承樣式：

.p{
    background:yellowgreen;
}
.test2{
    /*樣式的加減乘除，自定義變量再使用*/
    width:$num*100px;
    height:$num*50px;
    border:(1px+1px) solid orange;
    /*樣式的繼承*/
    @extend .p;
}

3.樣式的複用：

/*代碼的複用,至關於自定義一個函數，而且能夠 傳參*/
@mixin box($height){
    height:$height;
    width:200px;
    border:1px solid deeppink;
}
.test3{
    /*調用*/
    @include box(200px);
}

4.使用if語句：

/*使用if語句判斷使用哪套樣式，lightness是scss中的一個函數，用來判斷色彩度，$color爲傳入的自定義參數*/
.test4{
    @if lightness($color)<30%{
        width:50px;
        height:50px;
        background:cyan;
    }@else{
        width:50px;
        height:50px;
        background:yellow;
    }
}

5.scss的三種循環：for   while   each：

/*循環語法，包括最多見的三種循環方法，for,while,each,*/
/*其中循環包含開始不包含結束量,以下不包含5*/
@for $i from 1 to 5{
    .R#{$i}{
        width:$i*20px;
        height:$i*20px;
        /*注意:變量帶單位時不能寫成($i)px;應該寫:#{$i}px*/
        border:#{$i}px solid olive;
    }
}

6.scss中的函數：

/*函數使用*/
@function double ($num){
    @return $num*2
}
.test5{
    font-size: double(20px);
    color:gold;
}