Sass入门

你是否一直想学Sass,但却始终没有行动?你是否是Sass的使用者,但却感觉自己只是多了一个工具?那么请继续读下去,让我们一起重温Sass的特性和另外一些很酷的东西吧。

Sass是什么?

Sass (Syntactically Awesome Style Sheets)是一个CSS预处理器。Sass与CSS关系就像CoffeeScript与Javascript关系。它通过添加标记到样式表中,帮助我们更轻松惬意的书写CSS。

那么,Sass使如何工作的?

很高兴你有此疑问,实际上有多种编译Sass的方法:

  • Ruby Sass二进制源码。通过gem install sass命令安装,然后就可以使用running sassc myfile.scss myfile.css来编译了。
  • 类似HammerCodeKitCompass的GUI软件。
  • 我个人喜爱libsass
  • 一个使用C语言编写且速度极快的Sass编译器。也可以通过NPM的node-sass (npm install node-sass)安装libsass。

到底应该选择哪一个呢?这取决于你所做的事。

目前我在从事大型电子商务网站代码库的维护工作,因此使用Ruby Sass编译大量源码就显得有点慢。我通常在构建系统中使用node-sass,但是必须牢记libsass的特性并非完全与Ruby Sass相同。

如果你不是一个善于使用命令行工具的人,那么GUI软件是个不错的选择。通过安装此类软件监视.scss文件,那么当你编写它们的时候,软件将会自动编译。

如果你只是想尝鲜或者共享几段代码,非常建议使用Sassmeister。这是一款基于WEB的Sass开发平台,而我也将在本文中使用它。

.sass vs .scss?

Sass面世之初,其核心语法是明显不同于CSS的。它使用缩进代替了括号,没有分号并且操作符很短。简而言之,像极了Haml

有些人非常不喜欢这种语法格式,所以在Sass 3.0中开发者将核心语法改成了.scss。SCSS是CSS的一个超集,在与 CSS写法完全相同的基础上,还同时兼具了Sass的所有特性。

也就是说,如果你喜欢还可以使用原生语法。我个人使用.scss,并且在本文中也是使用.scss语法。

为什么使用Sass?

问得不错。Sass让编写可维护的CSSS更加简易方便。可以用更少的代码,做更多的事,用更少的时间,具有更强的可读性。

如此,你还需要更多理由吗?

安装

废话少说,让我们开始干吧。如果你想尝鲜,下面的方法都不错:

  • 安装你选择的编译方法(软件或者命令行),同时创建style.scss文件。

或者

变量

没错,就是变量。Sass让CSS可以使用变量。

变量类型可以是数字,字符串,颜色,null,列表和maps。

在Sass中使用$符号定义变量。让我们来创建第一个变量:

$primaryColor: #eeffcc;

如果尝试编译这个文件,你并不会在CSS中看到任何东西,但你做的都是对的。定义变量并不会输出任何CSS,它们只会被记录在当前作用域的变量集中。你需要使用一段CSS声明使用它,然后就可以看见了:

$primaryColor: #eeffcc;
body {
    background: $primaryColor;
}

提一下作用域这个坑,你知道Sass有变量作用域吧?那就对了,如果你在选择器中声明了一个变量,那么它的作用范围就是这个选择器内部。看看这个:

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#eeccff
}

但如果我们想在选择器中声明一个全局变量可如何是好?Sass提供了一个!global标识符来实现这一功能:

$primaryColor: #eeccff;
body {
  $primaryColor: #ccc !global;
  background: $primaryColor; //编译后#ccc
}
p {
  color: $primaryColor; //编译后#ccc
}

另一个很有用的标识符是!default——特别是编写混合宏时。这确保了我们在触发事件时,即使未传递参数,变量也会有默认的值。如果传递了参数,那么该参数就会覆盖默认值:

$firstValue: 62.5%;
$firstValue: 24px !default;
body {
    font-size: $firstValue; //编译后62.5%;
}

通过下面几个关于变量的例子,看看你编写的Sass是如何编译成CSS的:

在SassMeister上练习

数学计算

与CSS不同,Sass允许使用数学表达式!这对于混合宏非常有用,是我们能够使用自己的标记做一些很酷的事情。

支持的操作符包括:

  • 加:+
  • 减:-
  • 除:/
  • 乘:*
  • 取余:%
  • 相等:==
  • 不相等:!=

在继续之前,我要提醒两个Sass有关于数学计算的“陷阱”。

第一,因为/符号用来简写CSS字体属性,比如font: 14px/16px,所以如果你想在非变量值上使用除法操作符,那么你需要使用括号包裹它们:

