SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程

爱被打了一巴掌 2022-03-30 10:45 286阅读 0赞

日期：2013-2-18  来源：[GBin1.com][]

[![SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程][SASS_Syntactically Awesome Stylesheets Sass]][SASS_Syntactically Awesome Stylesheets Sass_SASS_Syntactically Awesome Stylesheets Sass]

## 什么是SASS? ##

SASS英文意思是Syntactically Awesome Stylesheets Sass，最早由Hampton Catlin开发和设计。SASS是一种帮助你简化CSS工作流程的方式，帮助你更容易的维和和开发CSS内容。

如果你不明白为什么用SASS，你可以先看看这篇文章 [ 为什么需要将SASS和Compass融入CSS代码开发流程 - CSS编译器帮助你提高CSS开发效率和乐趣 ][_SASS_Compass_CSS_ - CSS_CSS_]

最简单的例子，你是不是经常需要使用“查询”和“替换”功能来修改CSS文件中某一个16进制的颜色？或者是打开一个计算器来计算多列设计中的列宽？ SASS介绍了一个新的概念例如，variables，mixins，镶套或者是选择器继承。 从外形上看起来，非常像CSS，但是并没有分割号或者大括号。

看看下面这个简单的CSS：

#skyscraper_ad
    {
      display: block;
      width: 120px;
      height: 600px; 
    }
    
    #leaderboard_ad 
    {
      display: block;
      width: 728px;
      height: 90px; 
    }

如果你需要使用SASS，则如下代码：

#skyscraper_ad
      display: block
      width: 120px
      height: 600px
    
    #leaderboard_ad 
      display: block
      width: 728px
      height: 90px

SASS使用双空格的缩进来定义代码镶套结构。这里你可以大体的了解SASS的样子，下面我们将介绍为什么SASS如此的棒！

如果你需要更多了解SASS，可以查看这篇内容[为什么需要将SASS和Compass融入CSS代码开发流程][SASS_Compass_CSS]。

## 变量 ##

在SASS中使用美元符号定义一个变量，在这个例子里，一个美元自负，变量名字加上一个冒号定义一个变量。

$red: #FF4848

当然，在SASS中有一些内建的功能，例如，darken，lighten来帮助你修改变量。下面例子里，我们使用lighten方法来生成段落中更亮的红色：

$red: #FF4848 $fontsize: 12px h1   color: $red  p   color: lighten($red, 10%)

在SASS中你还可以使用加减的方式来修改变量的值，如下：

p.addition_and_subtraction   color: $red - #101   font-size: $fontsize + 10px

## 镶套 ##

两种类型的镶套：

### 选择器镶套 ###

这是第一个镶套类型。镶套类似我们在html中使用的方式。

$fontsize: 12px
    
    .speaker
      .name
        font:
          weight: bold
          size: $fontsize + 10px
      .position
        font:
          size: $fontsize

如果你看看生成的CSS代码，你可以看到如果镶套的.name class位于.speaker class中，生成的CSS选择器.speaker .name

.speaker .name {
      font-weight: bold;
      font-size: 22px; }
    .speaker .position {
      font-size: 12px; }

## 属性镶套 ##

这是第二个镶套的类型：

你可以使用同名前缀来镶套属性

$fontsize: 12px
    
    .speaker
      .name
        font:
          weight: bold
          size: $fontsize + 10px
      .position
        font:
          size: $fontsize

在上面的例子中，我们可以看到font属性后添加了一个双空格缩进，接下来是weight 和 size，这将会生成font-weight和font-size属性，如下：

.speaker .name {
      font-weight: bold;
      font-size: 22px; }
    .speaker .position {
      font-size: 12px; }

所有的CSS连接符的属性都支持。使用这种属性的镶套方式，可以帮助你有效的组织CSS的结构。

## Mixins ##

Mixins是另外一个SASS的超棒属性，允许你高效的重用你的一些SASS的代码片段，甚至可以传递参数并且指定缺省的值。

定义mixins只需要使用@mixin关键字，然后是你需要使用的代码部分。如果你需要使用任何的参数，包含一对括号和参数即可。如果你希望使用缺省值，添加一个冒号即可。

包含一个mixin也非常简答，使用@include关键字，后面跟随着Mixin名称和任何括号中定义的参数即可。如下：

@mixin border-radius($amount: 5px)
      -moz-border-radius: $amount
      -webkit-border-radius: $amount
      border-radius: $amount
    
    h1
      @include border-radius(2px)
    
    .speaker
      @include border-radius

上面的SASS将会被编译成如下CSS：

h1 {
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      border-radius: 2x; }
    
    .speaker {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }

我们指定了h1中的radius，但是对于.speaker我们没有指定任何内容。所以会使用缺省的5px。

## 选择器继承 ##

选择器继承允许你告诉任何选择器从另外一个选择器继承所有的样式，非常棒的一个特性。

使用它需要指定关键字@extend，后面跟随一个你喜欢继承的选择器，然后所有的选择器的样式将会被继承。

h1   border: 4px solid #ff9aa9  .speaker   @extend h1   border-width: 2px

以上代码将会被编译成如下CSS：

h1, .speaker {   border: 4px solid #ff9aa9; }  .speaker {   border-width: 2px; }

## 调试SASS ##

[在线调试][Link 1]：你可以不安装而使用SASS的在线调试来尝试SASS的超棒特性。

安装使用：如果你有Ruby gems你只需要简单运行gem install sass即可。

你可以输入如下命令：

sass --watch sass_folder:stylesheets_folder

其中sass\_folder是你的sass文件的目录，stylesheets\_folder是生成的css的目录。--watch选项意思是将会关注这个目录，如果我们修改了任何文件，保存后将会被自动的转化。

## 将CSS转化成SASS ##

你可以在已经存在的项目中使用sass-convert。

输入你需要转换的目录并且输入：

sass-convert --from css --to sass -R .

其中-R意思是递归， . 意思是当前目录

## 关于SCSS(SASSY CSS) ##

这里我们只介绍了SASS语法。然而，这里有一个叫做SCSS(Sassy CSS)的更新的格式。区别在于Sassy CSS看起来更像我们在CSS中使用的样子，但是也有类似 variable，mixins，镶套和选择器继承的特性。

## 总结 ##

SASS是一个超棒的保持CSS结构话的好工具，这里甚至有一些项目例如 [ Compass][Compass]使用mixins来包含CSS框架而不是将无任何语义的CSS插入你的HTML中。但是不论如何，相信你会喜欢这个超棒的CSS工具的，还想什么，在下一个项目中尝试一下它吧！

来源：[SASS（Syntactically Awesome Stylesheets Sass）绝对新手入门教程][GBin1.com]

[GBin1.com]: http://www.gbin1.com/technology/css/20130218-sass-beginner-guide/
[SASS_Syntactically Awesome Stylesheets Sass]: http://www.gbin1.com/technology/css/20130218-sass-beginner-guide/title.jpg
[SASS_Syntactically Awesome Stylesheets Sass_SASS_Syntactically Awesome Stylesheets Sass]: http://www.gbin1.com/technology/css/20130218-sass-beginner-guide/index.html
[_SASS_Compass_CSS_ - CSS_CSS_]: http://www.gbin1.com/technology/css/20111220whysassandcompassshouldbeinyourworkflow/
[SASS_Compass_CSS]: http://gbin1.com/technology/css/20111220whysassandcompassshouldbeinyourworkflow/
[Link 1]: http://sass-lang.com/try.html
[Compass]: http://compass-style.org/