詳解CSS的Sass框架中代碼注釋的編寫方法
WEB前端開發(fā) 發(fā)布時(shí)間：2016-04-11 10:05:46 作者：愚人碼頭 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS的Sass框架中代碼注釋的編寫方法,Sass完全支持CSS基本的單行注釋與多行注釋,需要的朋友可以參考下
在 Sass 中注釋有兩種方式：
1、類似 CSS 的注釋方式，使用 ”/* ”開頭，結(jié)屬使用 ”*/ ”
2、類似 JavaScript 的注釋方式，使用“//”
Sass 支持標(biāo)準(zhǔn)的CSS多行注釋以/* */以及單行注釋 //。
兩者區(qū)別：前者會(huì)在編譯出來的 CSS 顯示，后者在編譯出來的 CSS 中不會(huì)顯示
在盡可能的情況下，多行注釋會(huì)被保留在輸出的CSS中，而單行注釋會(huì)被刪除。 例如：
CSS Code復(fù)制內(nèi)容到剪貼板
- /* 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復(fù)制內(nèi)容到剪貼板
- /* 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; }
如果多行注釋的第一個(gè)字母是 !，那么注釋總是會(huì)被保留到輸出的CSS中，即使在壓縮輸出模式下。這可用于在你生成的CSS中添加版權(quán)聲明。
使用插值語句 (interpolation) ，可以將變量值輸出到多行注釋中，例如：
CSS Code復(fù)制內(nèi)容到剪貼板
- $version: "1.2.3";
- /* This CSS is generated by My Snazzy Framework version #{$version}. */
編譯為：
CSS Code復(fù)制內(nèi)容到剪貼板
- /* This CSS is generated by My Snazzy Framework version 1.2.3. */
相關(guān)文章
前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范（4）—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21- 這篇文章主要介紹了利用CSS的Sass預(yù)處理器來制作居中效果的教程,圍繞Sass mixin的編寫方法進(jìn)行講解,同時(shí)介紹了如何使用Flexbox來讓子元素居中,需要的朋友可以參考下2016-03-10
- 這篇文章主要介紹了CSS的Sass框架中混合宏的使用,文中對(duì)混合宏所支持的參數(shù)特別是Null參數(shù)有較為詳細(xì)的講解,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了CSS的Sass框架中常用的操作符的使用教程,整理了一些基本的邏輯操作符和字符串操作符等的翻譯和用法,需要的朋友可以參考下2016-03-08
- 這篇文章主要介紹了使用Sass來編寫面向?qū)ο蟮腃SS代碼,SASS如今正在成為最流行的CSS開發(fā)框架,需要的朋友可以參考下2015-07-22
- 這篇文章主要介紹了CSS框架sass的簡單一覽,像嵌套屬性和運(yùn)算符等主要特性都在文中有簡單的介紹,需要的朋友可以參考下2015-07-20
- 這篇文章主要介紹了CSS的SASS樣式編程指南,包括對(duì)于嵌套器和注釋的使用等方面,需要的朋友可以參考下2015-07-12
- Sass 擴(kuò)展了 CSS3，增加了規(guī)則、變量、混入、選擇器、繼承等等特性。Sass 生成良好格式化的 CSS 代碼，易于組織和維護(hù)，需要的朋友可以參考下2014-09-21
學(xué)習(xí)CSS預(yù)處理器:Sass和less進(jìn)行對(duì)比
Css可以讓你做很多事情，但它畢竟是給瀏覽器認(rèn)的東西，對(duì)開發(fā)者來說，Css缺乏很多特性2012-07-11sass簡介_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
Sass可以簡化Css工作流，使Css的擴(kuò)展和維護(hù)工作更容易，這篇文章主要介紹了sass簡介的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-19