【SCSS入门】1、什么是SCSS？

一只小爪磕

已于 2024-06-08 01:14:45 修改

阅读量1.3k

点赞数 17

分类专栏： SASS专栏前端教学-爪磕文章标签： scss 前端 css html5 javascript css3

于 2024-06-07 01:04:43 首次发布

本文链接：https://blog.csdn.net/weixin_52938153/article/details/139251874

版权

前端教学-爪磕同时被 2 个专栏收录

98 篇文章 4 订阅

订阅专栏

SASS专栏

20 篇文章 2 订阅

订阅专栏

【SCSS入门】什么是SCSS？

系列文章目录

【SCSS入门】1、什么是SCSS？（本文）
【SCSS入门】2、安装和配置SCSS环境
 【SCSS入门】3、SCSS的基本语法
 【SCSS入门】4、变量的使用
 【SCSS入门】5、嵌套规则
 【SCSS入门】6、部分文件和导入
 【SCSS入门】7、混合宏（Mixins）
【SCSS入门】8、继承（Inheritance）
【SCSS入门】9、运算和函数
 【SCSS入门】10、编译和调试SCSS

在现代前端开发中，CSS是不可或缺的一部分。然而，随着项目复杂度的增加，纯CSS在代码组织和复用性方面的不足逐渐显现出来。为了解决这些问题，出现了各种预处理器，而SCSS就是其中最受欢迎的一种。

什么是SCSS？

SCSS，全称是Sassy CSS，是Sass（Syntactically Awesome Stylesheets）的一种语法扩展。Sass是一种CSS预处理器，添加了许多编程语言的特性，使CSS更加动态和灵活。SCSS与CSS完全兼容，这意味着所有有效的CSS代码也是有效的SCSS代码。

SCSS的特点

变量：允许你定义变量来保存颜色、字体、尺寸等，使代码更加模块化和易维护。
嵌套：支持嵌套规则，反映HTML结构，使代码更加直观。
部分文件和导入：支持将CSS代码分割成多个文件，然后通过@import语句导入，增强代码的组织性。
混合宏（Mixins）：允许定义可复用的样式块，减少代码冗余。
继承：支持样式继承，增强样式复用性。
运算和函数：支持数学运算和定义函数，增强样式的动态性。

SCSS与CSS的对比

特性	CSS	SCSS
变量	不支持	支持
嵌套规则	不支持	支持
部分文件和导入	不支持	支持
混合宏	不支持	支持
继承	不支持	支持
运算和函数	不支持	支持

SCSS的历史背景

Sass由Hampton Catlin在2006年创建，最初的语法叫做“缩进语法”，类似于Haml。为了让更多的开发者接受，Chris Eppstein和Natalie Weizenbaum在2010年引入了SCSS语法，这种语法更类似于CSS，从而更容易被现有的CSS开发者接受。

版本演变

Sass 3.0：引入了SCSS语法，使Sass更具灵活性和兼容性。
Sass 3.3：引入了新特性，如嵌套导入、父选择器等。
Sass 3.4：增强了选择器继承和条件指令。
Dart Sass：现代的Sass实现，使用Dart语言编写，具有更快的编译速度和更好的跨平台支持。

SCSS的优势

1. 提高代码复用性

通过变量、混合宏和继承，SCSS可以显著提高代码的复用性，减少重复代码，使样式更加模块化和易维护。

2. 增强代码可读性

SCSS的嵌套规则和部分文件导入特性，使得样式代码能够更好地反映HTML结构，增强代码的可读性和组织性。

3. 支持高级功能

SCSS支持运算和函数，使得样式可以根据逻辑条件动态生成，增强了样式的灵活性和动态性。

4. 兼容性强

SCSS完全兼容CSS，因此你可以逐步将现有的CSS代码迁移到SCSS，而不需要一次性重写所有样式。

一个简单的SCSS示例

下面是一个简单的SCSS示例，展示了SCSS的基本特性。

SCSS代码：

$primary-color: #333;

body {
  font: 100% Helvetica, sans-serif;
  color: $primary-color;

  header {
    background-color: $primary-color;
    .logo {
      width: 300px;
    }
  }

  a {
    color: $primary-color;
    &:hover {
      color: lighten($primary-color, 20%);
    }
  }
}

编译后的CSS代码：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

body header {
  background-color: #333;
}

body header .logo {
  width: 300px;
}

body a {
  color: #333;
}

body a:hover {
  color: #666666;
}