当我第一次听说萨斯和其他CSS预处理器时, 我的想法并不是很热情. “为什么我们需要另一个工具来实现已经像CSS一样漂亮的东西呢?”. “我不会用那个的。”. “我的CSS已经足够有序，不需要它了”. “预处理器是为那些不知道如何编写CSS的人准备的 知道如何编写CSS 你不需要预处理器。”. 毕竟，处理器是为那些不知道如何编写CSS的人准备的. 如果有，他们就不需要预处理器了。”. 有一段时间，我一直躲着他们，直到 强迫 在几个项目中使用它.

直到最近我才意识到我是多么喜欢和萨斯一起工作, 当我不得不在一个项目中切换回普通的CSS时. 在那段时间里, 我学到了很多，所以我决定赞美萨斯，让这个世界变得更美好, 让你成为更快乐的人!

为什么要使用萨斯?

组织:@ import

我刚刚提到的这个项目, 大型电子商务网站, 有一个单独的CSS文件7184行未压缩的样式声明. 是的，你没看错:七千一百八十四行CSS. 我相信这不是最大的CSS文件 前端开发人员 必须处理的问题，但它足够大，完全是一团糟.

这是您需要萨斯的第一个原因:它可以帮助您组织和模块化样式表. 它不是变量，也不是嵌套. 对我来说，萨斯的关键特性是局部的，以及它如何扩展CSS @import规则以允许它导入SCSS和萨斯文件. 在实践中，这意味着您将能够拆分庞大的样式.CSS文件分成几个更小的文件，这样更容易维护、理解和组织.

@import规则几乎和CSS本身一样长. 然而, 自从你在CSS文件中使用@import后，它就声名狼藉了, 触发单独的HTTP请求, 每个要导入的CSS文件对应一个. 这对站点的性能是有害的. 如果你把它和萨斯一起用，会发生什么呢? 如果你从来没有停下来思考过“预处理器”这个词是什么意思，现在是时候了.

预处理器是一种处理其输入数据以产生输出的程序，该输出用作另一个程序的输入. —维基百科

So, 回到@import规则, 这意味着@import将由萨斯处理，我们所有的CSS和SCSS文件将被编译成一个文件，最终将在我们的实时站点中结束. 用户只需发出一个请求并下载一个文件, 而您的项目结构可以由数百个模块化文件组成. 这是什么风格.一个典型的萨斯项目的scss可能看起来像:

@ import“变量”;
@ import“重置”;
@ import“字体”;
@ import“基地”;
@ import“按钮”;
@ import“布局”;

不要重复自己:变量

任何赞扬萨斯的文章都可能首先提到它的明星特性——变量. 变量最常用的用法是调色板. 有多少次你发现几个声明的东西应该是相同的颜色, 因为没有人使用相同的十六进制代码，所以最终在CSS中呈现出略有不同的色调? 萨斯出手相救. 在萨斯中，可以用几乎任何值声明变量. 所以，我们的调色板可以是这样的:

美元的品牌:# 226666;
$二级:# 403075;
$强调:# AA8439;

以“$”开头的单词是萨斯变量. 它的意思是，稍后在样式表中, 你将能够使用这些词, 它们将被映射到你之前定义的值:

身体{
  背景:二次美元;
}

.标志{
  颜色:美元品牌;
}

a {
  颜色:强调美元;
}

答:{徘徊
  颜色:美元品牌;
}

想象一下这将如何改变我们的7184行CSS代码，您可能现在就开始渴望使用萨斯. 甚至更好的, 假设有一个重新设计的品牌，你需要更新CSS中的所有颜色. 与萨斯, 您唯一需要做的就是更新这些变量的声明一次, 和baam! 这些变化将围绕样式表进行.

我编写了这个 萨斯迈斯特的例子萨斯的游乐场. 试着把这些变量换成别的东西.

变量的用处不仅仅局限于颜色, 但是字体声明, 大小, 媒体查询, 和更多的. 这是一个很基本的例子, 但是请相信我, 萨斯的可能性是无限的.

更简洁的源代码:嵌套

嵌套可能是萨斯第二个被提及最多的特性. 当我在使用萨斯之后回到香草CSS, 我看到的CSS文件看起来很杂乱，我不确定它是否被缩小了. 没有嵌套，普通的CSS看起来并不比漂亮的印刷要好多少 .最小值.css 文件:

.标题{
  保证金:0;
  填充:1 em;
  border-bottom: 1px solid #CCC;
}

.header.是固定的{
  位置:固定;
  上图:0;
  右:0;
  左:0;
}

.header .nav {
  list-style:没有;
}

.header .导航{
  显示:inline-block;
}

.header .navi a {
  显示:块;
  填充:0.5em;
  颜色:# AA8439;
}

使用嵌套，您可以在声明的大括号之间添加类. 萨斯将非常直观地编译和处理选择器. 你甚至可以使用&字符来获取父选择器的引用. 回到我们的CSS示例，我们可以将其转换为:

