【SCSS基础知识】
SCSS，全称“Sassy CSS”，是CSS预处理器的一种，它扩展了CSS语言，增加了变量、嵌套规则、混合、函数等特性，使得CSS编写更加模块化、可维护性更强。 Sass-project是一个基于SCSS的项目模板，通过这个项目，我们可以深入学习SCSS的用法和最佳实践。
1. **变量（Variables）**：SCSS允许我们定义变量，通常以`$`开头，用于存储颜色、尺寸、字体等值，这样在多个地方使用时只需要修改一处即可。例如：
```scss
$primary-color: #007bff;
body {
background-color: $primary-color;
}
```
2. **嵌套规则（Nesting）**：SCSS允许我们在选择器内部嵌套其他选择器，使代码结构更清晰。如：
```scss
.navbar {
.brand {
color: white;
}
}
```
编译后会生成：
```css
.navbar .brand {
color: white;
}
```
3. **混合（Mixins）**：混合可以理解为函数，可以将一组CSS样式封装起来，然后在需要的地方调用。例如创建一个圆角混合：
```scss
@mixin border-radius($radius) {
border-radius: $radius;
}
.button {
@include border-radius(5px);
}
```
4. **导入（@import）**：SCSS支持导入其他SCSS文件，方便组织和管理代码。例如：
```scss
@import 'variables';
@import 'mixins';
```
5. **嵌套媒体查询（Nested Media Queries）**：SCSS允许在CSS规则内部嵌套媒体查询，使代码更易读：
```scss
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
```
6. **运算符（Operators）**：SCSS支持数学运算，如加减乘除，用于计算像素值、百分比等：
```scss
width: 100px + 20px; // 结果为120px
```
7. **选择器继承（Selector Inheritance）**：子选择器可以继承父选择器的属性，避免重复代码：
```scss
.parent {
color: red;
}
.child {
@extend .parent;
font-weight: bold;
}
```
编译后：
```css
.parent, .child {
color: red;
}
.child {
font-weight: bold;
}
```
8. **列表（Lists）**：SCSS允许创建和操作列表，可用于处理多值的情况：
```scss
$font-stack: Georgia, "Times New Roman", Times, serif;
body {
font-family: $font-stack;
}
```
9. **映射（Maps）**：映射类似于键值对，可用于存储相关数据：
```scss
$colors: (primary: #007bff, secondary: #6c757d);
.text-primary {
color: map-get($colors, primary);
}
```
10. **函数（Functions）**：SCSS提供了内置函数，如`lighten()`、`darken()`等，也可以自定义函数来处理复杂的样式计算。
通过`sass-project-main`这个项目，你可以实践上述SCSS特性，理解其工作原理，并了解如何在实际项目中应用。同时，项目可能还包含了编译配置（如使用Gulp或Webpack进行自动化构建）、模块化组织（如使用BEM命名法）等内容，这些都是现代前端开发的重要组成部分。通过深入研究和实践这个项目，你的SCSS技能将得到显著提升。
sass-project-main.zip （5个子文件） 
sass-project-main 
_app.scss 136B
