詳解CSS的Sass框架中代碼注釋的編寫方法
WEB前端開發(fā) 發(fā)布時間:2016-04-11 10:05:46 作者:愚人碼頭
我要評論

這篇文章主要介紹了CSS的Sass框架中代碼注釋的編寫方法,Sass完全支持CSS基本的單行注釋與多行注釋,需要的朋友可以參考下
在 Sass 中注釋有兩種方式:
1、類似 CSS 的注釋方式,使用 ”/* ”開頭,結屬使用 ”*/ ”
2、類似 JavaScript 的注釋方式,使用“//”
Sass 支持標準的CSS多行注釋以/* */以及單行注釋 //。
兩者區(qū)別:前者會在編譯出來的 CSS 顯示,后者在編譯出來的 CSS 中不會顯示
在盡可能的情況下,多行注釋會被保留在輸出的CSS中,而單行注釋會被刪除。 例如:
CSS Code復制內容到剪貼板
- /* This comment is
- * several lines long.
- * since it uses the CSS comment syntax,
- * it will appear in the CSS output. */
- body { color: black; }
- // These comments are only one line long each.
- // They won't appear in the CSS output,
- // since they use the single-line comment syntax.
- a { color: green; }
編譯為:
CSS Code復制內容到剪貼板
- /* This comment is
- * several lines long.
- * since it uses the CSS comment syntax,
- * it will appear in the CSS output. */
- body {
- color: black; }
- a {
- color: green; }
如果多行注釋的第一個字母是 !,那么注釋總是會被保留到輸出的CSS中,即使在壓縮輸出模式下。這可用于在你生成的CSS中添加版權聲明。
使用插值語句 (interpolation) ,可以將變量值輸出到多行注釋中,例如:
CSS Code復制內容到剪貼板
- $version: "1.2.3";
- /* This CSS is generated by My Snazzy Framework version #{$version}. */
編譯為:
CSS Code復制內容到剪貼板
- /* This CSS is generated by My Snazzy Framework version 1.2.3. */
相關文章
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21- 這篇文章主要介紹了利用CSS的Sass預處理器來制作居中效果的教程,圍繞Sass mixin的編寫方法進行講解,同時介紹了如何使用Flexbox來讓子元素居中,需要的朋友可以參考下2016-03-10
- 這篇文章主要介紹了CSS的Sass框架中混合宏的使用,文中對混合宏所支持的參數特別是Null參數有較為詳細的講解,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了使用Sass來編寫面向對象的CSS代碼,SASS如今正在成為最流行的CSS開發(fā)框架,需要的朋友可以參考下2015-07-22
- 這篇文章主要介紹了CSS框架sass的簡單一覽,像嵌套屬性和運算符等主要特性都在文中有簡單的介紹,需要的朋友可以參考下2015-07-20
- 這篇文章主要介紹了CSS的SASS樣式編程指南,包括對于嵌套器和注釋的使用等方面,需要的朋友可以參考下2015-07-12
- Sass 擴展了 CSS3,增加了規(guī)則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼,易于組織和維護,需要的朋友可以參考下2014-09-21
- Css可以讓你做很多事情,但它畢竟是給瀏覽器認的東西,對開發(fā)者來說,Css缺乏很多特性2012-07-11
- Sass可以簡化Css工作流,使Css的擴展和維護工作更容易,這篇文章主要介紹了sass簡介的相關資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-19