Sass 入门笔记

在编译 Sass 代码时常常会碰到一些错误，让编译失败。这样的错误有系统造成的也有人为造成的，但大部分都是人为过失引起编译失败。

而最为常见的一个错误就是字符编译引起的。在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败，在编译过程中都会有具体的说明，大家可以根据编译器提供的错误信息进行对应的修改。

嵌套输出方式 nested
展开输出方式 expanded  
紧凑输出方式 compact 
压缩输出方式 compressed

嵌套输出方式 nested
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”:

sass --watch test.scss:test.css --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; }

展开输出方式 expanded
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;
}

紧凑输出方式 compact
2、嵌套输出方式 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; }

压缩输出方式 compressed
2、压缩输出方式 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}

声明变量

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;
如果值后面加上!default则表示默认值。

普通变量与默认变量
普通变量
定义之后可以在全局范围内使用。
$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;
}

 

变量的调用

//Welcome to imooc learning 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;
$width:100px;

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

什么时候声明变量？

什么时候声明变量？

我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：

该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）。
基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：

http://sassmeister.com/

 

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

.box {
  width: 20px + 1em;
}
编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.

 如果想本地安装 请参考念牧的ppt：下载地址：http://download.csdn.net/detail/u012922417/9455577