sass的学习记录

摘要：核心团队不懈努力，一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

兼容CSS:
Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
特性丰富:
Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。

sass和scss两种方法：

Sass 有两种语法格式。首先是 SCSS (Sassy CSS) —— 也是本文示例所使用的格式 —— 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

完全兼容 CSS3

在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能

通过函数进行颜色值与属性值的运算

提供控制指令 (control directives)等高级功能

自定义输出格式

简单的嵌套如下：

body{
    font-size: 12px;
    footer{
        color: red;
    }
}

会被编译成如下css：

body{
    font-size: 12px;
}
body footer{
    color: red;
}

其中每一级都可以使用正常的css样式选择器，包括基本类型选择器、结合选择器、伪类选择器、伪元素选择器。

body{
    &.app{
        font-size: 12px;
    }
}

编译成 自身选择器：

body.app{
        font-size: 12px;
    }

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

编译为

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

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
    clear: both;
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

编译后的结果：

#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。
ps：在@media中暂时不能@extend @media外的代码片段，以后将会可以。

多行注释 /* */

单行注释 //

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import "reset.css"，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

//被导入sass文件a.scss：
//a.scss
//-------------------------------
body {
  background: #eee;
}

//需要导入样式的sass文件b.scss：
@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

转译出来的b.css样式：

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。

在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性，允许属性使用变量、算数运算等额外功能。
通过 interpolation，SassScript 甚至可以生成选择器或属性名，这一点对编写 mixin 有很大帮助。

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;
//直接使用即调用变量：
#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}
//编译为
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

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

$baseLineHeight: 2;
$baseLineHeight:  1.5 !default;

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

SassScript 支持 6 种主要的数据类型：

数字，1, 2, 13, 10px

字符串，有引号字符串与无引号字符串，"foo", "bar", baz

颜色，blue, #04a3f9, rgba(255,0,0,0.5)

布尔型，true, false

空值，null

数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif

maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

其中数字运算可以使用，SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值

如果值被圆括号包裹

如果值是算数表达式的一部分

颜色值运算 (Color Operations):颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值,计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09：

    p {
      color: #010203 + #040506; //#050709
    }

字符串运算 (String Operations):如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
 content: "Foo " + Bar;
 font-family: sans- + "serif";
   }
   //编译为
   p:before {
 content: "Foo Bar";
 font-family: sans-serif;
}
   运算表达式与其他值连用时，用空格做连接符：  
   margin: 3px + 4px auto; // margin: 7px auto;  
   在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：  
   content: "I ate #{5 + 10} pies!"; //content: "I ate 15 pies!";

布尔运算 (Boolean Operations): SassScript 支持布尔型的 and or 以及 not 运算。

@import的使用

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；

文件名以 http:// 开头；

文件名是 url()；

@import 包含 media queries。

@extend

使用 @extend 可以告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。可以多次继承传递，
暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素，但是，却可以将其他元素延伸给选择器列

有时会遇到复杂的情况，比如选择器列中的某个元素需要延伸给另一个选择器列，这种情况下，两个选择器列需要合并，

Sass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们多带带使用时，不会被编译到 CSS 文件中。

类似@each @if @if @for @else if @extend @include等指令完全把css的书写变得很灵活，可以像正常的编程一样的去处理样式。

一般的模式是一个index.scss入口文件来不断的引入@import其他的模块，建议的方式：

//index.scss
@charset "utf-8";
@import "./core/veriables.scss";
@import "./core/reset.scss";
@import "./core/mixin.scss";
@import "./core/extend.scss";
@import "./core/base.scss";
@import "./core/m-head.scss";
@import "./core/m-body.scss";
@import "./core/m-fot.scss";

//reset.scss
浏览器初始化样式
//veriables.scss
sass变量
//mixin.scss
mixin指令
//extend.scss
占位符
//base.scss
基础样式
//m-head.scss
页面头部
//m-body.scss
页面中间
//m-foot.scss
页面底部

需要注意：

所有的scss都会被引入到index.scss内，然后一起编译；

注意作用域，在一些全局模块定义的变量、指令、占位符可以被其他的页面样式模块引用；

如果页面样式的头部重新定义了mixin、变量将会发生覆盖；

本文仅仅是一个学习笔记，比较的杂乱

所有的全局方法