SASS 完整形式

SASS 代表Syntactically Awesome Style Sheets 。它由 Hampton Catlin 设计，由 Natalie Weizenbaum 开发。 Sass 是一个 CSS 预处理器。 Sass 减少了 CSS 的重复，从而节省了时间。它是一种样式表语言。它与所有版本的 CSS 完全兼容。

它是一种允许您以更方便、更有效的方式编写 CSS 的语言。 Sass的写法有两种，一种是使用SASS语法，另一种是SCSS语法。它允许您编写 DRY(不要重复自己)代码，以便代码更快、更高效且更易于维护。

何时使用 SASS?
当样式表更大、更复杂、更难维护时，可以使用 CSS 预处理器 SASS。 SASS 允许您使用 CSS 中不存在的功能，例如变量、嵌套规则、mixin、导入、继承、内置函数和其他东西。

SASS的特点：

• Sass 与 CSS 完全兼容。
• 它比 CSS 强大。
• 它是 CSS 的超集。
• 它编译为可读的 CSS。
• 它支持变量、嵌套和混合。

示例： CSS

//CSS
.header {
  width: 100%;
}
.header ul {
  padding: 30px;
}
.header ul li {
  font-size: 25px;
}
.header ul li.first {
  color: green;
  font-weight: bold;
}
.header ul li.sec {
  color: blue;
}

示例： SASS

//SASS
//The above css can be written in sass without repetition
.header
{
width:100%;
  ul{
    padding:30px;
    li{
      font-size:25px;
      &.first{
        color:green;
        font-weight:bold;
      }
      &.sec{
        color:blue;
      }
    }
  }
}

//html


SASS
SCSS

输出：

SASS的优点：

• 比 CSS 少写。
• 允许您重用代码。

SASS的缺点：

• 浏览器不理解 SASS，因此必须将其转换为 CSS。
• 很难排除故障。