目錄

• SCSS
• 變數
• 1 宣告
• 2 作用域
• 3 引用
• 4 命名規則
• 巢狀規則
• 1 父選擇器標示符&
• 2 巢狀選擇器
• 3 組合選擇器
• 4巢狀屬性
• 匯入SASS檔案
• 1 預設變數值
• 2 巢狀匯入
• 靜默註釋
• 混合器 mixin
• 1 什麼樣的屬性適合組合為混合器
• 2 給混合器傳參
• 使用選擇器繼承來精簡CSS
• SASS

SCSS

使用css語法(普通寫法、加瀏覽器相容字首、filter)

sass-convert style.scss style.sass
使用大括號和分號

變數

1 宣告

以‘$’來宣告變數

$highlight-color:#333;
$plain-font: "Myriad Pro"

2 作用域

定義在css規則塊之外是全域性變數
定義在{…}塊中是區域性變數不可全域性引用

3 引用

$nav-color:#333; **全域性變數**
$nav-border: 1px solid $nav-color; **粒度分割槽**
nav{
	$width: 100px; **區域性變數**
	width: $width;
	color: $nav-color;
	border: $nav-border;
}
 

4 命名規則

• '-‘與‘_’相互相容，推薦使用’-'因為compass普遍使用中劃線

巢狀規則

css樣式

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

scss

#content{
	article:{
		h1{color:#333}
		p{margin-bottom:1.4rem}
	}
	aside{background-color:#EEE}
}
 

1 父選擇器標示符&

主要使用者偽類選擇器如：hover before after…
也用於通過js修改類名顯示同步樣式時的交叉選擇器判定

eg:1

	article a{
		color: #333;
		&:hover{
		color: blue;
		}
	}
	
eg:2

	nav div{
		color: #333;
		background-color: #fff;
		&.active{
			color: #fff;
			background-color: blue;
		}
	}

2 巢狀選擇器

巢狀選擇器使用最多的是群組選擇器以及所有樣式都屬於同一個父選擇器

css樣式

.container h1, .container h2, .container h3 { margin-bottom: .8em }

scss樣式

.container{
	h1, h2, h3{
		margin-bottom: .8em;
	}
}

3 組合選擇器

我一般不怎麼用這幾個選擇器，看了scss感覺非常省事，以後會嘗試著用
css

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

scss

article {
	~article { border-top: 1px solid #ccc }
	> section { background: #eee }
	dl > {
		dt { color: #333 }
		dd { color: #555 }
	}
	nav + & { margin-top: 0 }
}

4巢狀屬性

把屬性名從中劃線-的地方斷開，在根屬性後邊新增一個冒號:，緊跟一個 { } 塊，把子屬性部分寫在這個 { } 塊中
這個不長使用，通常遇到這種情況會選擇mixin

eg:
	nav {
		border: {
			style: 'solid';
			width: '1px';
			color: #333;
		}
	}

匯入SASS檔案

使用@import 匯入sass檔案
以_開頭的sass檔案是區域性檔案

1 預設變數值

反覆宣告同一個變數，最後一個宣告才是有效宣告
!default 關鍵字，來表明這是預設值

$fancybox-width: 400px !default;
	.fancybox {
	width: $fancybox-width;
	}

2 巢狀匯入

這種方式可以用來做ie低版本相容

_ieStyle.scss

.pay_shade{
	 -pie-background: rgba(0,0,0,.7);
    behavior: url(css/PIE.htc);
}

index.scss

body.ie{
	@import "ieStyle.scss";
}

靜默註釋

使用**//**註釋的內容不會出現在生成的css檔案中

混合器 mixin

使用 @mixin 定義 使用**@include**使用

1 什麼樣的屬性適合組合為混合器

• 你能否為這個混合器想出一個好的名字

2 給混合器傳參

可以通過傳遞不同的引數生成不同的樣式

@mixin link-colors($normal, $hover, $visited) {
	  color: $normal;
	  &:hover { color: $hover; }
	  &:visited { color: $visited; }
}

使用選擇器繼承來精簡CSS

使用 @extend 選擇器 來繼承css樣式

SASS

使用縮排語法

sass-convert style.sass style.scss
不使用大括號和分號