$fontDiff: (14px/16px);

第二,不可以混合使用值的单位:

$container-width: 100% - 20px;

上面这个例子行不通。相反,对于这个特殊的例子你可以使用calc函数——它可以在渲染时解释执行。

回到数学计算上来,让我们基于基础的容器宽度创建一个动态列声明:

$container-width: 100%;
.container {
  width: $container-width;
}
.col-4 {
  width: $container-width / 4;
}
//  Compiles to:
//  .container {
//   width: 100%;
//  }
//
//  .col-4 {
//      width: 25%;
//  }

非常棒,对不对?尝试下面的代码,看看我们是如何进一步使用Sass的数学计算增加margin值。

在SassMeister上练习

函数

在我看来,Sass最好的一点就是它的内建函数。可以在这里查看完整的函数列表。内容非常广泛。

你是否想创建一个非常酷的按钮,然后在调色板上花费了很多时间,以尝试为阴影部分找到正确的色调?

尝试darken()函数吧。你可以传递给它一个颜色和比例,稍等一会,就会使你的颜色变暗了。看看这个例子就知道为什么它很酷了:

在SassMeister上练习

嵌套

Sass中一个很有用又经常被误用的特性,就是嵌套声明。能力越大责任越大,所以让我们花费点时间了解它都做了什么,另一方面,也看看它做了什么坏事。

基础的嵌套指在一个声明内实现另一个声明的能力。通常在CSS中,我们会这么写:

.container {
    width: 100%;
}
.container h1 {
    color: red;
}

但在Sass中,我们可以通过如下写法获得相同代码:

.container {
    width: 100%;
    h1 {
        color: red;
    }
}

这太疯狂了!那么如果我们想引用父选择器又该怎么办呢?可以通过使用&符号实现。看看我们是如何利用这个方式给伪选择器添加链接属性的吧:

a.myAnchor {
    color: blue;
    &:hover {
        text-decoration: underline;
    }
    &:visited {
        color: purple;
    }
}

现在已经知道怎样嵌套了,但是如果想离开嵌套回到顶层选择器,那么我们可以使用@at-root指令。比如我们有一个这样的嵌套:

.first-component {
    .text { font-size: 1.4rem; }
    .button { font-size: 1.7rem; }
    .second-component {
        .text { font-size: 1.2rem; }
        .button { font-size: 1.4rem; }
    }
}

当意识到第二个组件可能会被用作他处,那我们就有麻烦了。实际上,这并不完全对。@at-root可以解决这个问题:

在SassMeister上练习

很酷对不对?嵌套是节省时间和提高可读性的窍门,但是过度嵌套则会制造过度选择和文件大小的问题。思考你的Sass编译结果并尝试遵循“inception rule”。

Inception Rule:选择器深度不要超过四层。——thesassway

如果可能,嵌套不要超过四层。不过即使你必须嵌套五层,Hampton Catlin也不会去你家和你理论的。尽量不要这样做。

Imports

开始Sass中我又一个喜爱的部分吧。imports允许将总的样式分割成小文件,并在另一个文件中导入。这对于组织方式和编写速度来说是神奇的。

我们可以使用@import指令导入.scss文件:

@import "grids.scss";

实际上,你都不需要写扩展名:

@import "grids";

Sass编译器还有一个“partials”的概念。如果.sass.scss文件名有一个下划线前缀,那么它就不会被编译成CSS。如果你的文件只是被引用到主体样式style.scss中而并不需要编译,这个特性就会很有用。

扩展和占位符

在Sass中,@extend 指令是继承既有样式的标准方式。

让我们使用@extend指令扩展一个input样式——指向input-error类:

.input {
  border-radius: 3px;
  border: 4px solid #ddd;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}
.error-input {
  @extend .input;
  border:4px solid #e74c3c;
}

请注意,这么做并不会从.input复制样式到.error-input中。看看这个例子中编译后的CSS样式,理解Sass是如何智能处理的吧:

在SassMeister上练习

但如果我们想声明的扩展来自尚未实现的样式集,那该如何做呢?占位符选择器就可以解决这个问题。

%input-style {
    font-size: 14px;
}
input {
    @extend %input-style;
    color: black;
}

声明占位符选择器需要在目标类名上前缀一个%符号。只有当扩展它的元素被渲染时,占位符选择器才会被编译输出。

看看下面了解上一个例子使用占位符是怎样编译的:

在SassMeister上练习

混合宏

混合宏是Sass令人惊艳的特性,因为它在让你实现类似@extend功能的同时还提供了传参的功能。

Sass使用@mixin指令定义混合宏,并使用@include指令引入。让我们构建一个简单的混合宏实现媒体查询吧。

第一步是定义混合宏:

@mixin media($queryString){
  //
}

注意我们在混合宏media中声明了一个$queryString参数。当我们引入混合宏时,可以一个字符串参数以实现动态渲染。勇敢试一下吧:

@mixin media($queryString){
    @media #{$queryString} {
      @content;
    }
}