.标题{
  保证金:0;
  填充:1 em;
  border-bottom: 1px solid #CCC;

  &.是固定的{
    位置:固定;
    上图:0;
    右:0;
    左:0;
  }

  .nav {
    list-style:没有;

    li {
      显示:inline-block;

      a {
        显示:块;
        填充:0.5em;
        颜色:# AA8439;
      }
      
    }

  }

}

它看起来很漂亮，也更容易阅读. 你可以随意玩这个 例子.

再一次。! 不要重复自己:Mixins和Extends

CSS中的重复总是难以避免的. 强调一下这一点也无妨，尤其是当萨斯给你mixins和extends的时候. 它们都是强大的功能，有助于避免大量重复. mixins和extends的可能性似乎没有尽头. 使用mixin，您可以进行参数化的CSS声明，并在整个样式表中重用它们.

例如，假设您有一个盒子模块，里面有一个按钮. 您希望框的边框和按钮的背景具有相同的颜色. 使用香草CSS，你可以这样做:

.盒子{
  边框:2px实红色;
}

.盒子 .按钮{
  背景:红色;
}

假设您现在想要相同的盒子模块，但使用不同的颜色. 你将在你的CSS中添加如下内容:

.盒子-alt {
  边框:2px纯蓝色;
}

.盒子-alt .按钮{
  背景:蓝色;
}

现在，假设你想要一个框模块，但是边框更细. 你可以补充说:

.盒子-slim {
  边框:1px实红色;
}

.盒子-slim .按钮{
  背景:红色;
}

很多重复，对吧? 使用萨斯，您可以抽象这些案例以减少重复. 你可以这样定义一个mixin:

@mixin 盒子($borderSize， $color) {

  font: family:宋体;

  .按钮{
    背景:美元的颜色;
  }

}

因此，您的源代码可以简化为:

.盒子{ @include 盒子(2px, red); }
.盒子-alt { @include 盒子(2px, blue); }
.盒子-slim { @include 盒子(1px, red); }

看起来很漂亮，对吧?? 摆弄一下这个 例子. 你可以创建自己的mixins库, 或者更好的是，你可以去社区图书馆.

扩展也是类似的，它们让你从一个选择器到另一个选择器共享属性. 然而, 而不是输出多个声明, 它们输出一个类列表，而不重复您的属性. 这样还可以避免输出中的代码重复. 让我们忘记前面示例中的按钮，看看如何使用 @extend 会和 .盒子.

假设你声明了第一个盒子:

.盒子{
  保证金:1 em;
  填充:1 em;  
  边框:2px实红色;
}

现在你想要两个类似的盒子，但是用不同的边框颜色. 你可以这样做:

.盒子-blue {
  @extend .箱;
  边框颜色:蓝色;
}

.盒子-red {
  @extend .箱;
  边框颜色:红色;
}

编译后的CSS看起来是这样的:

.盒子, .盒子-blue, .盒子-red {
  保证金:1 em;
  填充:1 em;
  边框:2px实红色;
}

.盒子-blue {
  边框颜色:蓝色;
}

.盒子-red {
  边框颜色:红色;
}

强大的,对吧? 您可以找到示例 在这里. 如果您查看生成的CSS，就会意识到类 .盒子 是否包含在输出中. 如果不想要这种行为，可以组合 @extend 与“占位符”. 占位符是一个特殊的选择器，它不会在CSS中输出一个类. 例如，我有时发现自己经常重置列表的默认样式. 我通常使用@extend作为占位符，像这样:

% unstyled-list {
  list-style:没有;
  保证金:0;
  填充:0;
}

然后你可以在你所有的样式表中重用这个模式:

.搜索结果{
  @extend % unstyled-list;
}

.帖子{
  @extend % unstyled-list;
}

.nav {
  @extend % unstyled-list;
}

编译后的CSS看起来像这样:

.搜索结果, .帖子, .nav {
  list-style:没有;
  保证金:0;
  填充:0;
}

看看下面的例子 在这里.

还有更多吗??

绝对! 我不想让这篇文章过于复杂，但是有一个 时髦的 world waiting to be discovered by you; and t在这里 are also a lot of features beyond those: operations, 单行//注释, 功能, 如果你曾经想过“在CSS中做一些‘X’的事情会很棒”, 我确信X已经被萨斯完成了. “具有超能力的CSS”是它的标语，这一点也不接近事实.

结论

去参观 安装页面 开始黑客攻击! 相信我，你不会后悔的.

是的，除了萨斯还有其他选择. 其他预处理器(LESS, Stylus)，后处理器，Grunt等. 甚至还有CSS变量. 我并不是说萨斯是唯一的技术. 我想说的是，这是最好的! 至少现在是这样. 不要相信我说的话? 你自己试试吧. 你不会后悔的!