Sass入门（1）

前言

什么是CSS预处理器

定义：

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，“CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加了一些编程的特性，无需考虑浏览器的兼容问题”，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。

其他CSS预处理器语言：

CSS预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS预处理器语言（前三者较为流行），比如说：

  • Sass（Scss）
  • Less
  • Stylus
  • Turbine
  • Swithch CSS
  • CSS Cacheer
  • DT CSS

如何描述Sass

Sass是一门高于CSS的元语言（可以看一下元编程），它能用来清晰的、结构化地描述文件样式，有着比普通CSS更加强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

下文中Sass表示sass和scss的统称，演示方法采取scss新语法，sass则表示Sass旧语法。

sass和scss有什么区别？

sass和scss其实是同一种东西，我们平时都称之为Sass，两者之间的不同在于：

  • 文件扩展名不同，sass是“.sass”后缀为扩展名，而scss是以“.scss”后缀为扩展名；

  • 语法书写方式不同，sass是以严格的缩进式语法规则来书写，也就是说不带大括号{}和分号，而scss的语法书写和CSS语法书写方式非常类似。
    例如：

    • sass语法

      $font-stack: Helvetica, sans-serif  // 定义变量
$primary-color: #333  // 定义变量
body 
    font: 100% 
    $font-stack color: $primary-color

    • scss语法

      $font-stack: Helvetica, sans-serif;  // 定义变量
$primary-color: #333;  // 定义变量
body { 
    font: 100% $font-stack;
    color: $primary-color;
}

    • 编译后的css

      body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

sass/scss和纯CSS写法有区别吗？

  • sass和CSS 写法有差别：

    sass和CSS写法的确存在一定的差异，由于sass是基于Ruby写出来的，所以其延续了Ruby的书写规范。在书写sass时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。

  • scss和CSS 写法无差别：

    SCSS和CSS写法无差别，简单点说，就是把现有的“.css”文件直接修改成“.scss”即可使用。

sass语法格式

这里说的sass语法是Sass的最初语法格式，它是通过tab键控制缩进的一种语法规则，而且这种缩进要求非常严格，并且不能带有任何大括号和分号。所以常常把这种格式称之为Sass老版本，其文件名以“.sass”为扩展名。

例如：

body { 
    font: 100% Helvetica, sans-serif; 
    color: #333;
}

用sass的语法格式来写就是：

$font-stack: Helvetica, sans-serif
$primary-color: #333
body
    font: 100%
    $font-stack color: $primary-color

在整个sass代码中，是没有类似CSS中的大括号和分号。

scss语法格式

scss是Sass的新语法格式，从外形上来判断，它和CSS长得几乎是一模一样，代码都包裹在一堆大括号里，并且末尾结束处都有一个分号，其文件格式名常常以“.scss”为扩展名。

同样的CSS代码：

body {
    font: 100% Helvetica, sans-serif; 
    color: #333;
}

使用scss语法格式将会是下面这样：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
    font: 100% $font-stack;
    color: $primary-color;
}

这样的语法格式便于经常使用CSS的程序员。

但是不管是sass的语法格式还是scss的语法格式，它们的功能都是一样的，不同的只是书写格式和文件扩展名。

下面是对比图：


“.sass”只能使用Sass老语法规则，也就是sass语法的缩进规则，“.scss”使用的是Sass的新语法规则，也就是scss语法规则（类似CSS语法格式）。

Sass命令编译

命令编译指的是使用电脑中的命令终端，通过输入Sass指令来编译Sass，这种编译方式是最直接也是最简单的一种方式，因为只需要在你的命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出的CSS文件路径>/style.css

这是对一个单文件进行编译，如果想对整个项目所有Sass文件编译成CSS文件，可以这样操作：

多文件编译：

sass sass/:css/

上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些CSS文件都放在项目中“CSS”文件夹中。

缺点以及解决方法：

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令，这样操作太麻烦，所以在编译Sass的时候，可以开启“watch”功能，这样只要你的代码进行过任何保存修改，都能自动监测到代码的变化，并且直接编译出来。

sass --watch <要編譯的Sass文件路徑>/style.scss:<要輸出的CSS文件路徑>/style.css

当然，使用Sass命令编译时，可以带很多的参数：

