sass安裝和語法

1.簡介

sass 它的基本思想是，用一種專門的程式語言，進行網頁樣式設計，然後再編譯成正常的css檔案。這被叫做「css預處理器」（css preprocessor）。它提供了很便利的語法，節省了我們寫css的時間。

2.安裝

(1)首先確保你的電腦安裝了 ruby （傳送門 

//

控制台檢視是否安裝成功
ruby -v

gem install sass

（1）用編輯器 新建資料夾 demo ，在demo裡新建檔案 demo.scss ，**如下

.list_1 

li time }}

// demo.css 是生成後的css檔名

sass demo.scss demo.css

// nested：巢狀縮排的css**，它是預設值。

// expanded：沒有縮排的、擴充套件的css**。
// compact：簡潔格式的css**。
// compressed：壓縮後的css**。

sass --style compressed test.sass test.css

我覺得sass的格式和jade書寫格式很像，結合sass的語法寫了個demo,希望能幫助大家。

注意 ： 這裡的是在控制台下直接用sass編譯下的語法（不需要｛｝和；等），但是如果你需要在grunt下使用，請參考 

頁面結構很簡單，這裡主要講scss的常用語法，我寫在注釋裡了。

醜醜頁面預覽：

//each迴圈

$headings: (h1:2em,h2:1.5em,h3:1.2em)

@each $header,$size

in$headings

# font-size: $size

//for迴圈

@for $i from 1 through 3.item-#

width: 2em *$i

//多個欄位的資料迴圈

$animal-data: (puma,black,default),(sea-sulg,blue,pointer),(egret,white,move)

@each $animal,$color,$cursor

in $animal-data

.#-icon

background: url(img/#.png)

border: 1px #ddd solid

cursor: $cursor

css.scss生成的css.css

*

body 
a a:hover 
h1 h2 
h3 .item-1
.item-2
.item-3
.puma-icon 
.sea-sulg-icon 
.egret-icon 
/**/

//

引入外部css檔案
@import "css.css"
//變數
$blue:#1875e7
//**塊
@mixin font1
font-family: 'microsoft yahei'color: #ddd
//巢狀
.lay01
background: $blue
border: 1px #ddd solid
a @include font1
//計算
font-size: 16px -1px
label
background: red
font-size: 12px
display: block
width: 100px
height: 30px
line-height: 30px
text-align: center
.lay01-1width: 100px
height: 100px
background: yellow
h1font-size: 20px
color: green

@import url(css.css);

.lay01 
.lay01 a 
.lay01 label 
.lay01 .lay01-1
.lay01 .lay01-1h1 
/**/

Sass安裝及基本語法

sass 是乙個 css 預處理器。sass 是 css 擴充套件語言，可以幫助我們減少 css 重複的 節省開發時間。sass 完全相容所有版本的 css。sass 擴充套件了 css3，增加了規則 變數 混入 選擇器 繼承 內建函式等等特性。sass 生成良好格式化的 css 易於組織和維護。s...

Sass 語法格式

整理自慕課筆記 這裡說的 sass 語法是 sass 的最初語法格式，他是通過 tab 鍵控制縮排的一種語法規則，而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 sass 老版本，其檔名以 sass 為副檔名。來看乙個 sass 語法格式的簡單示例。假設我們有一段這樣的...

SASS 簡明語法

sass 簡明語法 標籤 空格分隔 未分類 規則與指令 import 用於匯入 css 檔案 或 scss 檔案，被匯入檔案中的 mixins 在將當前檔案中可用。除當前路徑外，可通過配置 load paths 或 load path 設定搜尋路徑。匯入檔案時，當檔案 擴充套件名為 css 以 ht...