学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学，可以点心心支持一下哈
一、sass是什么
Sass官方文档 www.sasscss.com/guide
sass是一种css预处理语言，由Ruby语言开发，比css多出很多功能（变量、嵌套、运算、混入、继承、指令、函数）更容易阅读
sass的工作方式是，在sass源文件中写代码，然后由sass程序（sass编译器）将其转化成css文件
二、sass和scss 的关系
sass 的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到sass 里面，因此 sass 语法进行了改良，sass 3就变成了scss(sassy css)。与原来的语法兼容，只是用 { } 取代了原来的缩进，更像css写法。（以前版本使用缩进风格 sass，最新版本改为{ } scss）
三、sass（scss）和less的区别
(1)编译环境不同
sass需要Ruby环境，日常开发使用sass插件（Live Sass Compiler或其他）（运行在服务器端）
less基于JavaScript，需要引入less.js来处理代码输出css（客户端运行，也就是浏览器运行）
(2)变量符不同
sass: $color:#000;
less: @color:#000;
(3)输出风格不同
sass有四种输出风格：
nested:嵌套缩进的css代码
expanded:展开的多行的css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
(4)条件语句不同
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持
......
四、sass的使用
1. 安装Sass
首先，确保你已经安装了Sass。你可以使用以下命令在命令行中安装：
npm install sass -g
2. 基础语法
Sass的基础语法与CSS类似，但它引入了一些额外的特性：
原始 Sass 语法：
$primary-color: #3498db;
body
background-color: $primary-color;
转换为 SCSS 语法：
$primary-color: #3498db;
body {
background-color: $primary-color;
}
在 SCSS 中，使用分号 ; 表示语句的结束，而使用花括号 {} 表示代码块。这样的转换是相对简单的，因为 SCSS 更接近于常规的 CSS 语法。
在这个例子中，$primary-color 是一个变量，用于存储主题色。
3. 变量
使用变量可以方便地存储和重用值：
// styles.scss
$primary-color: #3498db;
$font-size: 16px;
body {
background-color: $primary-color;
font-size: $font-size;
}
这样，当需要更改主题色或字体大小时，只需更改变量的值即可。
4. 嵌套
使用嵌套可以更清晰地表示选择器的层级关系：
// styles.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
margin-right: 5px;
a {
text-decoration: none;
color: $primary-color;
&:hover {
text-decoration: underline;
}
}
}
}
}
嵌套规则让样式表更加易读，同时避免了重复书写选择器。
5. 混合（Mixin）
混合允许将一组样式组合成一个集合，并在需要时重复使用：
// styles.scss
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
.button {
@include border-radius(5px);
}
这里，@mixin定义了混合，@include使用了混合。这样可以避免在代码中多次写入相同的前缀。
6. 导入其他SCSS文件
使用@import语句可以将其他 SCSS 文件导入到当前文件中，实现代码模块化：
// styles.scss
@import "reset";
@import "variables";
@import "mixins";
7. 运算
scss 允许进行基本的数学运算：
// styles.scss
$base: 10px;
$padding: $base * 2;
.element {
margin: $base + 5px;
padding: $padding;
}
这样可以在样式表中进行数值计算，使得样式表更加灵活。
8. 条件语句
使用条件语句可以根据不同条件应用不同的样式：
// styles.scss
$width: 10px;
div {
width: $width;
height: $width;
@if $width > 5 {
background-color: red;
} @else {
background-color: blue;
}
}
9. 循环
使用循环可以重复应用样式：
// styles.scss
@for $counter from 1 through 5 {
.class-#{$counter} {
width: $counter * 10px;
}
}
这个例子中，通过循环生成了带有不同宽度的 CSS 类。
10. 注释
使用注释来增强代码的可读性：
// styles.scss
// This is a single-line comment
/*
This is a
multi-line comment
*/
$primary-color: #3498db;
body {
background-color: $primary-color;
}
11.编译
执行sass命令使其index.scss生成对应index.css
在终端执行该命令 sass sass.scss css/index.css
会将当前目录的index.scss 文件编译到css文件夹下，编译为对应css文件
也会生成对应.map文件，这个文件是用来干嘛的？
.map文件是一个json格式的文件，可以直接在浏览器中调试sass源文件。
每次修改index.scss文件都要执行命令进行编译有点麻烦
sass提供watch参数用于侦听某个scss文件以及文件夹
在终端执行该命令sass --watch sass.scss:css/index.css
这是一个更为详细的 SCSS 预处理器教程，涵盖了基础语法、变量、嵌套、混合、导入、运算、条件语句、循环等内容。希望对你的 SCSS 学习有所帮助！如果有其他问题，随时问我。