摘要:一語法格式這里說的語法是的最初語法格式,他是通過鍵控制縮進的一種語法規(guī)則,而且這種縮進要求非常嚴格。在此特別提醒新同學只能使用老語法規(guī)則縮進規(guī)則,使用的是的新語法規(guī)則,也就是語法規(guī)則類似語法格式。
這里說的?Sass 語法是 Sass 的最初語法格式,他是通過 tab 鍵控制縮進的一種語法規(guī)則,而且這種縮進要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 Sass 老版本,其文件名以“.sass”為擴展名。
來看一個 Sass 語法格式的簡單示例。假設(shè)我們有一段這樣的 CSS 代碼:
</>復制代碼
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
現(xiàn)在用 Sass 的語法格式來編寫:
</>復制代碼
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color$font-stack: Helve
在整個 Sass 代碼中,我們沒看到類似 CSS 中的大括號和分號。
注:這種語法格式對于前端人員都不太容易接受,而且容易出錯。
SCSS 是 Sass 的新語法格式,從外形上來判斷他和 CSS 長得幾乎是一模一樣,代碼都包裹在一對大括號里,并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴展名。
同樣的這段 CSS 代碼:
</>復制代碼
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
?
我們使用 SCSS 語法格式將按下面這樣來書寫:
</>復制代碼
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
這樣的語法格式對于從事前端工作的同學來說更易于接受,這也是 SCSS 為什么更被前端人員青瞇的原因。
不管是 Sass 的語法格式還是 SCSS 的語法格式,他們的功能都是一樣的,不同的是其書寫格式和文件擴展名不同,來看一個簡單的對比圖:
正因為如此,有不少同學使用 Sass 新的語法規(guī)則,而文件擴展名依舊使用的是“.sass”,這也就造成血案了,編譯時說編譯不出來。在此特別提醒新同學:“.sass”只能使用 Sass 老語法規(guī)則(縮進規(guī)則),“.scss”使用的是 Sass 的新語法規(guī)則,也就是 SCSS 語法規(guī)則(類似 CSS 語法格式)。
?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/1990.html
摘要:編譯之后結(jié)果混合作用繼承復用定義使用傳參可以對混合進行傳遞參數(shù),和設(shè)置默認值。占用中的位置,使用其樣式內(nèi)容。在模式下,進行色彩運算時,要求通明度必須保持一致,否則無法進行運算。 Sass 是一個CSS 的擴展,在語法CSS語法的基礎(chǔ)上,增加變量,嵌套規(guī)則, 混合,導入,函數(shù)等功能 對CSS進行預(yù)處理的中間語言 文件格式 .sass ,.scssscss是對css的一種拓展,跟...
摘要:使用預(yù)編譯處理的優(yōu)勢使用預(yù)處理器,可以提供缺失的樣式層復用機制減少冗余代碼,提高樣式代碼的可維護性。所以我們在實際項目中衡量預(yù)編譯方案時,還是得想想,比起帶來的額外維護開銷,預(yù)處理器有沒有解決更大的麻煩。 一、什么是css預(yù)編譯處理? CSS 預(yù)編譯處理,從字面上理解,就是預(yù)先編譯處理CSS。它擴展了 CSS 語言,增加了變量、Mixin、函數(shù)等編程的特性,使 CSS 更易維護和擴展。...
摘要:語法使用它帶來的好處,就不再這里做介紹了,主要看怎么在里配置自動編譯。因為國內(nèi)網(wǎng)絡(luò)的問題導致源間歇性中斷因此我們需要更換源。也就是說,任何標準的樣式表都是具有相同語義的有效的文件。參考文檔官網(wǎng)設(shè)置自動編譯及參數(shù)配置 sass語法、使用它帶來的好處,就不再這里做介紹了,主要看怎么在webstorm里配置自動編譯。 sass編譯是需要Ruby環(huán)境的,可以到這里去下載? : ?https:/...
閱讀 1211·2019-08-30 15:55
閱讀 960·2019-08-30 15:55
閱讀 2157·2019-08-30 15:44
閱讀 2890·2019-08-29 14:17
閱讀 1136·2019-08-29 12:45
閱讀 3312·2019-08-26 10:48
閱讀 3137·2019-08-23 18:18
閱讀 2608·2019-08-23 16:47