SASS入门1

2015年10月19日
1.SASS和SCSS的区别
1）文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2）语法书写方式不同，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;
}

2.SASS/SCSS与CSS写法的差别
1）SASS无大括号和分号
2）SCSS与CSS写法无差别

3.SASS的编译
SASS的编译方法：命令编译、GUI工具编译、自动化编译
1）命令编译
命令编译是指使用电脑中的命令终端，通过输入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

 watch举例：

假设我本地有一个项目，我要把项目中"bootstrap.scss"编译成"bootstrap.css"文件，并且把编译出来的文件放在"css"文件夹中，我可以在命令端执行：
sass --watch
sass/bootstrap.scss:css/bootstrap.css
一旦bootstrap.scss文件有任何修改，只要重新保存了修改的文件，命令终端就能监测，并能重新编译出文件

2）GUI界面工具编译

4.输出方式
1）嵌套输出方式nested
Sass提供了一种嵌套显示CSS文件的方式。例如：

nav{
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        }
       li{
          display: inline-block;
          }
        a{
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            }
}

在编译的时候带上参数"--style nested";
编译出来的 CSS 样式风格：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

2）展开输出方式expanded

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在编译的时候带上参数"--style expanded":
sass --watch test.scss:test.css --style expanded

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：

nav ul { 
            margin: 0; 
            padding: 0; 
            list-style: none;
          }
nav li {
           display: inline-block;
          } 
nav a { 
display: block; 
padding: 6px 12px; 
text-decoration: none;
          }

3）紧凑输出方式compact

nav{
      ul{
          margin: 0;
          padding: 0;
          list-style: none;
        }
        li{
            display: inline-block;
          }
         a{
              display: block;
              padding: 6px 12px;
              text-decoration: none;
            }
}

在编译的时候带上参数"--style compact":
sass --watch test.scss:test.css --style compact

该方式适合那些喜欢单行 CSS 样式格式的朋友，编译后的代码如下：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

4）压缩输出方式 compressed

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在编译的时候带上参数"--style compressed":
sass --watch test.scss:test.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。

5.Sass的调试
只要浏览器支持"sourcemap"功能即可在浏览器中调试。早一点的版本，需要在编译的时候添加"--sourcemap"参数:
sass --watch --scss --sourcemap
style.scss:style.css

在Sass3.3版本之上，不需要添加这个参数也可以：
sass --watch style.scss:style.css

在命令终端，你将看到一个信息：

Change detected to: style.scss
write style.css
write style.css.map
这时你就可以调试你的代码

6.声明变量
定义变量的语法：
以"$"开头： $width: 300px;
Sass变量包括三个部分：
1.声明变量的符号"$"
2.变量名称
3.赋予变量的值

来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量：

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

如果值后面加上!default则表示默认值

7.普通变量与默认变量
1）普通变量
定义之后可以在全局范围内使用。

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

编译后的css代码：

body{
    font-size: 12px;
}

2）默认变量
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;}

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

8.变量的调用
在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;
}

9.局部变量和全局变量
示例：

//scss
$color: orange  !default;//定义全局变量(在选择器、函数、混合宏....的外面定义的变量为全局变量)
.block{
  color: $color;//调用全局变量
}
em{
        $color:  red;//定义局部变量
          a{
              color: $color;//调用局部变量
            }
}
span{
      color: $color;//调用全局变量
}

css的结果:

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：
$color: orange !default;

$color就是一个全局变量，而定义在元素内部的变量，比如$color:red;是一个局部变量。

除此之外，Sass现在还提供一个!global参数。!global和 ！default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。

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

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