SASS常用語法

SASS常用語法

SASS在實際開發中起到了非常便捷的作用,並且簡化了css中繁瑣的選擇器操作

1. 嵌套語法

2. 變量

3. 計算

4. 代碼塊 - - - @mixin

5. 函數 - - - @function

6. 繼承 - - - @extend

7. 特殊變量 - - - list , 對象

8. 循環 - - - @for

9. 引入 - - - @import

1.嵌套語法

HTML結構

	<div id="box">
		<div class="d1">
			<p>
				<span>我在最裏面</span>
			</p>
			<span></span>
		</div>
		
		<div class="d2"></div>
	</div>

如果想要取到最裏層span又不影響外部結構樣式,通常我們要寫許多層選擇器保證準確性,並且可能出現某個選擇器不小心寫錯導致樣式添加失敗

SASS

#box{

	.d1{
	
		p{
		
			span{
				color:red;
			}
		}
	}	
}

css

#box .d1 p span {
  color: red;
}

利用sass嵌套語法可以準確獲取到元素,並且在修改某個#box的後代元素時也可以對應找到他的樣式域

例如這樣

#box {
    height: 100px;
    width: 100px;

    .d1 {
        background: #99f;

        p {
            font: 12px/2 "";

            span {
                color: red;
            }
        }
    }
}

轉換css後

#box {
  height: 100px;
  width: 100px;
}

#box .d1 {
  background: #99f;
}

#box .d1 p {
  font: 12px/2 "";
}

#box .d1 p span {
  color: red;
}

2.變量

變量的使用在重用率方面更加的方便

sass

// 單一變量
$color1: red;
// 複雜變量
$color2: #ff9 #99f;

.box1{
    background: $color1;
}

.box2{
	// nth從下標1開始,參數1 變量 ,參數2 下標
    background: nth($color2,1);
}

css

.box1 {
  background: red; }

.box2 {
  background: #ff9; }

3.計算

.box1{
    /* 加法 */
    height: 10px + 5px;     // 15px

    height: 10 + 5px;       // 15px

    height: 10px + 5;       // 15px
    /* 減法 */
    height: 10px - 5px;     // 5px

    height: 10px - 5;       // 5px

    height: 10 - 5px;       // 5px

    /* 乘法 */
    height: 10px * 2;       // 20px

    height: 10 * 2px;       // 20px

    // height: 10px * 2px;  報錯,px無法和px相乘

    /* 除法 */
    // 因爲css中有屬性值需要/符號,例如 font: 12px/2 "";
    
    height: 10px / 2 ;      // 結果爲 10px / 2

    // 所以需要計算的話需要加上括號或者乘以單位值
    height: (10px / 2);     // 5px

    // height: (10 / 2px); 報錯 計算結果爲 5/px ,不是一個值

    height: 10 / 2 * 1px;       // 5px

    height: 10px / 2px * 1px;     // 5px

}

4.代碼塊

減少樣式代碼的重複率,並且可以傳值修改變量,但是沒有返回值

/* 4.混合 ---> 代碼塊  */
// 沒有返回值

// 用@mixin聲明
@mixin trans ($deg){    // 像函數一樣可以傳值
    -webkit-transform: rotate($deg);
    -moz-transform: rotate($deg);
    -ms-transform: rotate($deg);
    -o-transform: rotate($deg);
    transform: rotate($deg);
}

// 調用時用@include
.box1{
    @include trans(90deg);
}
.box2{
    @include trans(45deg);
}

css

@charset "UTF-8";
/* 4.混合 ---> 代碼塊  */
.box1 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg); }

.box2 {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }

5.函數

// 編寫函數
@function pToR($px){
    @return $px/$fs * 1rem;
}

// 變量聲明
$fs: 20px;
html{
    font-size: $fs;
}

.box2{
	// 函數調用
    height: pToR(100px);
}

css

html {
  font-size: 20px; }

.box2 {
  height: 5rem; }

6.繼承

在重複樣式上也可以用繼承的方法,有區別的地方重新改寫即可

/* 6.繼承 */
.box1 {
    width: 100px;
    height: 100px;
    background: #99f;
}

.box2 {
	// 繼承 .box1的樣式
    @extend .box1;
    background: #f9f;
}

css

/* 6.繼承 */
.box1, .box2 {
  width: 100px;
  height: 100px;
  background: #99f; }
.box2 {
  background: #f9f; }

7.特殊變量

其中包括list型變量和對象型變量

list

/* list變量 */
$list: (3 10px 20px)(4 20px 40px)(5 30px 60px);

// 遍歷
// $a,$b,$c分別代表list中每個成員的(參數1 參數2 參數3)
@each $a,$b,$c in $list {
	// #{}表示佔位符,返回#{}的值連接前面的字符 
    .box#{$a}{
        width: $b;
        height: $c;
    }
}

css

.box3 {
  width: 10px;
  height: 20px; }

.box4 {
  width: 20px;
  height: 40px; }

.box5 {
  width: 30px;
  height: 60px; }

對象

$map:(h1:10px,h2:20px,h3:30px);
@each $key,$val in $map{
    #{$key}{
        height:$val;
    }
}

css

h1 {
  height: 10px; }

h2 {
  height: 20px; }

h3 {
  height: 30px; }

8.循環

/* to 語法 不包括 最後一位5 */
@for $a from 1 to 5{
    .box#{$a}{
        height: 100px;   
    }
}
/* through  包括5 */
@for $a from 1 through 5{
    .div#{$a}{
        height: 100px;   
    }
}

css

/* to 語法 不包括 最後一位5 */
.box1 {
  height: 100px; }

.box2 {
  height: 100px; }

.box3 {
  height: 100px; }

.box4 {
  height: 100px; }

/* through  包括5 */
.div1 {
  height: 100px; }

.div2 {
  height: 100px; }

.div3 {
  height: 100px; }

.div4 {
  height: 100px; }

.div5 {
  height: 100px; }

8.引入

需要被引入的a.scss

.box{
    height: 100px;
}

編寫的scss中

.div{
    color: red;
}
/* 以下是被引入的樣式代碼 */
@import "a.scss";

css

.div {
  color: red; }

/* 以下是被引入的樣式代碼 */
.box {
  height: 100px; }