因为我们期待字符串参数被目标函数使用,所以使用了Sass的插值语法,#{}。当你传递变量到这个括号中时,变量会像字符串一样输出而不是进行某种逻辑运算。

这个例子中另一个生疏的地方是@content指令。当你使用的混合宏后接被大括号包裹的样式,那么被包裹样式就可以通过@content指令加以使用。

最后,让我们使用混合宏和@include指令试一下吧:

.container {
    width: 900px;
    @include media("(max-width: 767px)"){
        width: 100%;
    }
}

看看下面这个演示,了解我们新的混合宏是怎样渲染媒体查询的吧:

在SassMeister上练习

函数指令

在Sass中,函数指令类似于混合宏,它们会通过@return指令返回值而不是返回样式。这可以降低代码中的重复率并提高可读性。

让我们创建一个函数指令以清除grid例子中的grid运算式:

@function getColumnWidth($width, $columns,$margin){
    @return ($width / $columns) - ($margin * 2);
}

现在就可以在代码中使用这个函数了:

$container-width: 100%;
$column-count: 4;
$margin: 1%;
.container {
  width: $container-width;
}
.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: getColumnWidth($container-width,$column-count,$margin);
  margin: 0 $margin;
}

很有范儿对不对?

演示

现在我们已经可以使用这些工具,那我们怎样构建自己配置的栅格框架呢?继续看:

让我们从创建一个setings map开始:

$settings: (
    maxWidth: 800px,
    columns: 12,
    margin: 15px,
    breakpoints: (
        xs: "(max-width : 480px)",
        sm: "(max-width : 768px) and (min-width: 481px)",
        md: "(max-width : 1024px)  and (min-width: 769px)",
        lg: "(min-width : 1025px)"
    )
);

记下来创建一个混合宏渲染我们的框架:

@mixin renderGridStyles($settings){
//
}

继而,我们需要渲染每个断点处的样式,所以遍历所有断点并调用媒体查询的混合宏。我们可以使用map-get方法获取断点值,同时使用@each指令遍历所有断点:

@mixin renderGridStyles($settings){
  $breakpoints: map-get($settings, "breakpoints");
  @each $key, $breakpoint in $breakpoints {
    @include media($breakpoint) {
      //
    }
  }
}

我们需要在迭代器内部实现具体栅格的样式渲染,所以创建一个renderGrid混合宏。使用map-get方法获得map值,并使用@while指令迭代以$i作为索引的列。我们使用插值作为类名。

@mixin renderGrid($key, $settings) {
  $i: 1;
  @while $i <= map-get($settings, "columns") {
    .col-#{$key}-#{$i} {
      float: left;
      width: 100% * $i / map-get($settings,"columns");
    }
    $i: $i+1;
  }
}

接下来,添加容器和列的样式:

.container {
    padding-right: map-get($settings, "margin");
    padding-left: map-get($settings, "margin");
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: map-get($settings, "margin") * -1;
    margin-left: map-get($settings, "margin") * -1;
}

大功告成!看看下面关于我们框架的演示吧:

在SassMeister上练习

总结

可能你已经掌握了这些知识并认为这就是Sass了,其实不然,这些只是冰山一角。Sass是一款非常强大的工具,可以帮助我们处理非同凡响的设计。期望各位继续阅读具有精妙思想的文章,直到达到Happy Sassing境界,资源如下:

扩展阅读

  • The Sass Way – A phenomenal source of Sass tutorials.
  • Hugo Giraudel – An amazing tech writer & Sass wizard with a keen focus on Sass.
  • SassNews – A twitter account managed by Stuart Robson that will keep you in the know.

本文根据Ken Wheeler的《Getting Started with Sass》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://scotch.io/tutorials/getting-started-with-sass

南北

在校学生,本科计算机专业。狂热地想当一名作家,为色彩和图形营造的视觉张力折服,喜欢调教各类JS库,钟爱CSS,希望未来加入一个社交性质的公司,内心极度肯定“情感”在社交中的决定性地位,立志于此改变社交关系的快速迭代。

如需转载,烦请注明出处:http://www.w3cplus.com/preprocessor/getting-started-with-sass.html

返回顶部