目录
一.介绍
Sass（Syntactically Awesome Stylesheets）是一种 CSS 的预处理器，提供了一种扩展和增强 CSS 的方式。Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量(variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
sass的特点
变量：Sass 允许在样式表中使用变量，以便在多个位置共享和重用样式值。可以声明变量并将其用作颜色、字体、间距等样式属性的值。
嵌套规则：Sass 允许在样式规则中嵌套其他规则，提供了更清晰和结构化的样式层级结构。这样可以避免编写重复的选择器，并使样式表更易于阅读和维护。
混合（Mixins）：混合是一种可重用的代码块，类似于函数，可以在样式规则中引入。通过定义和调用混合，可以避免重复编写相似的样式代码。
继承：Sass 允许样式规则继承其他规则的样式，以减少代码的重复。通过使用
@extend关键字，一个选择器可以继承来自另一个选择器的样式。运算：Sass 支持数字、颜色和单位之间的基本运算，可以在样式表中进行数值计算和样式调整，提供了更灵活的样式控制。
现阶段发表的文章主要针对，html和css阶段，所以在下面的sass讲解中有关于javascript的部分内容，会被忽略掉，如果对sass感兴趣可以去sass中文网查看相关文档。sass地址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网
二.sass的使用
sass的写法
使用 sass 可以使用两种语法格式，语法格式不同，文件后缀名不同，具有scss和sass两种不同后缀名，scss 支持css3语法格式，所以的css3语法都通过，sass 被称为缩进格式（indented）用 “换行” 代替 “分号” 分隔属性。
简单写法和css是一样的
less 的写法
通过换行符和空格来表达层级关系
css 写法
div{border:1px #f00 solid;} div p{font-size:20px;}sass写法（常用）
div{ border:1px #f00 solid; p{ font-size:20px; } }less 写法 （不常用）
div border:1px #f00 solid; p font-size:20px;
sass的变量
使用前需安装插件
在vscode中安装 插件
easy sass
easy less
主要使用的是easy sass ，通过插件编译后的结果是会自动生成
一个css文件和一个min.css压缩文件
声明变量
声明变量：
通过关键字 $声明变量 ，$name 此时的name就是变量名
// 声明变量
$aa:300px; //$aa指代的就是200px
$col:#f60;
$l:left;
.wp{
width: $aa;
height: $aa;
background: $col;
}
.cont{
// 声明变量
$w:100px;
width: $w;
height: $w;
border: 10px $col solid;
margin-#{$l}:100px;
padding-#{$l}:20px;
}变量名的命名方式
变量名的命名方式
以数字，字母，下划线，_ ,短横线- 组合的字符作为变量名
注意：只能以 字母和下划线_ 开头
通过 #{} 插值语句可以在选择器或属性名中使用变量
直接在属性中使用变量，sass会报错
如 marign-$left:10px; 报错
margin-#{$left}:10px; 正确写法
作用域
全局作用域和局部作用域
全局作用域范围是整个sass文件，局部作用域范围是某一个选择器内部。
全局变量和局部变量
全局变量：声明在全局作用域内的变量，可以在任何地方使用该变量
局部变量：声明在局部作用域内的变量，只能在声明的地方使用。
sass的嵌套规则
Sass 的嵌套规则允许在样式规则中嵌套其他规则，以创建更清晰和结构化的样式层级结构。通过嵌套规则，可以避免编写重复的选择器，并使样式表更易读和维护。
下面是 Sass 嵌套规则的示例和说明：
.container {
background-color: #f0f0f0;
padding: 10px;
h1 {
font-size: 22px;
color: #333;
}
p {
margin: 5px 0;
line-height: 1.5;
}
a {
color: blue;
text-decoration: none;
}
}
在这个示例中，.container 选择器是最外层的规则。在它的嵌套规则中，我们可以看到 h1、p 和 a 的样式规则。在这些嵌套规则中，选择器被嵌套在父选择器 .container 中。
编译后的 CSS 结果如下：
.container {
background-color: #f0f0f0;
padding: 10px;
}
.container h1 {
font-size: 22px;
color: #333;
}
.container p {
margin: 5px 0;
line-height: 1.5;
}
.container a {
color: blue;
text-decoration: none;
}
可以看到，嵌套规则被正确地转换为了层叠的 CSS 规则。这样的结构使得样式表更加简洁，并更清晰地表示了选择器之间的层级关系。除了嵌套选择器，Sass 还支持在嵌套规则中使用父选择器标识符 &。通过 &，可以引用父选择器，并与其他选择器进行组合。
例如，假设我们想为 .container 元素的链接样式添加一个悬停效果：
.container {
background-color: #f0f0f0;
padding: 10px;
a {
color: blue;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
这将生成以下 CSS 规则：
.container a {
color: blue;
text-decoration: none;
}
.container a:hover {
text-decoration: underline;
}
&:hover 使用了父选择器 .container 并与选择器 a 组合，生成了 .container a:hover 规则。
总的来说，Sass 的嵌套规则允许将样式规则嵌套在其他规则中，以创建更结构化的样式层级结构。嵌套规则还支持使用父选择器标识符 &，以引用父选择器并与其他选择器组合。这样的编写风格可以使样式表更易读和维护。
部分代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套规则</title>
<link rel="stylesheet" href="../css/rule.min.css">
</head>
<body>
<!--
sass的嵌套规则
.wp{
background:f69;
h1{
color:#333;
}
p{
color:#333;
}
}
以上嵌套规则最终会被编译为后代选择器的形式，因此嵌套不宜过深
属性嵌套:凡是可以进行拆分的属性，都可以使用属性嵌套，注意属性名
后面的冒号（:）要和{}用空格分开。
border: {
width: 2px;
style:solid ;
color: #f00;
}
父选择器的标识符 &， &表示当前的父选择器
-->
<div class="wp">
<h2>饿了</h2>
<p>但是不知道吃啥哎</p>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
$w:200px;
$col:#f60;
.wp{
width: $w;
height: $w;
background: $col;
h2,p{
color: #fff;
}
h2{
text-decoration: underline;
}
p{
height: 100px;
background: #ccc;
transition: all 2s ;
}
margin: {
top: 40px;
right: auto;
bottom: 30px;
left: auto;
}
border: {
width: 2px;
style:solid ;
color: #f00;
}
// &表示当前的父元素 .wp
&:hover{
background: pink;
}
&:hover p {
background: rgb(227, 115, 134);
}
}
混合器
混合器的作用，是吧相同的css样式提取出来，单独设置成一个模块，使用方便
使用混合器
使用混合器 @mixin
语法
@mixin name{
css样式代码
}
其中，name就是混合器的名字，他是一个变量，命名规则同 变量的命名规则
使用混合器
@include name; 通过@include 把混合器的名字引入到使用混合器的位置
复杂的混合器
混合器也可以接受参数
定义/使用
1.定义混合器
@mixin name（arg1，arg2，arg3.。。）{
css样式代码
}
（）中的arg 列表，就是混合器的参数，由于他们只是形式上的参数，不具备
任何意思，因此称为 形参列表
注意：参数的本质也是变量，因此需要$开头
2.使用混合器
@include name（val1，val2，。。。）
val列表，是实际上的数据，因此称为实参列表
形参和实参是一一对应的
下面是部分代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>混合器</title>
<link rel="stylesheet" href="../css/mixin.css">
</head>
<body>
<!--
混合器的作用，是吧相同的css样式提取出来，单独设置成一个模块，使用方便
使用混合器 @mixin
语法
@mixin name{
css样式代码
}
其中，name就是混合器的名字，他是一个变量，命名规则同 变量的命名规则
使用混合器
@include name; 通过@include 把混合器的名字引入到使用混合器的位置
复杂的混合器
混合器也可以接受参数
1.定义混合器
@mixin name（arg1，arg2，arg3.。。）{
css样式代码
}
（）中的arg 列表，就是混合器的参数，由于他们只是形式上的参数，不具备
任何意思，因此称为 形参列表
注意：参数的本质也是变量，因此需要$开头
2.使用混合器
@include name（val1，val2，。。。）
val列表，是实际上的数据，因此称为实参列表
形参和实参是一一对应的
-->
<div class="wp1"></div>
<div class="wp2"></div>
<div class="wp3"></div>
<div class="wp4"></div>
</body>
</html>*{
margin: 0;
padding: 0;
}
$w:200px;
$m:20px;
// 创建一个混合器
@mixin rule{
width: 200px;
height: 200px;
margin: 20px auto;
}
@mixin runing($a,$b,$c) {
width: $a;
height: $b;
margin: $c auto;
}
.wp1{
// 使用混合器
@include rule;
background: pink;
}
.wp2{
@include rule;
background: rgb(241, 30, 65);
}
.wp3{
@include runing($w,$w ,$m );
background: rgb(30, 93, 241);
}
.wp4{
@include runing($w, $w,$w );
background: rgb(30, 241, 237);
}
1148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
