Sass 教程关于如何使用 SASS 改进 CSS 的完整教程

如果你使用 CSS，学习 SASS 将节省大量时间、代码和精力。它本质上就是 CSS，但功能更多。虽然 SASS 已经存在一段时间了，但了解并理解其内部原理以及如何充分发挥其潜力仍然很有益处。

SASS 是经过预处理的 CSS，拥有嵌套、变量、混合等功能。用 SASS 编写代码，然后将其编译为 CSS，最终结果（CSS）相同，但预处理的 SASS 具有更大的灵活性。

嵌套意味着您可以执行以下操作：

// CSS 是手动的，并且严格
.css { 颜色：红色； }
.css .doesnt { 颜色：深红色； }
.css .doesnt .let .you { color:verydarkred; }
.css .doesnt .let .you { color:veryverydarkred; }
.css .doesnt .let .you .nest { 颜色：veryveryverydarkred; }

// SASS 允许您执行值和嵌套！
$颜色：红色；
.sass {
  颜色：$color；
  .让{
    颜色：变暗（$color，10％）；
    。你 {
      颜色：变暗（$color，20％）；
      .nest { 颜色：变暗（$color,40%）；
}}}}

感谢@CD修复我的示例:)

如果您想了解更多信息，请观看视频，其中涵盖以下内容：

• 在括号中设置 Sass
• CSS和SASS之间的区别
• 嵌套的工作原理
• 使用变量
• 应用 mixins 和 extends
• 使用 & 运算符

在他们的网站上查看有关 SASS 的更多信息：
https://sass-lang.com/

想要了解更多：

我会尽力每天发布新的精彩内容。以下是最新内容：

• 4 个简单的 CSS 悬停过渡效果，适用于元素背景
• 如何通过 CSS 新媒体调用实现暗黑模式：prefers-color-scheme
• 为什么你应该在白板上完成你的设计与开发、UI 和 UX
• 创建并开发移动设计

关注并支持我：

Adrian @ Youtube
Adrian @ Patreon
Adrian @ Twitter

附言：有人知道如何在 dev.to 上为“pre”代码添加颜色吗？