watch 举例：
假设本地有一个项目，要将项目中的“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，那么可以在命令终端执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的bootstrap.scss文件有任何修改，只要重新保存了修改文件，命令终端就能监测，并且重新编译出文件：


Sass不同样式风格的输出方法

sass --watch test.scss:test.css --style nested/expanded/compact/compressed
style后面就是输出方法

  • 嵌套输出方式 nested


  • 展开输出方式 expanded


    这个输出的CSS样式风格和nested类似，只是大括号需要再另起一行。

  • 紧凑输出方式 compact


    这个方式适合喜欢单行CSS样式的人。

  • 压缩输出方式 compressed


    压缩输出方式会去掉标准的Sass和CSS注释以及空格。

Sass基础语法

变量

Sass的变量包括三个部分：

  • 声明变量的符号“$”
  • 变量名称
  • 赋予变量的值

普通变量和默认变量

普通变量

定义之后可以在全局范围内使用。

$fontSize: 12px;
body {
    font-size:$fontSize;
}

编译后的CSS代码：

body {
    font-size:12px;
}
默认变量

Sass的默认变量仅需要在值后面加上!default即可。

$baseLineHeight:1.5 !default;
body { 
    line-height: $baseLineHeight;
}

编译后的css代码：

body {
    line-height:1.5;
}

SASS的默认变量一般是用来设置默认值，然后根据需求来覆盖的。覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{ 
    line-height: $baseLineHeight; 
}

编译后的CSS代码：

body { 
    line-height:2;
}

变量的调用

在Sass中声明了变量之后，就可以在需要的地方调用变量。调用变量的方法也很简单。

例如定义了变量：

$brand-primary : darken(#428bca, 6.5%) !default;   // #337ab7 
$btn-primary-color: #fff !default;
$btn-primary-bg : $brand-primary !default;
$btn-primary-border : darken($btn-primary-bg, 5%) !default;

在按钮button中调用，可以按下面的方式调用：

.btn-primary {
    background-color: $btn-primary-bg; 
    color: $btn-primary-color; 
    border: 1px solid $btn-primary-border;
}

编译出来的CSS：

.btn-primary { 
    background-color: #337ab7; 
    color: #fff; 
    border: 1px solid #2e6da4;
}

全局变量和局部变量

  • 什么是全局变量？
    在选择器、函数、混合宏...的外面定义的变量为全局变量。
    全局变量就是定义在元素外面的变量。

    例如：

    $color: orange !default  // 定义全局变量
.block { 
    color: $color;  // 调用全局变量
}
em { 
    $color: red;  // 定义局部变量
    a
      {
          color: $color;  // 调用局部变量
      }
}
span {
    color: $color;  // 调用全局变量
}

  • 什么是局部变量

    当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全部变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

Sass中变量的概念与其他CSS预处理器不一致，例如：

  • 在Sass 3.4.0之前，Sass可以说是没有局部变量和全局变量之分的，即后声明的同名变量总是会覆盖之前的同名变量，不管后声明的变量是位于何处。

    Sass官网上 3.4.0版本的 Backwards Incompatibilities – Must Read! 中有这样一条：

    All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

    没有位于第一层（全局）的变量声明现在都被默认为是局部的。如果存在一个同名的全局变量，这个全局变量也不会被重写，除非同名的局部变量被声明时使用关键字!default。

  • Less 中的变量和其他编程语言一样，可以实现值的复用，同样它也有作用域（scope）。简单的讲，变量作用域就是局部变量和全局变量的概念。

嵌套

Sass有三种嵌套方式：

  • 选择器嵌套
  • 属性嵌套
  • 伪类嵌套

选择器嵌套

/* Sass */
nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

/* css */
nav a {
    color:red;
}
header nav a {
    color:green;
}

属性嵌套

/* Sass */
.box {
    border: {
    top: 1px solid red;
    bottom: 1px solid green;
  }
}

/* css */
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

伪类嵌套

/* Sass */
.clearfix{
    &:before,
    &:after { 
        content:""; 
        display: table;
    }
    &:after { 
        clear:both; 
        overflow: hidden; 
    }
}

/* css */
clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}

混合宏

@mixin是用来声明混合宏的关键词，@include调用声明好的混合宏。

