scss 和css 的区别 scss变量和css变量的区别

scss 和 css 的区别

  1. 语法差异

    • CSS 使用大括号 {} 和分号 ; 来定义样式规则和属性。
    • SCSS 使用了 Sass 的语法,它允许使用类似编程语言的结构,如变量、嵌套规则、混合(mixins)和继承等。
  2. 嵌套规则

    • 在 SCSS 中,你可以嵌套 CSS 规则,这使得代码更易读和组织。
    • 在 CSS 中,嵌套规则不被支持,你需要每个规则都分别书写。
  3. 变量

    • SCSS 允许你定义变量来存储颜色、字体、尺寸等,以便在整个样式表中重复使用。
  4. 混合(Mixins)

    • 在 SCSS 中,你可以定义混合,它类似于函数,可以重复使用一组样式规则。
    • CSS 中没有混合的概念,因此你需要手动复制粘贴相同的规则。
  5. 继承

    • SCSS 支持使用 @extend 关键字来继承一个 CSS 规则到另一个规则中。
    • CSS 中没有原生的继承机制。

scss变量和css变量的区别

  1. 语法和定义方式:

    • CSS变量: 使用--前缀来定义,例如:--primary-color: blue;
    • Sass变量: 使用$符号来定义,例如:$primary-color: blue;,只能在定义它们的作用域内使用。
  2. 动态性:

    • CSS变量: 可以在运行时动态修改和使用JavaScript进行操作。
      • element.style.setProperty("--main-color", "red");
    • Sass变量: 在编译时就会被解析并替换为其值,无法在运行时动态修改。
  3. 功能:

    • CSS变量: 提供了更大的灵活性,可以用于创建动态主题、响应式设计等。
    • Sass变量: 主要用于简化样式表中的重复内容,提高可维护性。sass 变量可以存储的内容更加丰富。
  4. 打包后:
    • CSS变量:

      • 在打包后的 CSS 文件中,CSS 变量将被保留为原样,因为它们的语法直接就是 CSS 的一部分,不需要转换或处理。
      • CSS 变量会保持全局作用域,可以在整个文档中使用和修改
    • Sass变量:
      • 在打包后的CSS文件中,Sass变量将被替换为它们的值,因为它们在编译时就被解析和处理了。
      • Sass 变量的作用域可能会受到影响。如果 Sass 变量在局部作用域中定义,那么在打包后的 CSS 文件中,它们只能在定义它们的选择器范围内使用。如果 Sass 变量被声明为全局变量,那么在打包后的CSS文件中,它们将在整个文件中有效

你可能感兴趣的:(css,scss,前端)