• :绿叶现版本暂时不再更新维护,全新版本已经在开发中,新系列图书(暂时8本,后面再续)也将于12月后陆续出版,敬请期待~

3.5 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;
}
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取更多学习资源和配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:593173594(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部