一文搞懂css、scss、tailwindcss区别

近日见闻

1. 首届字节跳动开源 OpenDay 将于10月21日在北京大钟寺工区举办。 --字节
2. Ubuntu 23.10 “Mantic Minotaur” 再度亮相，搭载了 GNOME 45，以及众多引人瞩目的升级。 --Linux社区

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 等）良好集成，并有许多相关的插件和工具来帮助更好地集成到这些框架中。