/* 不带参数的混合宏 */
@mixin border-radius{  
    -webkit-border-radius: 5px; 
    border-radius: 5px;
}  
/* 带参数的混合宏 */
@mixin border-radius($radius:5px){ 
    -webkit-border-radius: $radius; 
    border-radius: $radius;
}

还有复杂的混合宏：

@mixin box-shadow($shadow...) {   // 带有多个参数，这个时候可以用"..."来替代
    @if length($shadow) >= 1 { 
        @include prefixer(box-shadow, $shadow); 
     } @else{ 
        $shadow:0 0 4px rgba(0,0,0,.3); 
        @include prefixer(box-shadow, $shadow); 
    }
}

混合宏的参数

  1. 传一个不带值的参数

    在混合宏中，可以传一个不带任何值的参数，例如：

    @mixin border-radius($radius) { 
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

    在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”，在调用的时候可以给这个混合宏传一个参数值：

    .box { 
    @include border-radius(3px);
}

    这里表示给混合宏传递了一个“border-radius”的值为“3px”。
    编译出来的CSS：

    .box { 
      -webkit-border-radius: 3px; 
      border-radius: 3px;
}

  2. 传一个带值的参数

    在Sass的混合宏中，还可以给混合宏的参数传一个默认值，例如：

    @mixin border-radius($radius:3px) { 
      -webkit-border-radius: $radius; 
      border-radius: $radius;
}

    在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。
    在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”：

    .btn { 
      @include border-radius;
}

    编译出来的CSS：

    .btn { 
      -webkit-border-radius: 3px;
      border-radius: 3px;
}

    但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，例如：

    .box { 
      @include border-radius(50%);
}

    编译出来的CSS：

    .box { 
      -webkit-border-radius: 50%; 
      border-radius: 50%;
}

  3. 传多个参数
    Sass混合宏除了能传一个参数之外，还可以传多个参数，例如：

    @mixin center($width,$height) {
      width: $width; 
      height: $height; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-top: -($height) / 2; 
      margin-left: -($width) / 2;
}

    在混合宏“center”就传了多个参数。
    并且在实际调用和调用其他混合宏是一样的：

    .box-center { 
      @include center(500px,300px);
}

    编译出来的CSS：

    .box-center { 
      width: 500px; 
      height: 300px; 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      margin-top: -150px; 
      margin-left: -250px;
}

    有一个特别的参数“…”，当混合宏传的参数过多的时候，可以使用该参数来替代，例如：

    @mixin box-shadow($shadows...){ 
      @if length($shadows) >= 1 { 
          -webkit-box-shadow: $shadows; box-shadow: $shadows; 
      } @else { 
          $shadows: 0 0 2px rgba(#000,.25); 
          -webkit-box-shadow: $shadow; 
          box-shadow: $shadow; 
      }
}

    在实际调用中：

    .box { 
      @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

    编译出来的CSS：

    .box { 
      -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
}

    混合宏会生成冗余的代码块，Sass在调用相同的混合宏时，并不能智能地将相同的样式代码块合并在一起。

Sass扩展和继承

Sass中是通过关键词“@extend”来继承已存在的类样式块，在Sass中的继承，可以继承类样式块中所有样式代码，而且编译出来的CSS将会把选择器合并在一起，形成组合选择器。

例如：

.btn { 
      border: 1px solid #ccc; 
      padding: 6px 10px; 
      font-size: 14px;
}
.btn-primary { 
      background-color: #f36; 
      color: #fff; 
      @extend .btn;
}

.btn-second { 
      background-color: orange; 
      color: #fff; 
      @extend .btn;
}

生成：.btn、.btn-primary、 .btn-second三个相同样式合并在一起。

.btn, .btn-primary, .btn-second { 
      border: 1px solid #ccc; 
      padding: 6px 10px; 
      font-size: 14px;
}
.btn-primary { 
      background-color: #f36; 
      color: #fff;
}
.btn-second { 
      background-clor: orange; 
      color: #fff;
}

占位符%placeholder

Sass中的占位符%placeholder功能是一个很强大，很实用的一个功能，它可以取代以前CSS中的基类造成的代码冗余的情况。因为%placeholder声明的代码，如果不被@extend调用的话，不会产生任何代码。
例如：

%mt5 { 
      margin-top: 5px;
} 
%pt5{ 
      padding-top: 5px;
}

这段代码没有被@extend调用，它没有产生任何代码块，只是静静地躺在某个Sass文件中，只有通过@extend调用才会产生代码：

%mt5 { 
      margin-top: 5px;
}
%pt5{ 
      padding-top: 5px;
}
.btn { 
      @extend %mt5; 
      @extend %pt5;
}
.block { 
      @extend %mt5; 
      span { 
          @extend %pt5; 
      }
}

编译出来的CSS：

.btn, .block { 
      margin-top: 5px;
}
.btn, .block span { 
      padding-top: 5px;
}

从编译出来的CSS代码可以看出，通过@extend调用的占位符，编译出来的代码会将相同代码合并在一起。

混合宏、继承、占位符的区别

Sass插值#{}

使用CSS预处理器语言的一个主要原因是想使用Sass获得一个更好的结构体系。例如说想要写更干净的、高效和面向对象的CSS。Sass中的插值(Interpolation)就是重要的一部分。

例如：

$properties: (margin, padding);
@mixin set-value($side, $value) { 
      @each $prop in $properties {
        #{$prop}-#{$side}: $value; 
      }
}
.login-box { 
      @include set-value(top, 14px);
}

它可以让变量和属性工作得很完美，上面的代码编译成CSS：

.login-box { 
      margin-top: 14px; 
      padding-top: 14px;
}

这是Sass插值中简单的例子，当你想设置属性值的时候可以使用字符串插入进来。另一个有用的办法是构建一个选择器，例如：

@mixin generate-sizes($class, $small, $medium, $big) { 
      .#{$class}-small { font-size: $small; } 
      .#{$class}-medium { font-size: $medium; } 
      .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

编译出来的CSS：

.header-text-small { 
    font-size: 12px; 
}
.header-text-medium { 
    font-size: 20px; 
}
.header-text-big { 
    font-size: 40px; 
}

一旦發現這一點，就會想到用`mixins`來生成代碼或是另一個`mixins`，但是會有限制，可能會刪除用於Sass變量的插值。
例如：

一旦发现这一点，就会想到用mixins（混合指令）来生成代码或是另一个mixins，但是会有限制，可能会删除用于Sass变量的插值。

例如：

$margin-big: 40px;
$margin-medium: 20px;
$margin-small: 12px;
@mixin set-value($size) { 
      margin-top: $margin-#{$size};
}
.login-box { 
      @include set-value(big);
}

上面的Sass代码编译出来会得到：

error style.scss (Line 5: Undefined variable: “$margin-".)

所以，#{}语法并不是随处可用的，也不能在mixin中调用：

@mixin updated-status { 
      margin-top: 20px; 
      background: #F00;
}
$flag: "status";
.navigation { 
      @include updated-#{$flag};
}

上面代码在编译成CSS时同样会报错：

error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")

但是可以在@extend中使用插值，例如：

%updated-status { 
      margin-top: 20px; 
      background: #F00;
}
.selected-status {
      font-weight: bold;
}
$flag: "status";.navigation { 
      @extend %updated-#{$flag}; 
      @extend .selected-#{$flag};
}

上面的Sass代码是可以运行的，可以动态地插入.class和%placeholder，但是不接受mixin这样的参数，例如上面的代码编译出来的CSS：

.navigation { 
      margin-top: 20px; 
      background: #F00;
}
.selected-status, .navigation { 
      font-weight: bold;
}

Sass注释

  • 类似css注释方法，使用“/”开头，结尾使用“/”。

  • 类似Javascript的注释方法，使用“//”。

    两者的区别在于，前者会在编译出来的CSS中显示，而后者不会显示。

Sass字符串

SassScript 支持 CSS 的两种字符串类型：

  • 有引号的字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
  • 无引号的字符串 (unquoted strings)，如 sans-serifbold。

在编译CSS文件时不会改变其类型，但如果是使用#{}插值语句 (interpolation) 时，有引号的字符串将会被编译成无引号的字符串，这样方便了在混合指令mixin中引用选择起名。

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

编译为：

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

需要注意的是：当deprecated = property syntax 时（暂时不理解是为什么），所有字符串都将被编译为无引号字符串，无论是否使用了引号。

Sass值列表

所谓值列表（lists）是指Sass如何处理CSS中：

margin: 10px 15px 0 0;

或者：

font-face: Helvetica, Arial, sans-serif;

像上面这样通过空格或者逗号分隔的一系列的值。
事实上，独立的值也被视为值列表——只包含一个值的值列表。

Sass列表函数（）赋予了值列表更多的功能：

  • nth函数（nth function）可以直接访问值列表中的某一项；
  • join函数（join function）可以将多个值列表连结在一起；
  • append函数（append function）可以在值列表中添加值；
  • @each规则（@each rule）则能够给值列表中的每个项目添加样式。

Sass运算

加法

加法运算是Sass运算中的一种，在变量或属性中都可以做加法运算。
例如：

.box { 
    width: 20px + 8in;
}

编译出来的CSS：

.box { 
    width: 788px;
}

但对于携带不同类型的单位时，在Sass中计算会报错，如下所示：

.box {
  width: 20px + 1em;
}

编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'”。

减法

Sass的减法运算和加法运算类似。
例如：

$full-width: 960px;
$sidebar-width: 200px;
.content { 
    width: $full-width **-** $sidebar-width;
}

编译出来的CSS：

.content { 
    width: 760px;
}

在减法中，单位不同也会报错。

乘法

Sass中的乘法运算和前面介绍的加法与减法运算略有不同，虽然乘法可以支持多种单位（例如em、px、%...），但当一个单位同时声明两个值时会有问题。
例如：

.box { 
    width:10px * 2px; 
}

编译的时候报“20px*px isn't a valid CSS value.”错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可，上面的例子可以修改成：

.box { 
    width: 10px * 2;
}

编译出来的CSS：

.box { 
    width: 20px;
}

Sass的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也会报错。

例如：

.box { 
    width: 20px * 2em;
}

编译时报“40em*px isn't a valid CSS value.”错误信息。

除法

Sass的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处，众所周知“/”符号在CSS中已经作为一种符号使用。因此在Sass中做除法运算时，直接使用“/”符号作为除号时，将不会生效，编译时既得不到所想要的效果，也不会报错。

“/”符号被当作除法运算符时有以下几种情况：

  • 如果数值或它的任意部分是储存在一个变量中或是函数的返回值。
  • 如果数值被圆括号包围。
  • 如果数值是另一个数学表达式的一部分。

如下所示：

p { 
      font: 10px/8px;  // 纯CSS，不是除法运算 
      $width: 1000px; 
      width: $width/2;  // 使用了变量，是除法运算 
      width: round(1.5)/2;  // 使用了函数，是除法运算 
      height: (500px/2);  // 使用了圆括号，是除法运算 
      margin-left: 5px + 8px/2px;  // 使用了加号（+），是除法运算
}

编译出来的CSS：

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

在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。

变量计算

在Sass中除了可以使用数值进行运算之外，还可以使用变量进行计算。
例如：

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;
.container { 
      width: $content-width + $sidebar-width + $gutter; 
      margin: 0 auto;
}

编译出来的CSS：

.container {
    width: 960px;
    margin: 0 auto;
}

数字运算

在Sass运算中数字运算是较为常见的，数字运算包括前面的：加法、减法、乘法和除法等运算，而且还可以通过括号来修改它们的运算先后顺序。

.box {
      width: ((220px + 720px) - 11 * 20 ) / 12 ;  
}

编译出来的CSS：

.box {
      width: 60px;
}

颜色运算

所有算术运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。
例如：

p { 
      color: #010203 + #040506;
}

计算公式为01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09，并且被合成为：

p { 
      color: #050709;
}

算数运算也能将数字和颜色值一起运算，同样也是分段运算的。
例如：

p { 
      color: #010203 * 2;
}

计算公式为01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06，并且被合成为：

p { 
      color: #020406;
}

RGBA模式也可以运算，但R、G、B的最高值超过255将会显示255，最低值小于0将会显示0。
例如：

p {
      color: rgba(178, 34, 34, 0.54) + rgba(178, 34, 34, 0.54);
}

会等于：

p {
      color: rgba(255, 68, 68, 0.54);   // R超过255所以显示255，G和B的值都相加，A=0.54不变
}

但是需要注意的是：

p {
      color: rgba(178, 34, 34, 0.34) + rgba(131, 23, 24, 0.54);
}

会报错：Error: Alpha channels must be equal: rgba(178, 34, 34, 0.34) + rgba(131, 23, 24, 0.54)。

**因为A值如果相同，是不参与运算之中，值保持不变。但如果A值不同则会报错。 减法同理。 **

而在RGB模式中，运算后将会转换成十六进制（Hex）颜色值。

字符运算

在Sass中可以通过加法符号“+”来对字符串进行连接。
例如：

$content: "Hello" + "" + "Sass!";
.box:before { 
    content: " #{$content} ";
}

编译出来的CSS：

.box:before { 
    content: " Hello Sass! ";
}

除了在变量中做字符连接运算之外，还可以直接通过“+”，把字符连接在一起：

div { 
    cursor: e + -resize;
}

编译出来的CSS：

div { 
    cursor: e-resize;
}

注意，如果有引号的字符串被添加了一个没有引号的字符串（也就是说，带引号的字符串在“+”加号的左侧），结果将会是一个有引号的字符串。同样的，如果一个没有引号的字符串被添加了一个有引号的字符串（没有引号的字符串在“+”加号的左侧），结果将会是一个没有引号的字符串。
例如：

p:before { 
    content: "Foo " + Bar; font-family: sans- + "serif";
}

编译出来的CSS：

p:before {  
    content: "Foo Bar"; 
    font-family: sans-serif;
}

Sass控制命令

@if

@if指令是一个SassScript，它可以根据条件来处理样式块，如果条件为true的话返回一个样式块，反之false则返回另一个样式块。在Sass中除了@if之外，还可以配合@else if和@else一起使用。

假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过@if...@else...来判断传进参数的值来控制display的值。

例如：

@mixin blockOrHidden($boolean:true) {
    @if $boolean {
        @debug "$boolean is #{$boolean}"; 
        display: block; 
    } @else { 
    @debug "$boolean is #{$boolean}"; 
        display: none; 
    }
}
.block { 
    @include blockOrHidden;
}
.hidden{ 
    @include blockOrHidden(false);
}

编译出来的CSS：

.block { 
    display: block;
}
.hidden { 
    display: none;
}

@for

在制作网格系统的时候，大家应该对.col1~.col12这样的印象比较深。在CSS中需要一个个去书写，而在Sass中，可以使用@for循环来完成。而在Sass的@for有两种方式：

  • @for $i from <start> through <end>

  • @for $i from <start> to <end>

编译出来的CSS：

.item-1 { width: 2em;}
.item-2 { width: 4em;}
.item-3 { width: 6em;}

再来个 to 关键字的例子：

@for $i from 1to

.item-#{$i} { width: 2em * $i; }

编译出来的CSS：

.item-1 { width: 2em;}
.item-2 { width: 4em;}
  • 2016/12/23 第一次编辑，基本采用《慕课网》中《Sass入门篇》资料，补充了”颜色值运算“的一点小实验和自身遇到不懂知识的补充。
  • 2018/05/24 第二次编辑，补充Sass与Less变量差别的相关部分。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,029评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,395评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,570评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,535评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,650评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,850评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,006评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,747评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,207评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,342评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,964评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2赞 349

推荐阅读更多精彩内容

  • shell十三问
    为何叫做 shell ？ shell prompt(PS1) 与 Carriage Return(CR) 的关系？...
    Zero___阅读 3,142评论 3赞 49
  • 提問的智慧How To Ask Questions The Smart Way
    提問的智慧 How To Ask Questions The Smart Way Copyright © 2001...
    Albert陈凯阅读 2,251评论 0赞 8
  • 你身边的人，决定你的高度
    每个人都活在圈子里，朋友圈、亲人圈、职场圈。这些圈子是你最熟悉的领域，而圈子里那些与你交集最多的人，对你的影响...
    辉常心阅读 755评论 1赞 6
  • D89早睡早起
    参加工作坊学习，开启了早睡早起模式。昨天11点睡早上6点也醒了。今天准备10点入睡，明天早起。瑜伽唤醒我们的身体让...
    Redchen阅读 252评论 0赞 0
  • 因为 I love you
    今天听人说，那种喜欢到不行的感觉，突然感到，好心酸 。喜欢到不行的那种感觉是什么？或许就是，可以为了他，不给自己留...
    帅气如吾阅读 307评论 1赞 0