這里既然是對(duì)語(yǔ)法的介紹，那么至于如何安裝和編譯scss我就不多少了，主要是因?yàn)楸救嗽谌豪镎J(rèn)識(shí)的小伙伴有的不會(huì)用scss，所以就借著放假的機(jī)會(huì)來(lái)對(duì)scss語(yǔ)法做個(gè)總結(jié)，博主在開(kāi)發(fā)過(guò)程中用scss蠻多，所以對(duì)scss語(yǔ)法還是熟知的。

---

1.自定義變量

$color:pink; .test1{background-color:$color; }

通過(guò)編譯工具編譯出來(lái)后

.test1{background-color:pink; }

注：時(shí)間原因我在這里只寫(xiě)scss了，就不寫(xiě)編譯后的結(jié)果，一來(lái)方便大家自己去嘗試編譯，二來(lái)增加大家對(duì)scss的理解：編譯工具kaola很好的一個(gè)編譯工具，大家可以百度如何使用，再這里就不做過(guò)多介紹了。
***
2.插入一個(gè)變量

$right:right; .test2{border-#{$right}:1px solid #000; }

3.子元素書(shū)寫(xiě)

.text3{.text33{border:1px solid;} }

4.樣式的加減乘除

$paramer:3; .text4{height:(1px+3px);width: (96px/6);right: $paramer*4; }

5.繼承

.class5{border:1px solid red; } .class5E{@extend .class5;font-size:20px; }

6.代碼塊的復(fù)用

@mixin text6 {height:50px;left:20px; } .text6M{@include text6 } //這里的mixin就是定義一個(gè)可以復(fù)用的代碼段，當(dāng)然我們也可以給它傳遞一個(gè)參數(shù)，就像這樣一樣： @mixin text66($height){height:$heigth;left:20px; } .text6N{@include text66(100px); }

7.if語(yǔ)法，通過(guò)對(duì)if的判斷來(lái)決定使用那一套樣式

.text7{@if 1 +2 == 3 {border:1px solid ;}@if 5 < 3 {border:2px dsahed red;} } 當(dāng)然，我們都知道if一般是要和else配合的，所以我們也可以這樣寫(xiě) .test77{@if lightness($color) > 30%{background-color:#fff;}@else{background:#0ff;} } 這里的lightness是一個(gè)scss顏色函數(shù)，$color指向之前定義的值。

8.循環(huán)語(yǔ)法，包括最常見(jiàn)的三種循環(huán)方法，for,while,each

//for 循環(huán) @for $i from 1 to 5 {.item-#{$i} {border:#{$i}px solid;} } //while 循環(huán) $m:8; @while $m > 0 {.items-#{$m} {width:2em*$m;}$m:$m - 2 ; } //這里可以對(duì)$m進(jìn)行運(yùn)算 讓它每次都減去2 //each 語(yǔ)法 @each $img in q,w,e,r {.#{$img} {background-image:url('#{$img}.png')} }

9.函數(shù)語(yǔ)法

@function double ($number){@return $number*2; } .text9{font-size:double(20px); }

10.import導(dǎo)入語(yǔ)法

@import 'other.scss' 這樣就在你現(xiàn)在的scss中導(dǎo)入了other.scss編寫(xiě)的scss

scss語(yǔ)法并不是很多，但是需要開(kāi)發(fā)者靈活使用，這樣才能事半功倍，要深刻理解scss變量，以及如何插入變量，以及循環(huán)語(yǔ)法和函數(shù)思想，如果遇到不太清楚的可以給博主留言哈，歡迎指正和提出問(wèn)題。

總結(jié)

以上是生活随笔為你收集整理的scss的语法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。