SCSS与CSS的区别

标签：SCSS 区别 color button font CSS size

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;
    }

 

                     

标签：SCSS,区别,color,button,font,CSS,size
From： https://www.cnblogs.com/flzs/p/18073598