一文搞懂css、scss、tailwindcss区别

  • 2023/10/13
  • 阅读时间 1 分钟

近日见闻

  1. 首届字节跳动开源 OpenDay 将于10月21日在北京大钟寺工区举办。 –字节

  2. Ubuntu 23.10 “Mantic Minotaur” 再度亮相，搭载了 GNOME 45，以及众多引人瞩目的升级。 –Linux社区

  3. 华为云云容器引擎服务（Cloud Container Engine，简称CCE）Kubernetes 版本支持策略将进行优化，从 Kubernetes 1.27 版本开始，CCE 将对每个社区版本均提供商用支持。 CCE 集群1.27版本计划于2023年10月正式商用，CCE 集群1.28版本计划于2023年12月支持。–华为云原生团队

Scss和CSS区别

SCSS（Sassy CSS）和 CSS（Cascading Style Sheets）是两种用于定义网页样式的语言，它们之间有一些关键的区别：

语法:

  • CSS: CSS 使用基本的规则集，其中选择器、属性和值之间使用分号和大括号来定义。CSS 的语法相对较简单，但对于复杂的样式和布局可能需要编写大量的冗长代码。

  • SCSS: SCSS 是 CSS 的一种预处理器，它引入了更丰富的语法和功能，包括变量、嵌套规则、混合（mixins）、函数等。SCSS 使用与 CSS 类似的语法，但它更灵活和易于维护，允许你编写更复杂的样式规则。

可重用性:

  • CSS: CSS 在样式的重用性方面相对较弱。虽然你可以使用类选择器来定义样式，但要实现可重用性，通常需要手动编写和维护一组类或样式规则。

  • SCSS: SCSS 提供了混合（mixins）和函数的功能，允许你创建可重用的样式代码块，从而降低了代码的重复性，提高了可维护性。

变量:

  • CSS: CSS 没有原生的变量支持，因此颜色、字体、间距等值通常需要在多个地方多次重复定义，难以统一和更改。

  • SCSS: SCSS 允许你定义变量，将这些变量用于整个样式表，从而实现值的统一管理和修改。

嵌套规则:

  • CSS: 在 CSS 中，如果要定义嵌套的选择器，你需要使用复杂的选择器名称，如 .parent .child。

  • SCSS: SCSS 允许你使用嵌套规则，将子元素的样式嵌套在父元素内，使样式表的结构更加清晰。

维护性:

  • CSS: 随着项目的增长，纯 CSS 可能会变得难以维护，因为它缺乏模块化和结构性。

  • SCSS: SCSS 提供了更好的结构性，使样式表更易于维护。它支持分离和组织样式规则，以及创建可重用的样式代码块。

Scss、Tailwindcss区别

SCSS（Sassy CSS）:

  • 语法接近 CSS： SCSS 使用类似于标准 CSS 的语法，使用大括号和分号，这使得它更易学习和迁移现有的 CSS 代码。

  • 编程性和灵活性： 与 Sass 类似，SCSS 具有编程性的特性，如变量、嵌套、混合（mixins）和条件语句，允许你编写更加灵活和可维护的样式代码。

  • 手动编写样式： 使用 SCSS 需要手动编写 CSS 规则，即你需要明确地编写每个元素的样式规则和选择器。

  • 独立性： SCSS 是一种独立的 CSS 预处理器，可以与任何前端框架或库一起使用。

Tailwind CSS:

  • Utility-First CSS： Tailwind CSS 是一种"实用优先"的 CSS 框架，提供了一组预定义的 CSS 类，用于构建页面组件和样式。你通过组合和应用这些类来创建样式，而不需要手动编写自定义的 CSS 规则。

  • 快速开发： Tailwind CSS 能够快速加速前端开发，因为你不必从头开始编写样式，而是通过应用现有的类来创建样式。

  • 可定制性： 尽管 Tailwind CSS 提供了一套默认的 CSS 类，但它也非常可定制。你可以根据项目需求自定义颜色、间距、字体、阴影等方面的样式。

  • 集成性： Tailwind CSS 通常与现代前端框架（如 Vue.js、React 等）良好集成，并有许多相关的插件和工具来帮助更好地集成到这些框架中。

10月