sass基础

1.sass基础介绍
css扩展语言，在正常的编写css的基础上，增加了很多变量，函数，循环，判断等类似编程语言的代码模式。
2.安装sass环境

安装环境以后可以直接对sass文件进行编译了，两种文件后缀名.sass和.scss,区别就是{}和；
.scss文件（常用）
h1 {
   width: 100px;
   height: 200px;
}
.sass文件
h1

width: 100px
height: 200px

3.实时监控目录
监视文件夹变化的命令：sass --watch 被编译的文件所在文件夹:编译后文件所在文件夹
只要你修改 sass 文件夹下的内容，就会实时的相应在 css 文件夹中，但是你删除一个文件，css 文件夹中不会自动删除，需要我们自己手动删除。
实践结果：
.scss文件

实时编译后：

4，注释和变量
4.1注释
//编译的时候不会被编译的注释
/ /编译的时候会被编译的注释
/！ /强力注释
4.2 sass中用$来定义变量
一般用来定义变量和常用像素值
5.嵌套规则

编译结果如下：

6.连接符&
Sass中，使用&符号来表示父级选择器，这可以使代码更加灵活和可读性更强。
7.群组嵌套
多个标签同时嵌套

编译结果如下：

8.混合器
定义一个 “函数” 在 scss 文件中使用（ @mixin 关键字）
语法：@mixin 函数名{函数代码}
调用语法：@include 函数名;
8.1 混合器传参
语法：@mixin 函数名(形参){函数代码中可以使用形参}
调用语法：@include 函数名(实参);
写了多少个 “形参”，那么调用的时候就要传递多少个 “实参”
9.继承和导入
继承语法：@extend 被继承的选择器;
导入的语法：@import "路径";
问题回答：
Sass的优点是什么？
sass是css预处理器；在CSS的语法基础上增加了$变量,嵌套、混合、导入等高级功能，使用Sass以及Sass的样式库（如compass）可以更好地组织管理样式文件、以及更高效的开发项目。
优点：
用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。
解释SCSS和SASS之间的区别？
SCSS和SASS都是CSS的预处理器，它们都可以让开发者使用变量、嵌套、混合等功能来编写更清晰、可维护和可重用的CSS代码。
1.语法差异：SASS使用缩进来表示代码块。而SCSS则使用花括号{}和分号;来分隔代码块，更接近传统的CSS语法。
2.文件扩展名：SASS的文件使用.sass扩展名，而SCSS的文件使用.scss扩展名。
3.兼容性：SCSS更加兼容传统的CSS语法，因此可以更容易地将现有的CSS代码迁移到SCSS，而不需要进行大规模的重写。SASS的语法相对更加简洁，但不太兼容传统CSS，因此在迁移时需要更多的工作。
4.使用方式：由于SCSS的语法更接近于CSS，因此它更容易学习和使用，尤其是对于那些已经熟悉CSS的开发者。SASS的语法可能对一些人来说更具吸引力，因为它更简洁，但可能需要一些时间来适应。
Sass中的嵌套规则是什么？
在Sass中，使用&符号来表示父级选择器，这可以使代码更加灵活和可读性更强。同时，使用Sass嵌套规则还可以避免样式冲突和代码重复，提高开发效率和代码质量。需要注意的是，在使用Sass嵌套规则时，应该避免过度嵌套和选择器的复杂性，以保持代码的简洁和可维护性。
SASS中@extend指令的用途是什么？
在SASS中，@extend指令用于继承另一个选择器的所有样式。在当前选择器中重用另一个选择器的样式，而无需重复编写相同的样式代码。
Sass编写占位符选择器的方式是什么？
在Sass中，占位符选择器是一种特殊的伪类选择器，用于在编译时生成CSS代码。它们通常用于临时添加样式，而不影响页面布局或性能。占位符选择器使用%placeholder语法定义，可以在Sass文件中使用。
可以使用SASS多少种方法？
1.作为命令行工具：通过命令行界面使用SASS进行样式表的编译。
2.使用嵌套规则：通过将CSS选择器嵌套在一起，减少代码的层级结构并提高可读性。
3.使用变量：定义可在整个样式表中重复使用的变量，以便轻松更改样式属性。
4.使用混合：创建可重复使用的样式片段，并在整个样式表中重用它们。
5.使用继承：使用@extend指令将一个选择器的所有样式继承到另一个选择器中。
6.使用函数：创建自定义函数来处理值和计算结果，以便在样式表中重复使用。
列出SASS中不同类型的运算符？
赋值运算符：用于给变量赋值。例如，“$var: value;”。
数学运算符：包括加（+）、减（-）、乘（*）、除（/）和模（%）。
比较运算符：用于比较两个值的大小关系，包括大于（>）、小于（<） 、大于等于（>=）、小于等于（<=）、等于（==）和不等于（!=）。
字符串运算符：通过连字符（+）或插值符（#{}）连接字符串。
布尔运算符：包括逻辑与（and）、逻辑或（or）和逻辑非（not）。
特殊运算符：包括@extend、@mixin、@include等，用于扩展、混合和包含样式。