sass-基础

Posted 2020-09-05 vs1435

1：导入：

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

但是如果你在sass文件中导入css文件如@import ‘reset.css‘，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

 

例子：

　a.scss：

　　　　body { background: #eee; }

　需要导入样式的sass文件b.scss：

　　@import "reset.css";
　　@import "a";
　　p{ background: #0982c1;} 

　　转译出来的b.css样式：

　　@import "reset.css";
　　body { background: #eee; }

　　p{ background: #0982c1;} 

2：注释

标准的css注释

/*
*我是css的标准注释
*设置body内距
*/
body{
  padding:5px;
} 

双斜杆单行注释

单行注释跟javascript语言中的注释一样，使用又斜杠（//），但单行注释不会输入到CSS中。

//我是双斜杠表示的单行注释
//设置body内距
body{
  padding:5px; //5px
} 

3：变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

 

 

3.1普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;

body{ font-size:$fontSize; } ==》 body{font-size:12px}

 

 

3.2默认变量

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

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; }  ==》 body{ line-height:1.5; }

 

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

$baseLineHeight: 2;

$baseLineHeight: 1.5 !default;

body{ line-height: $baseLineHeight; }  ==》 body{ line-height:2; }

 

 

3.3特殊变量

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

$borderDirection: top !default;

$baseFontSize: 12px !default;

$baseLineHeight: 1.5 !default;

//应用于class和属性

.border-#{$borderDirection}{

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

} 　　==》 .border-top{ border-top:1px solid #ccc; }

//应用于复杂的属性值

body{

　　font:#{$baseFontSize}/#{$baseLineHeight};

}       ==》  body { font: 12px/1.5; }

3.4多值变量