SASS基础教程

╰半夏微凉° 2022-08-25 09:12 140阅读 0赞

SASS是最早、最成熟的CSS预处理，它可以通过变量、嵌套、函数、继承等使CSS变得更强大，更优雅，而且完全兼容CSS的语法。SASS可以帮助我们更好地组织大CSS文件，更加便捷地开发和运行CSS文件，在Compass等类库的帮助下，我们将更加如虎添翼。

## 1.特性 ##

*  完全兼容CSS3
 *  诸如变量、嵌套、混合（Mixins）之类的语言扩展
 *  操作颜色和其他的巨量实用函数
 *  类似控制语句的强大特性
 *  可以自定义的、格式良好的输出
 *  整合Firebug

## 2.语法 ##

SASS允许有两种语法，一种叫做SCSS(Sassy CSS),使用.scss作为扩展名，它继承了CSS3的语法，一个验证合格的CSS样式表同样也是一个完全合格的SCSS样式表，同时具备相同的含义，而且SCSS能很好的识别大部分的CSS Hacks、浏览器厂商语法（例如老版本IE的滤镜）。

另一种是比较早的语法，我们叫做缩进语法(使用.SASS作为扩展名，有时叫做SASS)提供了一种简洁书写CSS的语法，使用缩进而不是括号来代表嵌套，使用新行而不是分号分割属性，书写容易、代码简洁是很多人的最爱。

当然说了这么多，到底区别有哪些，我们通过一个简单地例子直观地看一下。

//使用SCSS
    $baseFontsize:14px;
    $Largefontsize:16px;
    
    body{
    	font-size:$baseFontsize;
    	p{
    		font-size:$Largefontsize;
    	}
    }
    
    //使用SASS
    $baseFontsize: 14px
    $Largefontsize: 16px
    
    body
      font-size: $baseFontsize
      p
        font-size: $Largefontsize

两种语法各有所长，也各有所爱。SCSS好在贴近CSS，SASS妙在简洁清爽，大家可以参考下这篇文章《 [Sass vs. SCSS: which syntax is better?][Sass vs. SCSS_ which syntax is better]》，至于你选择那种语法，就全在你了。

SASS提供了两种语法的转换功能，代码貌似下面

# Convert Sass to SCSS
    $ sass-convert style.sass style.scss
    # Convert SCSS to Sass
    $ sass-convert style.scss style.sass

## 3.使用SASS ##

SASS基于Ruby来实现，因此你得有Ruby，Mac里面内嵌了Ruby，Windows需要安装，大家可以到 [官方][Link 1]下载安装。

通过以下命令安装 Sass Ruby gem： gem install sass。

具体安装过程大家可以参考 [W3Cplus][]上的教程。

比较好的编译工具 [compass.app][]、 [Scout][]、 [Codekit][]、 [Koala][]等。

## 4.扩展CSS ##

### 4.1嵌套 ###

SASS允许使用嵌套来减少父对象的重复，同时提高代码的可读性。

#main p {
      color: #00ff00;
      width: 97%;
    
      .redbox {
        background-color: #ff0000;
        color: #000000;
      }
    }

上面的这段嵌套的代码编译过之后，将会是这样

#main p {
      color: #00ff00;
      width: 97%; }
      #main p .redbox {
        background-color: #ff0000;
        color: #000000; }

### 4.2父选择器引用& ###

在嵌套代码中使用父对象的引用有的时候是非常有用而且必要的，例如，当你给hover状态指定样式，或是给有特定类的body元素指定样式时，使用&引用父对象将会很高效。

a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
    }

编译之后的代码如下所示

a {
      font-weight: bold;
      text-decoration: none; }
      a:hover {
        text-decoration: underline; }
      body.firefox a {
        font-weight: normal; }

&将会在原地替换成父对象选择器，这个在深度嵌套中非常有用，例如

#main {
      color: black;
      a {
        font-weight: bold;
        &:hover { color: red; }
      }
    }

将会被编译成

#main {
      color: black; }
      #main a {
        font-weight: bold; }
        #main a:hover {
          color: red; }

### 4.3属性嵌套 ###

CSS里面有一些属性具有命名空间，例如font-family，font-size，font-weight等都在font的命名空间内，在CSS里如果你想声明一大堆这样的相同命名空间的属性，你需要一个个地重复写出来。SASS提供了一个解决方法，你只需要写一遍命名空间，然后将子属性嵌套进去就可以，例如

