DIV CSS 佈局教程網

在Sass中，共有3種注釋方式：（1）//注釋內容；（2）/*注釋內容*/；（3）/*!注釋內容*/。

一、//注釋內容

在Sass中，這種注釋方式在編譯後不會保留下來。

舉例：

 
$height:20px;
body
{
    //height和line-height值相等，實現單行文字垂直居中
    height:$height;
    line-height:$height;
}

編譯出來的CSS代碼如下：

 
body 
{
    height: 20px;
    line-height: 20px;
}

二、/*注釋內容*/

在Sass中，這種注釋方式在編譯之後會保留下來。因為這種注釋方式跟CSS注釋方式是相同的，所以編譯後會保留下來。

舉例：

 
$height:20px;
body
{
    /*height和line-height值相等，實現單行文字垂直居中*/
    height:$height;
    line-height:$height;
}

編譯出來的CSS代碼如下：

 
body 
{
    /*height和line-height值相等，實現單行文字垂直居中*/
    height: 20px;
    line-height: 20px;
}

分析：

我們可以看出，在Sass中使用“/*注釋內容*/”這種方式，編譯出來的CSS也會保留其注釋。

三、/*!注釋內容*/

我們都知道壓縮工具會刪除所有的注釋，有些時候為了保留一些版權聲明的注釋說明，可以采用以下方式：

 
/*!注釋內容*/

也就是說在注釋內容前面加上一個“!”，這種壓縮工具就不會刪除這條注釋信息了。不過這種注釋方式用得很少，一般在CSS文件頂部為了聲明版權信息才會使用。

舉例：

 
/*!Copyright ©2015-2017 www.lvyestudy.com, All Rights Reserved*/
$height:20px;
body
{
    height:$height;
    line-height:$height;
}

編譯出來的CSS代碼如下：

 
/*!Copyright ©2015-2017 www.lvyestudy.com, All Rights Reserved*/
body 
{
    height: 20px;
    line-height: 20px;
}