SCSS与CSS的区别

源码资源网

[size=13.3333px]SCSS（Sassy CSS）是一种CSS预处理器，它扩展了CSS的功能，并为样式表的编写提供了额外的便利性。以下是两者之间的主要区别：

1. 语法扩展：
          CSS标准层叠样式表语言，采用简单、扁平化的键值对形式书写。
         SCSS基于CSS语法之上增加了嵌套规则、变量、混入（mixins）、继承等高级特性，代码结构更加类似编程语言。

2. 变量
          CSS不支持变量定义和使用。
         SCSS支持变量定义，可以声名$variable:value;并在样式中重复引用，方便颜色、尺寸和其他值的统一管理和修改。

3. 嵌套规则
        CSS中的选择器是扁平化的，每个选择器独立书写。
       SCSS允许选择器嵌套，这样可以更好地反映HTML结构，并减少重复代码；

4.导入（@import）
         CSS的@import主要用于合并多个CSS文件。但可能会导致额外的HTTP请求，降低性能。
        SCSS的@import不仅能合并文件。而且在编译时会被处理成一个CSS文件。同时支持导入其他SCSS文件并合并其变量、混入等。

5.混合器（@mixin）
         CSS不具备此功能。
         SCSS提供混合功能，可以创建可重用的样式块。包括带有参数的样式模板，可以在多个地方调用以避免重复代码。
6.运算符和函数
        CSS不支持继承。
　　SCSS允许在样式中执行简单的算术计算。如颜色函数、数值运算等。
7.继承(@extend)
　　CSS需要通过类名的层叠或使用通用选择器来实现样式继承。
　　SCSS 提供了明确的@extend指令，可以将样式应用到多个选择器上。

[size=13.3333px]总结来说，SCSS作为一种预处理器，增强了CSS语言的功能性和可编程性。

下面用代码进行详细解释
1.SCSS变量和混合器 (@mixin)

1. // 定义变量
   
2. $button-bg-color: #3498db;
   
3. $red-button-bg-color: #e74c3c;
   
4. 
   
5. // 使用变量及混合（Mixins）
   
6. @mixin button-styles($bg-color) {
   
7.   background-color: $bg-color;
   
8.   padding: 10px 20px;
   
9.   border-radius: 5px;
   
10. }
    
11. 
    
12. .button {
    
13.   @include button-styles($button-bg-color);
    
14.   color: black; // 其他基础样式
    
15. }
    
16. 
    
17. .red-button {
    
18.   @include button-styles($red-button-bg-color);
    
19.   color: white; // 只更改特定的样式属性
    
20. }

复制代码

[size=13.3333px]2. 嵌套规则

1. .navbar {
   
2.   background-color: #333;
   
3.   
   
4.   .nav-item {
   
5.     display: inline-block;
   
6.    
   
7.     &.active {
   
8.       font-weight: bold;
   
9.     }
   
10.   }
    
11. }

复制代码

[size=13.3333px]3. 导入 (@import)

1. // _variables.scss 文件包含变量声明
   
2.     @import 'variables';
   
3.     @import 'mixins';
   
4. 
   
5. // 使用导入的变量和混入
   
6. .title {
   
7.   color: $primary-color;
   
8.   @include font-size(2em);
   
9. }

复制代码

[size=13.3333px]4. 混合器 (@mixin)

1. @mixin font-size($size) {
   
2.   font-size: $size;
   
3.   line-height: 1.5 * $size;
   
4. }

复制代码

[size=13.3333px]5. 运算符和函数

1. $width: 100px;
   
2. .element-width {
   
3.   　　width: $width * 2; // 数值运算
   
4. }
   
5. 
   
6. .text-shadow {
   
7.        text-shadow: rgba(0, 0, 0, 0.5) 2px 2px; // 示例简单样式，SCSS支持更多复杂颜色函数如 darken(), lighten()
   
8. }

复制代码

[size=13.3333px]6. 继承 (@extend)

1. // 定义一个基础样式类
   
2. %base-button {
   
3. 　　border: 1px solid #ccc;
   
4. 　　padding: 8px 16px;
   
5. 　　font-size: 14px;
   
6. 　　text-align: center;
   
7. }
   
8. 
   
9. // 使用继承来创建扩展样式类
   
10. .button {
    
11.   　　@extend %base-button; // 继承了%base-button的所有样式
    
12.   　　background-color: #f0f0f0;
    
13. }
    
14. 
    
15. 
    
16. .primary-button {
    
17.   　　@extend %base-button; // 同样继承了%base-button的所有样式
    
18.   　　background-color: #3498db;
    
19.   　　color: white;
    
20. }
    
21. 
    
22. 
    
23. // 编译后生成的CSS：
    
24. .base-button,
    
25. .button, .primary-button {
    
26.   　　border: 1px solid #ccc;
    
27.   　　padding: 8px 16px;
    
28.   　　font-size: 14px;
    
29.   　　text-align: center;
    
30. }
    
31. 
    
32. 
    
33. .button {
    
34.   　　background-color: #f0f0f0;
    
35. }
    
36. 
    
37. 
    
38. .primary-button {
    
39.   　　background-color: #3498db;
    
40.   　　color: white;
    
41. }

复制代码

[size=13.3333px]7.条件语句与循环：SCSS支持条件语句@if、@for、@each、@while和@debug。

1. scss
   
2.     $font-sizes: (small: 14px, medium: 16px, large: 18px);
   
3.     @each $size, $value in $font-sizes {
   
4.         .font-#{$size} {
   
5.             font-size: $value;
   
6.         }
   
7.     }
   
8.     编译后的CSS
   
9.     .font-small {
   
10.         font-size: 14px;
    
11.     }
    
12. 
    
13.     .font-medium {
    
14.         font-size: 16px;
    
15.     }
    
16. 
    
17.     .font-large {
    
18.         font-size: 18px;
    
19.     }

复制代码

[size=13.3333px]8.自定义函数：SCSS提供了一系列内置函数，同时也支持自定义函数。例如，自定义颜色反转函数：

1. SCSS
   
2.     @function color-inverse($color) {
   
3.         @return mix(white, $color, 100%);
   
4.     }
   
5. 
   
6.     body {
   
7.         background-color: color-inverse(black);
   
8.     }
   
9.     编译后的CSS:
   
10.     body {
    
11.         background-color: white;
    
12.     }

复制代码