Sass學習筆記(補充)
閱讀目錄
1. Sass和SCSS的區別
2. @while循環
3. @at-root
4. @content
5. 凸顯註釋
6. CSS輸出樣式
7. 重置瀏覽器樣式
8. [email protected]@warn命令
9. 使用Sass時的註意事項
相關鏈接:Sass學習筆記前篇
Sass關於顏色函數的樂趣
在Sass學習筆記前篇,記載了Sass安裝、基本用法、編程語法,在這篇,將補充在前篇未記載的知識。
1. Sass和SCSS的區別
參考鏈接:http://sass.bootcss.com/docs/scss-for-sass-users/
SCSS是Sass3引入新的語法,其實它們沒有什麽本質的區別,Sass是以“.sass”後綴為擴展名,SCSS是以“.scss”後綴為擴展名。
Sass與SCSS的語法區別,Sass是以嚴格的縮進式語法規則來寫,不使用大括號和分號;SCSS和CSS一樣,要使用大括號和分號。
/* SCSS語法 */ .main { background-color: #eee; .container { background-color: #fff; color: #222; } }
/* Sass語法 */ .main background-color: #eee .container background-color: #fff color: #222
編譯後的CSS樣式:
/* SCSS語法 */ .main { background-color: #eee; } .main .container { background-color: #fff; color: #222; }
/* Sass語法 */ .main { background-color: #eee; } .main .container { background-color: #fff; color: #222; }
2. @while循環
在Sass中,[email protected]@each循環外,[email protected]
$i: 1; @while $i < 3 { .div-#{$i} { width: 100px * $i; } $i: $i + 1; }
編譯後的CSS樣式:
.div-1 { width: 100px; } .div-2 { width: 200px; }
3. @at-root
Sass3.3.0新增的功能,可以跳出選擇器嵌套的。一般所有的嵌套,都是繼承上級選擇器的,@at-root就可以跳出所有的上級選擇器。
A. @at-root普通
body { font-size: 12px; @at-root .div { background-color: #eee; } }
編譯後的CSS樣式:
body { font-size: 12px; } .div { background-color: #eee; }
B. @at-root(without: …)[email protected](with: …)
@at-root默認只會跳出選擇器,@[email protected](without: rule),rule表示常規CSS。
[email protected]@[email protected],如果想跳出這兩個,則將rule改為media或者support,[email protected](without: media)[email protected](without: support)。
[email protected](without: all),也就是字面意思,跳出所有的嵌套,包括media、support和常規CSS。
/* media */ @media print { .page1 { width: 40%; @at-root (without: media) { .active { color: red; } } } } /* all */ @media print { .page2 { width: 40%; @at-root (without: all) { .active { color: red; } } } }
編譯後的CSS樣式:
/* media */ @media print { .page1 { width: 40%; } } .page1 .active { color: red; } /* all */ @media print { .page2 { width: 40%; } } .active { color: red; }with或without作用相反,也就是不跳出,如果將Sass代碼中的without改為with,編譯後的CSS樣式為:
/* media */ @media print { .page1 { width: 40%; } .active { color: red; } }
/* all */ @media print { .page2 { width: 40%; } .page2 .active { color: red; } }
C. [email protected]
.myAnimation { animation: myAnimation 3s; @at-root { @keyframes myAnimation { from{width:0;} to{width:120px;} } } }
編譯後的CSS樣式:
.myAnimation { animation: myAnimation 3s; } @keyframes myAnimation { from { width: 0; } to { width: 120px; } }
4. @content
@content是Sass3.2.0新增的,[email protected],[email protected]
@mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } }
編譯後的CSS樣式:
@media only screen and (max-width: 480px) { body { color: red; } }
5. 凸顯註釋
我們從CSS輸出樣式中,可以看出,只有壓縮輸出樣式compressed,不會對註釋輸出,其他所有的輸出樣式的CSS代碼都帶有註釋。
但是有時候,我們想要壓縮的CSS文件也有註釋,這時候,我們就可以用凸顯註釋。凸顯註釋就是在Sass標準註釋中加一個感嘆號!。例:/*! 凸顯註釋 */。
/*! 凸顯註釋 */ .main { background-color: #eee; .container { background-color: #fff; color: #222; } }
編譯後的CSS樣式:
?/*! 凸顯註釋 */.main{background-color:#eee}.main .container{background-color:#fff;color:#222}
6. CSS輸出樣式
Sass編譯CSS樣式風格有四種:nested、expanded、compact、compressed。
A. :nested 嵌套輸出方式,默認值
nested是Sass默認的輸出方式,它反映了CSS的結構樣式和HTML文檔結構,縮進的層級反映了嵌套的層級。每個屬性都占有一行,每條選擇器是根據嵌套的層級縮進的。例如:
.main { background-color: #eee; .container { background-color: #fff; color: #222; } }
編譯後的CSS樣式:
.main { background-color: #eee; } .main .container { background-color: #fff; color: #222; }
B. :expanded 正常輸出方式,沒有縮進的、擴展的
expanded和nested相似,區別就在於縮進,expanded的選擇器和閉大括號不會縮進,屬性值縮進所屬的選擇器內。
還是以上面樣式為例,編譯後的CSS樣式:
.main { background-color: #eee; } .main .container { background-color: #fff; color: #222; }
C. :compact 緊密輸出方式,單行輸出
compact是單行CSS輸出方式,一條選擇器和它的屬性值占一行。
同樣以上面樣式為例,編譯後的CSS樣式:
.main { background-color: #eee; } .main .container { background-color: #fff; color: #222; }
D. :compressed 壓縮輸出方式,去掉註釋及空格
compressed會去掉標準的Sass和CSS註釋及空格,選擇器和屬性值緊挨著輸出。
以上面樣式為例,編譯後的CSS樣式:
.main{background-color:#eee}.main .container{background-color:#fff;color:#222}
7. 重置瀏覽器樣式
我們在寫CSS時,首先都會引入一段重置瀏覽器樣式的代碼,這是因為不同的瀏覽器對標簽的默認樣式值不同,,所以我們需要有一套樣式表來重置瀏覽器樣式,避免我們寫的網頁在各個瀏覽器中造成的顯示差異。
- http://cssreset.com/,該網站有最流行的CSS重置樣式表,可以根據自己的需求復制。
還有一種標準化方法,跟重置方法有點不一樣,它會使瀏覽器中不一致的地方標準化,而不是重新修改這些地方。
- http://necolas.github.io/normalize.css/,該網站提供了normalize.css的樣式文件。(好像國內有被墻了,只能FQ了。)
- https://github.com/kristerkari/normalize.scss,可以在該頁面,下載normalize.scss文件。在寫Sass時,無論是normalize.css還是normalize.scss都可以使用,引用到樣式表開頭即可。
8. [email protected]@warn命令
A. @[email protected]
@debug偽指令檢測錯誤,[email protected]ug命令不會經常用到,但是它在調試自定義混合宏和函數時會起到很大的作用。
@warn命令用戶對問題提供警告建議;它將SassScript表達式顯示到標準錯誤輸出流。
B. Chrome瀏覽器調試
未完待續。
C. Firefox瀏覽器調試
未完待續。
9. 使用Sass時的註意事項
- 在寫Sass代碼時就應該註意代碼規範
- 不要嵌套太多層代碼,最好不要超過三層
- 非必須情況下,不要寫重復的混合宏
- 最好按模塊書寫樣式表,[email protected]
參考鏈接:http://sass-lang.com/
http://sass.bootcss.com/
http://www.w3cplus.com/sassguide/syntax.html
SASS在線轉換器
Sass學習筆記(補充)