.funky {
      font: {
        family: fantasy;
        size: 30em;
        weight: bold;
      }
    }

编译出来之后

.funky {
      font-family: fantasy;
      font-size: 30em;
      font-weight: bold; }

并且，命名空间属性还可以有一个值，像下面的代码一样

.funky {
      font: 2px/3px {
        family: fantasy;
        size: 30em;
        weight: bold;
      }
    }

编译之后

.funky {
      font: 2px/3px;
        font-family: fantasy;
        font-size: 30em;
        font-weight: bold; }

### 4.4占位符选择器  %foo ###

SASS提供了一种特殊的选择器，叫做占位符选择器，看起来类似于ID与Class选择器（\#id或.class），但是只在继承指令（Extend）里有用，大家可以到下面的Extend部分获得详细信息。

如果你在没有继承的环境中，使用占位符选择器的规则将不会被渲染。

## 5.注释 ##

SASS支持多行注释/\*\*/和单行注释//两种注释风格，不过在编译成CSS时，多行注释保留，单行注释会被过滤掉。

/* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    body { color: black; }
    
    // These comments are only one line long each.
    // They won't appear in the CSS output,
    // since they use the single-line comment syntax.
    a { color: green; }

编译之后

/* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    body {
      color: black; }
    
    a {
      color: green; }

当注释的第一个字符为！时，注释将会插值的形式编译到css中，甚至在压缩输出时也是如此，这个特性对于在CSS中添加版权信息非常有用。

## 6.SassScript ##

对于CSS属性语法来说，SASS提供了一个叫做SASSScript的扩展集，允许在属性中使用变量、运算和函数。

SassScript 同样可以用来生成选择器和属性名称，这个在Minxin中很有用，大家可以在插值部分获取详情。

### 6.1 交互模式(Interactive Shell) ###

你可以使用交互模式试验SassScript，启动命令窗口后，使用-i参数运行sass命令可以启动交互模式，然后输入需要试验的SassScript表达式可以得到运算结果.

$ sass -i
    >> "Hello, Sassy World!"
    "Hello, Sassy World!"
    >> 1px + 1px + 1px
    3px
    >> #777 + #777
    #eeeeee
    >> #777 + #888
    white

### 6.2 变量$ ###

最直接有效的使用SassScript的方式是使用变量，使用$声明变量，然后可以在CSS属性中使用变量，例如

//声明变量
    $width: 5em;
    //使用变量
    #main{
          width:$width;
    }

在嵌套里声明的变量只在声明它的那个嵌套里可用，在嵌套外边声明的变量到处可用。

使用“！”声明的变量依然有用，但是不赞成使用会发出警告，建议使用$声明变量。以前使用“=”而不是“：”赋值变量的方法依然有效，不过已不建议这样使用并且会发出警告，“：”是现在建议的方式。

### 6.3数据类型 ###

SassScript中支持6中数据类型

*  numbers (e.g. 1.2, 13, 10px)
 *  strings of text, with and without quotes (e.g. "foo", 'bar', baz)
 *  colors (e.g. blue, \#04a3f9, rgba(255, 0, 0, 0.5))
 *  booleans (e.g. true, false)
 *  nulls (e.g. null)
 *  lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

SassScript也支持其他的CSS属性值（例如Unicode ranges and !important declarations），但是对这些值不做任何处理，只是看做没有加引号的字符串处理。

#### 6.3.1 String ####

CSS指定了两种类型的CSS字符串，带引号的字符串例如"Lucida Grande" 、 'http://sass-lang.com'，不带引号的字符串例如sans-serif、bold。SassScript两种都可以识别，一般来说如果在SASS文档中使用一种类型的字符串，在编译css中也将使用这个类型。

但也有一个例外，当使用\#\{\}插值是，引起来的字符串将去掉引号。如此这般，我们在mixins中使用选择器名将变得简单。例如：

@mixin firefox-message($selector) {
      body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
      }
    }
    
    @include firefox-message(".header");

编译之后

body.firefox .header:before {
      content: "Hi, Firefox users!"; }

需要注意的是，当我们使用不推荐的"="语法时，无论书写时有没有引号，所有的字符串都将会认作没有引号。

#### 6.3.2 Lists ####

在表征类似CSS的"margin: 10px 15px 0 0"、"font-face: Helvetica, Arial, sans-serif"等规则时，Sass使用列表(Lists)数据类型。Lists是一系列用空格或逗号分隔的属性值，实际上单独的属性也可以认为Lists，具有一个元素的Lists。  
Sass的列表函数可以极大的丰富列表的功能，nth函数可以获得列表中的元素，join函数可以联接多个列表，append函数可以向列表中添加元素，@each函数可以给列表中的每个元素添加样式。  
除了包含简单元素外，列表还可以包含列表，例如， 1px 2px, 5px 6px是一个二维列表，包含列表1px 2px和列表5px 6px。如果内部列表和外部列表具有一样的分隔符，你可以使用括号将内列表括起来，从而清晰呈现。例如(1px 2px) (5px 6px)也是一个列表1px 2px和列表5px 6px组成的二维列表。

当列表编译成css时，Sass不会添加任何括号，因为CSS不会识别它们。这就意味着，(1px 2px) (5px 6px)和1px 2px 5px 6px编译成CSS之后将会看起来一样。但是，他们在Sass里是不一样的，前面的是一个二维列表，后面的是一个包含四个元素的列表。

列表里也可以没有任何值，但是不会直接输出到CSS中。如果你使用了"font-family: ()"，Sass将会报错。如果一个列表包含空列表或者空元素，空的列表和空元素在编译时将会被移除，例如"1px 2px () 3px"、"1px 2px null 3px"。

### 6.4运算符 ###

所有数据类型支持等号运算符( `==`  and  `!=`)，另外，每个数据类型都有单独支持的运算符。

#### 6.4.1数学运算符 ####

SassScript支持所有的标准运算符，加减乘除模(ddition +, subtraction -, multiplication \*, division /, and modulo %)，并且可以在需要的时候进行单位换算，例如

p {
      width: 1in + 8pt;
    }

将会被编译成

p {
      width: 1.111in; }

Number类型也支持所有的关系运算符(<, >, <=, >=)。

CSS允许在属性中使用"/"分隔属性，Sass作为css的扩展也必须支持此特性。所以，在SassScript中当两个数字被"/"分隔时，在编译成CSS时也原样呈现。  
但是，下面三种场合的"/"将被解析为除，基本覆盖了大部分使用除的场合。  
1.属性或属性的一部分存在变量  
2.属性被括号括起来  
3.属性是另一个数学表达式的一部分。例如

p {
      font: 10px/8px;             // Plain CSS, no division
      $width: 1000px;
      width: $width/2;            // Uses a variable, does division
      height: (500px/2);          // Uses parentheses, does division
      margin-left: 5px + 8px/2px; // Uses +, does division
    }

将会编译为

p {
      font: 10px/8px;
      width: 500px;
      height: 250px;
      margin-left: 9px; }

如果你想在变量中使用分隔符(而不是除)，可以使用\#\{\}插值，例如

p {
      $font-size: 12px;
      $line-height: 30px;
      font: #{$font-size}/#{$line-height};
    }

编译之后

p {
      font: 12px/30px; }

#### 6.4.2 颜色运算符 ####

颜色属性支持所有的算术运算符，并且是逐段实现，红绿蓝依次运算，例如：

p {
      color: #010203 + #040506;
    }

01 + 04 = 05, 02 + 05 = 07, 03 + 06 = 09,因此编译之后

p {
      color: #050709; }

颜色和数字之间也可以运算，如下面的代码。大多数情况下，使用color函数要比color算数运算高效一些。

p {
      color: #010203 * 2;
    }
    //编译之后
    p{
      color:#020406;}
    }

注意，具有alpha通道的颜色值要进行运算必须具有一样的alpha值，运算不对alpha值起作用。

p {
      color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
    }
    //编译之后
    p{
      color:rgba(255,255,0,0.75)}

alpha通道需要进行调整时，可以使用opacify和 transparentize函数，例如

$translucent-red: rgba(255, 0, 0, 0.5);
    p {
      color: opacify($translucent-red, 0.3);
      background-color: transparentize($translucent-red, 0.25);
    }
    //编译之后哦
    p {
      color: rgba(255, 0, 0, 0.9);
      background-color: rgba(255, 0, 0, 0.25); }

IE滤镜需要所有的颜色具备alpha通道，而且严格使用\#AABBCCDD的颜色格式，你可以使用ie\_hex\_str 函数容易的实现转换，例如

$translucent-red: rgba(255, 0, 0, 0.5);
    $green: #00ff00;
    div {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
    }
    //编译之后
    div {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
    }

#### 6.4.3字符串运算符 ####

"+"可以用来连接字符串，例如

p {
      cursor: e + -resize;
    }
    //编译后
    p {
      cursor: e-resize; }

这里需要注意，如果一个引号字符串连接一个非引号字符串(+前面是引号字符串)，则结果是一个引号字符串，否则+前面是非引号字符串，结果也将是非引号字符串，例如

p:before {
      content: "Foo " + Bar;
      font-family: sans- + "serif";
    }
    //编译之后
    p:before {
      content: "Foo Bar";
      font-family: sans-serif; }

我们可以在字符串内部使用\#\{\}插值方式动态值，例如

p:before {
      content: "I ate #{5 + 10} pies!";
    }
    //编译之后
    p:before {
      content: "I ate 15 pies!"; }

空的属性值在编译时会被当做空字符串处理

$value: null;
    p:before {
      content: "I ate #{$value} pies!";
    }
    //编译后
    p:before {
      content: "I ate  pies!"; }

#### 6.4.4逻辑运算符 ####

SassScript支持and or not三种逻辑运算符

#### 6.4.5列表运算符 ####

列表不提供任何特殊的运算符，相反通过函数实现大部分功能。

### 6.5括号 ###

括号用来影响运算的顺序

p {
      width: (1em + 2em) * 3;
    }
    //编译之后
    p{
      width:9em;}

### 6.6函数 ###

SassScript定义了一些类似CSS函数语法的函数，函数列表见 [这里][Link 2]。例如

p {
      color: hsl(0, 100%, 50%);
    }
    //编译之后
    p {
      color: #ff0000; }

关键字参数

Sass的函数也可以使用显示的关键字参数，例如

p {
      color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
    }

尽管这样看起来不大简洁，却可以提高代码的可读性，提高函数接口的灵活性，避免太多参数引起的调用困难。这些参数可以以任何顺序进行调用，如果有默认值的参数为可选属性可以省略，因为参数名称也是变量名，下划线和虚线不能交叉使用。  
大家可以到 [这里][Link 2]找函数列表，也可以使用Ruby自定义函数。

### 6.7 插值(Interpolation) ###

使用插值的方式，我们可以在选择器和属性名中使用变量

$name: foo;
    $attr: border;
    p.#{$name} {
      #{$attr}-color: blue;
    }
    //编译之后
    p.foo {
      border-color: blue; }

同时，我们也可以在属性值中 使用插值，插值周围的运算符将会被当成普通css处理

p {
      $font-size: 12px;
      $line-height: 30px;
      font: #{$font-size}/#{$line-height};
    }
    //编译之后
    p {
      font: 12px/30px; }

### 6.8 变量默认值 ###

使用"!Default"可以声明变量值意味着，如果这个变量已经被赋过值，保留原来的值，如果没有赋值则赋值给变量。

$content: "First content";
    $content: "Second content?" !default;
    $new_content: "First time reference" !default;
    
    #main {
      content: $content;
      new-content: $new_content;
    }
    //编译之后
    #main {
      content: "First content";
      new-content: "First time reference"; }

如果变量的值为null，SassScript则认为该变量没有被赋值

$content: null;
    $content: "Non-null content" !default;
    
    #main {
      content: $content;
    }
    //编译之后
    #main {
      content: "Non-null content"; }

待续……

## \--------------------------------------------------------------- ##

[前端开发whqet][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Sass vs. SCSS_ which syntax is better]: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
[Link 1]: http://rubyinstaller.org/
[W3Cplus]: http://www.w3cplus.com/sassguide/install.html
[compass.app]: http://compass.handlino.com/
[Scout]: http://mhs.github.io/scout-app/
[Codekit]: http://incident57.com/codekit/
[Koala]: http://koala-app.com/
[Link 2]: http://www.sass-lang.com/documentation/Sass/Script/Functions.html
[whqet]: http://blog.csdn.net/whqet