scss/less語法以及在vue專案中的使用
阿新 • • 發佈:2019-02-04
(文章是 博主根據自己所學以及經驗創作,如存在錯誤之處歡迎提出指正,不喜勿噴!)
- scss與less都是css的前處理器,首先我們的明白為什麼要用scss與less,因為css只是一種標記語言,其中並沒有函式變數之類的,所以當寫複雜的樣式時必然存在侷限性,不靈活,而scss與less正好為css提供這些,讓css可以像程式設計一樣靈活書寫樣式,而且scss與還提供了一些css相容性的處理,所以運用scss就不需要像寫css時隊友的語法需要做hack處理。SCSS 是 Sass 3 引入新的語法,其語法完全相容 CSS3,並且繼承了 Sass 的強大功能。也就是說,任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 檔案。
- 本文我們只對scss介紹,其實less都差不多,當你使用scss語法是要用.scss字尾,使用sass語法時用.sass字尾。
- 在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;
}
結語:scss的常用語法就到這裡了,希望能幫到大家,謝謝!