sass语法一（变量篇）

Posted 2020-09-29 xg123

文件后缀名

---

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

//后缀名为sass的文件
body
    background: #eee
    font-size: 14px

//后缀名为scss的文件
body {
    background: #eee;
    font-size: 14px;
}

导入

---

sass的导入（@import）的规则和css不同，编译时会将@import的scss文件的内容合并进来,只生成一种css文件,但是如果你在scss文件中使用@import导入css文件；例如： @import ‘reset.css‘ ，那效果就和普通css导入一样，导入的css文件不会合并到编译后的文件中，而是以 @import 方式存在；

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

被导入的scss文件 a.scss

//_a.scss

body {
    background: #eee;
}

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

@import ‘reset.css‘; //导入reset.css
@imort ‘a‘;//导入a.scss文件

p {
    background: #ccc;
}

编译出来的b.css样式：

@import ‘reset.css‘;
body {
    background: #eee;
}
p {
    background: #ccc;
}

根据上面的代码可以看出，b.scss编译后，a.scss直接合并到了编译文件中，但是reset.css仍然保持@import的方式

注释

---

sass有两种注释方法,一种是标准的css注释方式 /**/，另一种是//双斜杠形式的单行注释，不过这种单行注释不会被编译出来

标准的css注释

/*
*我是css标准注释
*设置p标签背景色
*/

p {
    background: #ccc;
}

双斜杠单行注释

//我是单行注释
//设置p标签背景色
p {
    background: #ccc;
}

变量

---

sass的变量必须以$开头，后面紧跟变量名，而变量值与变量名之间以冒号“:”隔开（就像设置css属性一样），如果值后面加上!default 则表示默认值；

普通变量

定义之后可以在全局使用它

//sass style

$font-base: 14px;

p {
    font-size: $font-base;
}

//css style

p {
    font-size: 14px;
}

默认变量

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

// sass style

$base-lineHeight: 1.5 !default;
body {
    line-height: $base-lineHeight;
}

//css style

body {
    line-height: 1.5;
}

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要重新定义一下就可以了

//sass style
/*
*覆盖的顺序没有限制，可以在默认变量的后面也可以在前面
*/

$base-lineHeight: 1.5 !default;
$base-lineHeight: 2;
body {
    line-height: $base-lineHeight; 
}

//css style

body {
    line-height: 2;
}

可以看出编译完成的 line-height: 2; 而不是 line-height: 1.5; 。默认变量的价值在组件化开发的时候非常有用。

特殊变量

一般我们定义的变量都是属性值，可直接使用，但是如果变量作为属性的时候，我们就不能像之前那样使用了，比需要 #{$variable} 的形式使用

//sass style

$border-direction: top !default;
$base-fontSize: 14px !default;
$base-lineHeight: 1.5 !default;

//应用class和属性
.border-#{$border-direction} {
    border-#{$border-direction}: 1px solid #ccc;  
}
//应用复杂的属性
body {
    font: #{$base-fontSize}/#{$base-lineHeight};
}
//css style

.border-top {
    border-top: 1px solid #ccc;
}
body {
    font: 14px/1.5;
}

局部变量

sass在3.4版本之前没有类似于局部变量，但是在3.4版本之后就出现了局部变量，类似于函数的定义方式，在大括号之外的变量为全局变量（设置了 !global 变量的例外，一会儿提到），在大括号之内的变量只会作用于大括号范围内的变量；

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 12px;
}

由于在p标签声明的变量是局部变量，所以影响不到外面的变量，body标签的字体大小还是12px；

全局变量

全局变量相对于局部变量，声明变量的位置在大括号外面，或者在大括号内使用了 !global 也会成为全局变量；

//sass style
$base-fontSize: 12px;
p {
    $base-fontSize: 14px !global;
    font-size: $base-fontSize;
}
body {
    font-size: $base-fontSize;
}

//css style
p {
    font-size: 14px;
}
body {
    font-size: 14px;
}