sass的基础应用

sass

安装

在安装之前建议先卸载旧版本

1
npm uninstall sass-loader node-sass

然后进行安装

切记！！！

如果你的node版本不是最新版，请指定版本安装

可前往这里查询node-sass - npm (npmjs.com)

至于node-sass和sass-loader的对应版本可自行查询百度

如果你的node是最新版可直接用以下命令行安装

1
npm install node-sass sass-loader -D

重点！！！

如无法正常卸载node-sass和sass-loader，请在package.json文件和package-lock.json文件修改两个包的版本号再执行命令

1
npm install

如我的node版本是v18.15.0对应包版本是

image.png

比如我们有一个.sass文件，我们现在要把他编译成.css文件

文件名为test.sass

执行

1
sass test.scss

也可以直接能保存到css文件

1
sass test.scss runoob-test.css

sass变量

使用$符号表示变量

1
$variablename: value;

值的变量

如下代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

换成css代码是

1
2
3
4
5
6
7
8
9
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

作用域

你在标签里定义的话，作用域就只在定义的标签里

1
2
3
4
5
6
7
8
9
10
$myColor: red;

h1 {
  $myColor: green;   // 定义了一个变量，只在 h1 里头有用，局部作用域
  color: $myColor;
}

p {
  color: $myColor;
}

利用！global就能够让变量变成全局

如

1
2
3
4
5
6
7
8
9
10
$myColor: red;

h1 {
  $myColor: green !global;  // 全局作用域
  color: $myColor;
}

p {
  color: $myColor;
}

转换成css代码就是

1
2
3
4
5
6
7
h1 {
  color: green;
}

p {
  color: green;
}

sass的嵌套规则和属性

嵌套规则

类似于html

如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

转换成css为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

嵌套属性

说白了就是有相同前缀的属性可以写的更简洁

比如现在关于字的样式写法

1
2
3
4
5
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

编译成

1
2
3
4
5
6
7
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

@import

对于sass也可以导入css文件

如导入sass文件

1
2
3
@import "variables";
@import "colors";
@import "reset";

其中 “colors”是文件名

@mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

定义一个mixin

对于mixin公式

1
@mixin name { property: value; property: value; ... }

注意：对于 - 和 _ 在sass中是一样的 如 @mixin important-text { } 与 @mixin important_text { } 这两个是一样的mixin

定义示例

1
2
3
4
5
6
@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

使用mixin

使用@include包含mixin

如以下sass代码

1
2
3
4
5
.danger {
  @include important-text;  //在定义示例
  background-color: green;
}

转换成css

1
2
3
4
5
6
7
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

当然mixin也可以引入mixin

1
2
3
4
5
@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
}

向mixin传入变量

如以下：

1
2
3
4
5
6
7
8
9
10
11
12
/* 混入接收两个参数 */
@mixin bordered($color, $width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // 调用混入，并传递两个参数
}

.myNotes {
  @include bordered(red, 2px); // 调用混入，并传递两个参数
}

转换成css代码

1
2
3
4
5
6
7
.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}

定义传入默认值则是

1
2
3
@mixin bordered($color: blue, $width: 1px) {
  border: $width solid $color;
}

当我们对于一个有默认值的mixin我们只需要传入想要的值，如

1
2
3
4
5
6
7
8
9
@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

转换成css为

1
2
3
4
5
6
7
8
9
10
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

当我们不确定需要多少个参数的时候，我们可以使用可变参数，如

1
2
3
4
5
6
7
8
9
@mixin box-shadow($shadows...) {
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

转换成css为

1
2
3
4
5
6
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

sass的继承 @extend

如果两个样式几乎相同时，则@extend就显得很有用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}

转换成css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.button-basic, .button-report, .button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}

sass函数

Sass 函数 | 菜鸟教程 (runoob.com)

太多了可自行到这里查找

web
#sass
sass的基础应用
http://move-brain.github.io/super_zhu/2023/03/17/sass/
作者
super_zhu
发布于
2023年3月17日
更新于
2023年3月18日
许可协议