Sass व्याख्या

您应该知道的

在继续之前，您应该对以下内容有基本的了解：

  • HTML
  • CSS

如果您想先学习这些科目，请在我们的 主页 上访问这些教程。

什么是 Sass？

  • Sass 指的是 Syntactically Awesome Stylesheet（语法超棒的样式表）
  • Sass 是一种 CSS 扩展
  • Sass 是一种 CSS 预处理器
  • Sass 完全兼容所有版本的 CSS
  • Sass 减少了 CSS 的重复，从而节省了时间
  • Sass 由 Hampton Catlin 设计，并由 Natalie Weizenbaum 于 2006 年开发
  • Sass 可以免费下载和使用

为什么要使用 Sass？

样式表越来越大、越来越复杂，也越来越难维护。这是 CSS 预处理器可以提供帮助的地方。

Sass आपको CSS में मौजूद नहीं होने वाली विशेषताओं, जैसे वेरियेबल, निहित नियम, mixin, आयात, अधिरक्षा, बुद्धिमान फ़ंक्शन और अन्य विशेषताओं का उपयोग करने की अनुमति देता है。

Sass के बारे में एक अच्छा उदाहरण

Sass का एक साधारण उदाहरण

सोचिए, हमारे वेबसाइट में तीन प्रमुख रंग हैं:
#a2b9bc
#b2ad7f

#878f99

तो, आपको ऊपर दिए गए इस मान को कई बार टाइप करना होगा, नहीं तो? अगर एक ही रंग परिवर्तित होता है तो?

Sass 实例

/* मूल रंग के लिए वेरियेबल को परिभाषित करने के लिए */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

तो, Sass का उपयोग करते समय, यदि मूल रंग परिवर्तित होता है, तो आपको केवल एक स्थान पर इसे बदलना होगा।

Sass 是如何工作的？

浏览器不理解 Sass 代码。因此，您需要一个 Sass 预处理器来将 Sass 代码转换为标准 CSS。

这个过程称为转译（transpiling）。所以，您需要为转译器（某种程序）提供 Sass 代码，然后取回 CSS 代码。

提示：转译是一个术语，用于将用一种语言编写的源代码转换/翻译成另一种语言。

Sass 文件类型

Sass 文件的文件扩展名是 ".scss"。

Sass 评论

Sass 支持标准的 CSS 注释 /* comment */，此外还支持行内注释 // comment：

Sass 实例

/* 定义主要的颜色 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header {
  background-color: $primary_1; // 您可以在这里添加行内的评论
}