SCSS与CSS的区别

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指令，可以将样式应用到多个选择器上。

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

 

下面用代码进行详细解释

1.SCSS变量和混合器 (@mixin)

 // 定义变量
$button-bg-color: #3498db;
$red-button-bg-color: #e74c3c;

// 使用变量及混合（Mixins）
@mixin button-styles($bg-color) {
  background-color: $bg-color;
  padding: 10px 20px;
  border-radius: 5px;
}

.button {
  @include button-styles($button-bg-color);
  color: black; // 其他基础样式
}

.red-button {
  @include button-styles($red-button-bg-color);
  color: white; // 只更改特定的样式属性
}

2. 嵌套规则

.navbar {
  background-color: #333;

  .nav-item {
    display: inline-block;

    &.active {
      font-weight: bold;
    }
  }
}

3. 导入 (@import)

 // _variables.scss 文件包含变量声明
    @import 'variables';
    @import 'mixins';

// 使用导入的变量和混入
.title {
  color: $primary-color;
  @include font-size(2em);
}

4. 混合器 (@mixin)

@mixin font-size($size) {
  font-size: $size;
  line-height: 1.5 * $size;
}

5. 运算符和函数

$width: 100px;
.element-width {
  　　width: $width * 2; // 数值运算
}

.text-shadow {

       text-shadow: rgba(0, 0, 0, 0.5) 2px 2px; // 示例简单样式，SCSS支持更多复杂颜色函数如 darken(), lighten()

}

6. 继承 (@extend)

// 定义一个基础样式类

%base-button {

　　border: 1px solid #ccc;

　　padding: 8px 16px;

　　font-size: 14px;

　　text-align: center;

}

// 使用继承来创建扩展样式类

.button {

　　@extend %base-button; // 继承了%base-button的所有样式

　　background-color: #f0f0f0;

}

.primary-button {

　　@extend %base-button; // 同样继承了%base-button的所有样式

　　background-color: #3498db;

　　color: white;

}

// 编译后生成的CSS：

.base-button,

.button, .primary-button {

　　border: 1px solid #ccc;

　　padding: 8px 16px;

　　font-size: 14px;

　　text-align: center;

}

.button {

　　background-color: #f0f0f0;

}

.primary-button {

　　background-color: #3498db;

　　color: white;

}

7.条件语句与循环：SCSS支持条件语句@if、@for、@each、@while和@debug。

 scss
    $font-sizes: (small: 14px, medium: 16px, large: 18px);
    @each $size, $value in $font-sizes {
        .font-#{$size} {
            font-size: $value;
        }
    }
    编译后的CSS
    .font-small {
        font-size: 14px;
    }

    .font-medium {
        font-size: 16px;
    }

    .font-large {
        font-size: 18px;
    }

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

 SCSS
    @function color-inverse($color) {
        @return mix(white, $color, 100%);
    }

    body {
        background-color: color-inverse(black);
    }
    编译后的CSS:
    body {
        background-color: white;
    }