编写 Sass 的八个技巧

Question

Sass 可以编译出非常优秀的 CSS 样式表，或者说，这就是 Sass 要做的事情。

有效的使用Sass可以帮助你构建出干净的有效的 CSS，但如果运用不好，Sass 其实会让你的 CSS 文件变得更大，并且添加一些不必要的和重复的 CSS 代码。

下面一些编写Sass小技巧，可以有效帮助你编写出更好的Sass。

１、你的 Sass 结构

在你的项目中使用 Sass，管理好网站的结构是对每一个项目最重要的一点。使用 Partials 允许你把 CSS 分成若干个更小更易于管理的代码块，这样更易于维护和扩展。

Partial 文件使用下划线来命名 SCSS 文件（如：_buttons.scss），不引入这部分代码是不会编译出 CSS 代码。每个 partial 文件都将会在Sass根目录下的主体文件（如：global.scss）引入。

例如，这有一个示例，来演示这部分：

vendor/
base/
|
|-- _variables.scss
|-- _mixins.scss
|-- _placeholders.scss

framework/
modules/
global.scss

这样的文件结构可以确保该网站是很容易工作，并且可以随时添加新的文件。例如，新的模块文件可以很容易添加到 modules 文件夹中，然使用通过 @import 添加到 global.scss 文件中。

为了演示，将 global.scss 文件拿出来做演示：

/* VENDOR - Default fall-backs and external files.
========================================================================== */

@import 'vendor/_normalize.scss';


/* BASE - Base Variable file along with starting point Mixins and Placeholders.
========================================================================== */

@import 'base/_variables.scss';
@import 'base/_mixins.scss';
@import 'base/_placeholders.scss';


/* FRAMEWORK - Structure and layout files.
========================================================================== */

@import 'framework/_grid.scss';
@import 'framework/_breakpoints.scss';
@import 'framework/_layout.scss';


/* MODULES - Re-usable site elements.
========================================================================== */

@import 'modules/_buttons.scss';
@import 'modules/_lists.scss';
@import 'modules/_tabs.scss';

作为一个知识的侧重点，你可以看看 Hugo对Sass结构方面的一些见解，因为他在这一个领域有非常深的经验。

扩展阅读

• css-burrito: an organizational Sass template
• A Little Structure For Your Large Sass Project
• Our CSS/Sass Project Architecture and Styleguide
• SCSS: How do you structure your file architecture and why?
• Our Front-end Development Practices: How I Structure my SASS Projects

2、更有效的使用 Sass 变量

变量是 Sass 中最简单的特性之一，但有时候也会使用不当。创建站点范围内有语义化的变量，是不可或缺的工作。如果命名不好，他会变得难以理解和重复使用。

这里有一些命名变量的小技巧，提供参考：

• 命名变量时不要含糊不清
• 坚持一种命名规则（Modular, BEM 等等）
• 确定变量的使用是有道理的

这有一个好的示例：

$orange: #ffa600; 
$grey: #f3f3f3; 
$blue: #82d2e5;

$link-primary: $orange;
$link-secondary: $blue;
$link-tertiary: $grey;

$radius-button: 5px;
$radius-tab: 5px;

这个是不好的示例：

$link: #ffa600;
$listStyle: none;
$radius: 5px;

3、减少 Mixins 的使用

Mixins 是实现代码块的一种伟大方式，可以在一个站点内多次使用。然而，@include 定义好的 Mixins 和在 CSS 代码中复制、粘贴没什么不一样。它将会让你的CSS代码生成很多重复的代码，让你的文件变得越来越臃肿。

到目前为止，Mixins只适合那种需要通过传递参数来快速创建样式的情形。

@mixin rounded-corner($arc) {
    -moz-border-radius: $arc;
    -webkit-border-radius: $arc;
    border-radius: $arc;  
}

rounded-corner 这个Mixins可以在任何情况下使用，仅仅通过改变其参数$arc的值，将得到不同的代码：

.tab-button {
     @include rounded-corner(5px); 
}

.cta-button {
     @include rounded-corner(8px); 
}

像这样使用 Mixins 是不明智的：

