学习-【前端】-sass学习笔记

后缀:

sass有两种后缀文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号。

 

下面举出 后缀为sass文件写法:

body

     background:#eee

     font-size:12px

导入

sass的导入(@import)规则和css的有所不同,编译时会将@import的scss文件合并进来只生成一个css

@import "reset.scss"

@import "a"

p{

     background:#eee;

}

编译出来的文件

@import "reset.css"

body{

     background:#eee;

}

注释:

sass两种注释,一种是标准css注释/** **/另一种则是//双斜杠单行注释

 

/**

*我是css标准注释

**/

body{

     padding:5px;

}

//我是双斜杠单行注释

body{

     padding:5px;

}

变量:

sass变量必须是$开头,后面紧跟变量名,而变量值和变量名之间需要:隔离。

$fontSize:12px;

body{

     font-size:$fontSize;

}

默认变量

sass的默认变量仅需要在值后面加上!default

$baseLineHeigh: 1.5!default;

 

 

sass的默认变量一般是用来设置默认值,然后根据需求覆盖的,覆盖的方式就是在默认变量前写个相同的变量

//

//

$baseHeight: 2;

$baseHeight:1.5 !default;

body{

     line-height:$baseHeight;

}

//

body{

     line-height:2;

}

 

 

特殊变量

一般我们定义的变量都为属性值,可以直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以 #{$variables}形式使用。

$borderDirection: top !default;

//应用于class和属性

.border-#{$borderDirection) {

     border-#{$borderDirection):1px solid #ccc;

}

}

原文地址:https://www.cnblogs.com/wq123/p/4396480.html