文章目录
一、为什么使用 Sass?
-
CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。
-
Sass 引入合理的样式
复用机制
,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
/* 定义颜色变量,要修改颜色值,修改这里就可以了 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
甚至可以给各种基础色分等级,就更加方便颜色的修改了
二、Sass 是如何工作的?
浏览器并不支持 Sass 代码。因此,你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。
三、Sass的安装(安装成功方法)
node-sass安装和使用
第一步,为了使用稳定和快捷,先设置淘宝镜像源。执行下面的命令行
npm config set registry https://registry.npm.taobao.org/
第二步,设置变量 sass_binary_site,指向淘宝镜像地址。执行下面的命令行
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
第三步,全局安装node-sass,执行下面的命令。
npm i -g node-sass
直接下载官网的会导致错误,所以要配置镜像。
注意:这里的淘宝镜像不是弄成cnpm,cnpm和npm还是不一样的
jack_bob的npm 和 cnpm 区别
四、Sass 变量
1、Sass 变量可以存储以下信息:
- 字符串
- 数字
- 颜色值
- 布尔值
- 列表
- null 值
Sass 变量使用$
符号:
$variablename: value;
2、Sass作用域
Sass 变量的作用域只能在当前的层级上有效果(与let类似),如 h1 的样式为它内部定义的 green,p 标签则是为 red。
h1 {
$myColor: green; // 只在 h1 里头有用,局部作用域
color: $myColor;
}
#这里的color为 green
当然,可以使用!global
关键词来设置变量是全局的:
$myColor: red;
h1 {
$myColor: green !global; // 全局作用域
color: $myColor;
}
#相当于后面修改了$myColor值====新赋值嘛
注意:所有的全局变量我们一般定义在同一个文件,如:_globals.scss
,然后我们使用 @include
来包含该文件。
五、Sass 嵌套规则与属性
1、嵌套规则
Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
转换成css后就变为nav url{}了
2、嵌套属性
很多 CSS 属性都有同样的前缀,例如:font-family, font-size 和 font-weight , text-align, text-transform 和 text-overflow。
于是就有了Sass的嵌套属性:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
六、Sass @import
1、Sass 导入文件
类似 CSS,Sass 支持 @import 指令。
CSS中都尽量不要使用@import,CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求。
因为它影响页面性能:
1.影响浏览器的并行下载
2.多个@import导致下载顺序紊乱
@import
指令可以让我们导入其他文件等内容。
但是,Sass @import
指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。
Sass @import 指令语法如下:
@import filename;
注意:包含文件时不需要指定文件后缀,Sass 会自动添加后缀 .scss。
此外,你也可以导入 CSS 文件。
2、Sass Partials
如果你不希望将一个 Sass 的代码文件编译到一个 CSS 文件,你可以在文件名的开头添加一个下划线。这将告诉 Sass 不要将其编译到 CSS 文件。
但是,在导入语句中我们不需要添加下划线。
注意:请不要将带下划线与不带下划线的同名文件放置在同一个目录下,比如,_colors.scss 和 colors.scss 不能同时存在于同一个目录下,否则带下划线的文件将会被忽略。
七、Sass @mixin 与 @include
-
@mixin
指令允许我们定义一个可以在整个样式表中重复使用的样式
。 -
@include
指令可以将混入(mixin)引入到文档中
,导入mixin
定义的“类”样式
1、@mixin定义混入
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
注意:Sass 的连接符号 - 与下划线符号 _ 是相同的
,也就是 @mixin important-text { } 与 @mixin important_text { } 是一样的混入。
2、@include使用混入
.danger {
@include important-text;
background-color: green;
}
3、混入中也可以包含混入
@mixin special-text {
@include important-text;
@include link;
@include special-border;
}
4、向混入传递变量
-
混入可以接收参数。
-
我们可以向混入传递变量。
/* 混入接收两个参数 */
/* 混入的参数也可以定义默认值*/
@mixin bordered($color: blue, $width: 1px) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // 调用混入,并传递两个参数
}
.myNotes {
@include bordered(red, 2px); // 调用混入,并传递两个参数
}
5、可变参数
不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时我们就可以使用...
来设置可变参数。
@mixin box-shadow($shadows...)
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
6、浏览器前缀使用混入
八、Sass @extend 与 继承
- @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
- 场景:如果一个样式与另外一个样式几乎相同,
只有少量的区别
,则使用@extend
就显得很有用。
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}
九、Sass 函数
序号 | 函数类别 |
---|---|
1 | 字符串相关函数 |
2 | 数字相关函数 |
3 | 列表(List)相关函数 |
4 | 映射(Map)相关函数 |
5 | 选择器相关函数 |
6 | Introspection 相关函数 |
7 | 颜色相关函数 |