@mixin cta-button {
    padding: 10px;
    color: #fff;
    background-color: red;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

这个Mixins没有传递任何参数，更建议 使用%placeholder来创建，这也是接下来要说的第四点。

4、拥抱 Placeholder

与 Mixins 不同，%placeholder 也可以多次使用，而且不会生成重复的代码。这使得输入的 CSS 更友好，更干净。

%bg-image {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    @extend %bg-image;
    background-image:url(/img/image-one.jpg");
}

.image-two {
    @extend %bg-image;
    background-image:url(/img/image-two.jpg");
}

编译出来的 CSS：

.image-one, .image-two {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-one {
    background-image:url(/img/image-one.jpg") ;
}

.image-two {
    background-image:url(/img/image-two.jpg") ;
}

多个选择器运用了相同的 %placeholder 也只会输出一次代码。没有引用的 %placeholder 是不会输出任何 CSS 代码。

和第三点的 Mixins 配合在一起使用，既可保持 Mixins 灵活性，而且还可以保持代码的简洁与干净。

/* PLACEHOLDER 
============================================= */

%btn {
    padding: 10px;
    color:#fff;
    curser: pointer;
    border: none;
    shadow: none;
    font-size: 14px;
    width: 150px;
    margin: 5px 0;
    text-align: center;
    display: block;
}

/* BUTTON MIXIN 
============================================= */

@mixin  btn-background($btn-background) {
    @extend %btn;
    background-color: $btn-background;
    &:hover {
        background-color: lighten($btn-background,10%);
    }
}

/* BUTTONS
============================================= */

.cta-btn {
    @include btn-background(green);
}

.main-btn {
    @include btn-background(orange);
}

.info-btn {
    @include btn-background(blue);
}

扩展阅读

• SASS Placeholders Versus Mixins and Extends
• Understanding placeholder selectors
• Sass: Mixin or Placeholder?
• Ditto: Making good use of Sass extends and placeholder selectors
• Sass Mixin and Sass Placeholder Tutorial

5、使用 Function 计算

使用 Functions 来进行计算。Sass 的函数不会输出任何 CSS 代码。相反，在使用的函数的时候，他会返回一个值。在网站使用函数来计算是非常有用的。

例如，函数可以计算给定元素的百分比宽度值：

@function calculate-width ($col-span) {
    @return 100% / $col-span
}

.span-two {
    width: calculate-width(2); // spans 2 columns, width = 50%
}

.span-three {
    width: calculate-width(3); // spans 3 columns, width = 33.3%
}

扩展阅读

• Using pure Sass functions to make reusable logic more useful
• Sass Functions for Play + Profit

6、有顺工作

将所有的 Mixins、Placeholder、Functions 和变量放置在一起。将他们放置一起，可以确认他们可以很快的编写以及将来重复使用。

整站的元素应该放在一个 base 文件夹中。base 文件夹应该包括全局的变量，如字体和颜色等：

$font-primary: 'Roboto', sans-serif; 
$font-secondary: Arial, Helvetica, sans-serif;

$color-primary: $orange;
$color-secondary: $blue;
$color-tertiary: $grey;

对于特定模块的Mixins、Functions 和变量，为了保证模块能正常运行，需要将这些集中放置在module文件中：

$tab-radius: 5px;
$tab-color: $grey;

7、限制嵌套

Sass的嵌套规则 是，过度的嵌套会导致很多问题的发生,代码变得复杂，而且太过于依赖HTML结构。这样将导致后面的样式需要使用 !important 来覆盖，而这种方式，我们应该尽量要去避免的。

这有几条是使用嵌套的黄金规则：

• 嵌套永远不要超过三个层级
• 确保输出的CSS简洁、可重用
• 使用嵌套是很有意义的，而不是默认选项

保持简单

这篇文章的结论是保持简单。使用Sass的目的是要写出更简洁，更易于管理的CSS。在创建任何新的Mixins、变量或函数之前，你都需要确保它们的存在将会加强开发，并不会把事情整得更复杂。Sass的所有功能只要在适度的使用和正确的使用，才能发挥其最大的作用。

无休止创建一个变量列表，或者创建一个复杂的函数，对于任何人来都是很难理解的，因为其他人必竟不是作者，无法理解作者的意图，或者说这样对开发并没带来好处和编译出干净的CSS。

结论

上面所说的这些小技巧，或许你并不会完全认可。Sass仍然是一门很新的技术，因此我们只有不断去学习和实践，才能得到更多的有用技巧。