当我第一次听说萨斯和其他CSS预处理器时, 我的想法并不是很热情. “为什么 do we need another tool for something that already works as beautifully as CSS?”. “我不会用那个的。”. “我的CSS已经足够有序，不需要它了”. “A preprocessor is for people who don’t 知道如何编写CSS, if you 知道如何编写CSS 你不需要预处理器。”. “After all, processors are for people who do not 知道如何编写CSS. 如果有，他们就不需要预处理器了。”. 有一段时间，我一直躲着他们，直到 强迫 在几个项目中使用它.

I didn’t realise how much I was enjoying working with 萨斯 until recently, 当我不得不在一个项目中切换回普通的CSS时. 在那段时间里, I learned so much that I decided to praise 萨斯 and make this a better world, 让你成为更快乐的人!

为什么要使用萨斯?

组织:@ import

我刚刚提到的这个项目, 大型电子商务网站, had a single CSS file with 7184 lines of uncompressed style declarations. Yes, you read it right: seven thousand one hundred and eighty four lines of CSS. 我相信这不是最大的CSS文件 前端开发人员 had to handle in the industry, but it was big enough to be a complete mess.

This is the first reason why you need 萨斯: it helps you organize and modularize your stylesheets. 它不是变量，也不是嵌套. For me the key feature of 萨斯 are partials and how it extends the CSS @import rule to allow it to import SCSS and 萨斯 files. In practice, this means that you will be able to split your huge style.css file into several smaller files that will be easier to maintain, understand, and organize.

The @import rule has been around for almost as long as CSS itself. 然而, 自从你在CSS文件中使用@import后，它就声名狼藉了, 触发单独的HTTP请求, 每个要导入的CSS文件对应一个. 这对站点的性能是有害的. 如果你把它和萨斯一起用，会发生什么呢? If you never stopped to think about what the word “preprocessor” means, now is the time.

A preprocessor is a program that processes its input data to produce output that is used as input to another program. —维基百科

So, 回到@import规则, this means that the @import will be handled by 萨斯 and all our CSS and SCSS files will be compiled to a single file that will end up in our live site. The user will have to make only one request and will download a single file, while your project structure can be comprised of hundreds of modularized files. 这是什么风格.一个典型的萨斯项目的scss可能看起来像:

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

不要重复自己:变量

Any article praising 萨斯 will probably start by mentioning its star feature - variables. 变量最常用的用法是调色板. How many times did you find several declarations of what is supposed to be the same color, ending up in the CSS as slightly different shades because nobody uses the same hex code? 萨斯出手相救. 在萨斯中，可以用几乎任何值声明变量. 所以，我们的调色板可以是这样的:

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

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

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

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

a {
  颜色:强调美元;
}

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

Imagine how this could change our 7184 lines of CSS code, and you may start desiring 萨斯 right now. 甚至更好的, imagine t在这里 is a redesign of the brand and you need to update all the colors in your CSS. 与萨斯, the only thing you need to do is to update the declarations of those variables once, 和baam! 这些变化将围绕样式表进行.

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

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

更简洁的源代码:嵌套

Nesting could be possibly the second most mentioned feature of 萨斯. 当我在使用萨斯之后回到香草CSS, the CSS file I was looking at seemed so cluttered that I wasn’t sure if it was 最小值ified. Without nesting, vanilla CSS doesn’t look any better than pretty printed .最小值.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;
}

With Nesting, you can add classes between the braces of a declaration. 萨斯将非常直观地编译和处理选择器. 你甚至可以使用&字符来获取父选择器的引用. 回到我们的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中的重复总是难以避免的. And it doesn’t hurt to stress on this a bit more, especially when 萨斯 gives you mixins and extends. They are both powerful features and help avoid a lot of repetition. mixins和extends的可能性似乎没有尽头. With mixins, you can make parameterized CSS declarations and reuse them throughout your stylesheets.

For 例子, let’s say you have a 盒子 module with a button inside. You want the border of the 盒子 and the background of the button to be of the same color. 使用香草CSS，你可以这样做:

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

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

Let’s say you now want the same 盒子 module, but with a different color. 你将在你的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库, or even better you can use one of the 社区 libraries out t在这里.

Extends are similar, they let you share properties from one selector to another. 然而, 而不是输出多个声明, 它们输出一个类列表，而不重复您的属性. This way you can avoid repetition of code in your output as well. Let’s forget about the buttons in our previous 例子 and see how @extend 会和 .盒子.

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

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

Now you want two 盒子 similar to this one, but with different border colors. 你可以这样做:

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

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

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

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

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

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

强大的,对吧? 您可以找到示例 在这里. If you review the resulting CSS, you will realize that the class .盒子 是否包含在输出中. 如果不想要这种行为，可以组合 @extend 与“占位符”. A placeholder is a special selector that won’t output a class in the CSS. For 例子, I sometimes find myself resetting the default styles of lists a lot. 我通常使用@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, 单行//注释, 功能, if loops … if you ever thought “it would be great to do some ‘X’ thing with CSS”, 我确信X已经被萨斯完成了. “CSS with superpowers” is its tagline, and that can’t be any closer to the truth.

结论

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

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