CSS和SCSS的区别

CSS（Cascading Style Sheets）和 SCSS（Sassy CSS）有以下一些区别：
 
1. 语法：
 
- CSS 使用传统的纯 CSS 语法规则。
- SCSS 是 Sass 的一种语法格式，它基于 CSS 语法，并增加了一些功能，如变量、嵌套规则、混合（Mixin）、函数、继承等。SCSS 的语法看起来更类似于传统的编程语言。
2. 变量：
 
- CSS 没有内置的变量功能。
- SCSS 允许定义变量，例如： $primary-color: #007bff;  ，然后在样式中使用该变量： color: $primary-color;  。
3. 嵌套：
 
- CSS 不支持嵌套规则。
- SCSS 支持嵌套，使样式结构更具逻辑性和层次分明。例如：
 
.nav {
    ul {
        list-style-type: none;
    }

    li {
        display: inline-block;
    }
}
 
4. 混合（Mixin）：
 
- CSS 没有混合的概念。
- SCSS 中的混合可以复用一组样式。定义一个混合：
 
@mixin bordered {
    border: 1px solid black;
}
 
 
然后在其他地方使用：

.box {
    @include bordered;
}
 
5. 运算：
 
- CSS 不能进行数值运算。
- SCSS 支持简单的数学运算，如： width: 100% - 20px;  。
6. 继承：
 
- CSS 有  @extend  规则，但使用有限。
- SCSS 的继承更强大和灵活。
7. 导入：
 
- CSS 使用  @import  ，但可能会导致性能问题，尤其是在多个文件中。
- SCSS 的导入更智能，可以将多个 SCSS 文件组合编译为一个 CSS 文件。
 
总的来说，SCSS 提供了更强大、更结构化和可维护的方式来编写样式表，而 CSS 则更简单直接。SCSS 最终需要编译为 CSS 才能在浏览器中使用。