SCSS常用样式，好看的样式

SCSS（Sass CSS）是一种预处理器语言，它扩展了CSS的功能，使样式表的编写更加模块化、可维护和高效。在这个主题中，“SCSS常用样式，好看的样式”主要涉及的是如何使用SCSS来创建既实用又美观的CSS样式。 1. **变量**：在SCSS中，我们可以定义变量来存储颜色、尺寸、字体等值，避免在代码中重复输入，提高可维护性。例如，`$primary-color: #333;`，然后在需要的地方使用`color: $primary-color;`。 2. **嵌套规则**：SCSS允许我们将CSS选择器嵌套在其他选择器内，使得代码结构更清晰。如 `.container { .child { ... }}`，这代表`.container`内的`.child`元素的样式。 3. **混合（Mixins）**：混合允许创建可重用的样式块。例如，定义一个`@mixin border-radius($radius)`，然后在需要圆角的元素上使用`@include border-radius(5px);`。 4. **函数（Functions）**：SCSS提供了内置函数，如`lighten()`和`darken()`调整颜色亮度，`percentage()`将数值转换为百分比等。用户也可以自定义函数。 5. **选择器继承**：使用`@extend`关键字，一个选择器可以继承另一个选择器的所有样式，减少代码冗余。例如，`.base-style { ... }`, `.special-style { @extend .base-style; ... }`。 6. **嵌套媒体查询**：SCSS允许在选择器内部嵌套媒体查询，如 `@media (max-width: 600px) { .my-element { ... } }`，使得响应式设计更易管理。 7. **列表（Lists）** 和 **映射（Maps）**：SCSS支持数据结构，如列表（用于存储一系列值）和映射（键值对）。这对于处理多值属性（如过渡或动画）非常有用。 8. **导入指令**：使用`@import`，你可以将样式分块到多个文件中，然后在主文件中导入它们，提高代码组织性。 9. **控制指令**：如`@if`、`@for`、`@each`和`@while`，提供了条件语句和循环，增强样式表的逻辑性。 10. **部分（Partials）**：以`_`开头的文件是部分文件，通常用于存储可重用的样式代码，不直接编译成CSS，而是通过`@import`引入。 在“pages”和“common”这两个文件夹中，可能分别包含了不同页面的样式和通用组件的样式。例如，“pages”可能包含每个页面特有的SCSS文件，而“common”则可能包含像导航栏、按钮、模态框等跨页面复用的样式代码。通过合理的组织和利用SCSS特性，这些样式既保持了一致性，又易于维护和扩展。