SASS、SCSS和css的關係
搜尋了一下，發現國內很少人認識SASS和SCSS，故在此介紹一下他們。
SASS是CSS3的一個擴充套件，增加了規則巢狀、變數、混合、選擇器繼承等等。通過使用命令列的工具或WEB框架外掛把它轉換成標準的、格式良好的CSS程式碼。
SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合於SASS。
例如：
---------------------------------
在SCSS中使用變數
---------------------------------
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
轉換成CSS如下：
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
-------------------------------------------
SCSS巢狀：
-------------------------------------------
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
轉換成CSS如下：
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
有興趣的同學可以到官方網站去了解一下，http://http://sass-lang.com/ ，英文的。
本文轉自：
搜尋了一下，發現國內很少人認識SASS和SCSS，故在此介紹一下他們。
SASS是CSS3的一個擴充套件，增加了規則巢狀、變數、混合、選擇器繼承等等。通過使用命令列的工具或WEB框架外掛把它轉換成標準的、格式良好的CSS程式碼。
SCSS即是SASS的新語法，是Sassy CSS的簡寫，是CSS3語法的超集，也就是說所有有效的CSS3樣式也同樣適合於SASS。
例如：
---------------------------------
在SCSS中使用變數
---------------------------------
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
轉換成CSS如下：
/* CSS */
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
-------------------------------------------
SCSS巢狀：
-------------------------------------------
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
轉換成CSS如下：
/* CSS */
table.hl {
margin: 2em 0;
}
table.hl td.ln {
text-align: right;
}
li {
font-family: serif;
font-weight: bold;
font-size: 1.2em;
}
有興趣的同學可以到官方網站去了解一下，http://http://sass-lang.com/ ，英文的。謝謝~