成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Sass 語法格式及編譯

SimpleTriangle / 723人閱讀

摘要：一語法格式這里說的語法是的最初語法格式，他是通過鍵控制縮進(jìn)的一種語法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。在此特別提醒新同學(xué)只能使用老語法規(guī)則縮進(jìn)規(guī)則，使用的是的新語法規(guī)則，也就是語法規(guī)則類似語法格式。

一、sass語法格式

這里說的?Sass 語法是 Sass 的最初語法格式，他是通過 tab 鍵控制縮進(jìn)的一種語法規(guī)則，而且這種縮進(jìn)要求非常嚴(yán)格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 Sass 老版本，其文件名以“.sass”為擴(kuò)展名。
來看一個 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語法格式

SCSS 是 Sass 的新語法格式，從外形上來判斷他和 CSS 長得幾乎是一模一樣，代碼都包裹在一對大括號里，并且末尾結(jié)束處都有一個分號。其文件名格式常常以“.scss”為擴(kuò)展名。

同樣的這段 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;
}

這樣的語法格式對于從事前端工作的同學(xué)來說更易于接受，這也是 SCSS 為什么更被前端人員青瞇的原因。

不管是 Sass 的語法格式還是 SCSS 的語法格式，他們的功能都是一樣的，不同的是其書寫格式和文件擴(kuò)展名不同，來看一個簡單的對比圖：

正因?yàn)槿绱耍胁簧偻瑢W(xué)使用 Sass 新的語法規(guī)則，而文件擴(kuò)展名依舊使用的是“.sass”，這也就造成血案了，編譯時說編譯不出來。在此特別提醒新同學(xué)：“.sass”只能使用 Sass 老語法規(guī)則（縮進(jìn)規(guī)則），“.scss”使用的是 Sass 的新語法規(guī)則，也就是 SCSS 語法規(guī)則（類似 CSS 語法格式）。

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1990.html

相關(guān)文章

  • vue入門文章

    摘要：本來想自己寫一篇關(guān)于入門的文章。后面可能在這篇文章基礎(chǔ)上，有所內(nèi)容的增加。預(yù)處理器定義了一種新的專門的編程語言，編譯后成正常的文件。 本來想自己寫一篇關(guān)于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細(xì)了，實(shí)在有保存下來的必要。后面可能在這篇文章基礎(chǔ)上，有所內(nèi)容的增加。 CSS預(yù)處理器 定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

    seanHai 評論0 收藏0

  • sass的學(xué)習(xí)記錄

    摘要：核心團(tuán)隊(duì)不懈努力，一直使其保持領(lǐng)先地位。自身選擇器編譯成自身選擇器屬性嵌套編譯為占位符從以后就可以定義占位選擇器。將局部變量轉(zhuǎn)換為全局變量可以添加聲明編譯為默認(rèn)變量的默認(rèn)變量僅需要在值后面加上即可。 sass簡介 SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時間，使得CSS的開發(fā)，變得簡單和可維護(hù)。世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級CSS擴(kuò)展語言！ 兼容C...

    xuweijian 評論0 收藏0

  • SASS

    摘要：編譯之后結(jié)果混合作用繼承復(fù)用定義使用傳參可以對混合進(jìn)行傳遞參數(shù)，和設(shè)置默認(rèn)值。占用中的位置，使用其樣式內(nèi)容。在模式下，進(jìn)行色彩運(yùn)算時，要求通明度必須保持一致，否則無法進(jìn)行運(yùn)算。 Sass 是一個CSS 的擴(kuò)展，在語法CSS語法的基礎(chǔ)上，增加變量，嵌套規(guī)則, 混合,導(dǎo)入，函數(shù)等功能 對CSS進(jìn)行預(yù)處理的中間語言 文件格式 .sass ，.scssscss是對css的一種拓展，跟...

    chanthuang 評論0 收藏0

  • 大話css預(yù)編譯處理（一）通讀介紹篇

    摘要：使用預(yù)編譯處理的優(yōu)勢使用預(yù)處理器，可以提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們在實(shí)際項(xiàng)目中衡量預(yù)編譯方案時，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。 一、什么是css預(yù)編譯處理？ CSS 預(yù)編譯處理，從字面上理解，就是預(yù)先編譯處理CSS。它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等編程的特性，使 CSS 更易維護(hù)和擴(kuò)展。...

    Backache 評論0 收藏0

  • webstorm 設(shè)置 sass自動編譯問題

    摘要：語法使用它帶來的好處，就不再這里做介紹了，主要看怎么在里配置自動編譯。因?yàn)閲鴥?nèi)網(wǎng)絡(luò)的問題導(dǎo)致源間歇性中斷因此我們需要更換源。也就是說，任何標(biāo)準(zhǔn)的樣式表都是具有相同語義的有效的文件。參考文檔官網(wǎng)設(shè)置自動編譯及參數(shù)配置　　sass語法、使用它帶來的好處，就不再這里做介紹了，主要看怎么在webstorm里配置自動編譯。 　　sass編譯是需要Ruby環(huán)境的，可以到這里去下載? : ?https:/...

    APICloud 評論0 收藏0

發(fā)表評論

0條評論

SimpleTriangle

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<