討厭現(xiàn)在的火影联喘，越來越感覺是在看龍珠
上一篇文章 剛剛介紹了less，趁熱打鐵载庭，趕快學(xué)習(xí)一下與之相似的sass吧看彼！
總體來講扇谣，基本類似吧~
基本用法
- 變量
解釋：sass支持css變量化。與less區(qū)別在于闲昭，less使用@+變量名聲明變量，而sass使用$+變量名聲明變量靡挥。
$new-color: red;
.h1{
color: $new-color;
}
如果需要使用變量鑲嵌序矩，需要使用 #{ }
$direction: right;
.h2{
border-#{$direction}:1px solid red;
}
- 計算
解釋：這個不用解釋，和less一樣跋破，可以對css進(jìn)行計算簸淀。
.h3{
color: #333+#456;
position: relative;
top: 10px * 3;
left: 30px / 2
}
- 嵌套
解釋： 一層套一層。（多一點通俗毒返，少一點套路）
div {
h1{
color: blue;
}
color : red;
}
- 屬性嵌套
div{
border: {
color: red;
}
}
- 嵌套中的偽類用法
解釋：在嵌套的代碼塊內(nèi)租幕，可以使用&引用父元素。
div{
&：hover{
border:1px solid red;
}
}
注釋
解釋：sass的注釋有區(qū)別對待拧簸，主要看你想不想在編譯后的css文件中保留注釋代碼劲绪。只保留在sass文件中而不出現(xiàn)在編譯好的css文件中：
// + 注釋代碼；需要出現(xiàn)在編譯好的css文件中：
/*! + 注釋代碼 + */
代碼復(fù)用
牛叉的來了盆赤，當(dāng)然下面這些不常用贾富，如果剛剛使用sass或者less，從這里開始可以忽略了牺六。當(dāng)然颤枪，這里并不難懂，有精力還是要學(xué)會的哈淑际。
- css繼承
解釋：使用@extend樣式A繼承了樣式B所有的css樣式畏纲。
sass:
.h2{
border-#{$direction}:1px solid red;
}
.h4{
@extend .h2;
margin: 10px;
}
css:
.h2, .h4 {
border-right: 1px solid red;
}
.h4 {
margin: 10px;
}
- Mixin
解釋：將css模塊化，形成類似代碼塊的css塊春缕。允許使用變量盗胀。@Mixin聲明css塊，@include調(diào)用css塊淡溯。
sass:
@mixin bigBox {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
div{
@include bigBox;
}
css:
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
牛叉的是读整，他居然可以接受參數(shù)！
sass:
@mixin bigBox($haha:100px) {
width: $haha;
height: $haha;
border: 1px solid #ccc;
}
div{
@include bigBox;
}
div{
@include bigBox(500px);
}
css:
div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
div {
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
- 插入
解釋： 類似css的import吧咱娶。
@import "path/filename.scss";
函數(shù)化加循環(huán)
我真的開始懷疑人生米间，這還是我認(rèn)識的css嗎？
- if判斷
sass:
$haha: 100px;
.h1{
@if $haha > 80px {
margin: $haha;
border: 1px solid red;
}
@if $haha <= 80px{
border: 1px solid blue;
}
}
css:
.h1 {
margin: 100px;
border: 1px solid red;
}
還有 @else的搭配使用膘侮。
sass:
$haha: 1px;
.h1{
@if $haha > 80px {
margin: $haha;
border: 1px solid red;
}@else {
color: red;
}
}
css:
.h1 {
color: red;
}
- for循環(huán)
sass:
@for $i from 20 to 25 {
.border-#{$i}{
border : #{$i}px solid red;
}
}
css:
.border-20 {
border: 20px solid red;
}
.border-21 {
border: 21px solid red;
}
.border-22 {
border: 22px solid red;
}
.border-23 {
border: 23px solid red;
}
.border-24 {
border: 24px solid red;
}
- while循環(huán)：
sass:
$i : 5;
@while $i > 0 {
.item-#{$i}{
width: #{i}px;
}
$i : $i - 1;
}
css:
.item-5 {
width: ipx;
}
.item-4 {
width: ipx;
}
.item-3 {
width: ipx;
}
.item-2 {
width: ipx;
}
.item-1 {
width: ipx;
}
自定義函數(shù)：
sass:
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
css:
#sidebar {
width: 10px;
}
如有遺漏屈糊，歡迎提醒更改，謝謝啦琼了！
THE END
大哥逻锐，不點個贊嘛
