实现Sass注释的三种方式

在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;
}