Sass

Sass是css预处理器，成熟稳重的css扩展语言可以帮助我们减少css重复的代码，节省开发时间，他兼容所有版本的css

Sass扩展了css3，增加了规则、变量、混入、选择器、继承、内置函数等

提供控制指令、自定义输出格式、易于组织和维护。Sass文件后缀.scss.

sass注意点如下：

1. sass不支持花括号和分号的方式而stylus支持的语法要更多样性一点
2. sass变量必须以$开头，然后使用冒号隔开这点跟css属性是一样的
3. sass中如果有全局变量，局部变量都同名的话，局部变量会覆盖全局变量
4. sass变量的作用域只能在当前的层级上有效果比如($myColor: red;
   
   h1 {
     $myColor: green;   // 只在 h1 里头有用，局部作用域
     color: $myColor;
   }
   
   p {
     color: $myColor;
   });h1的样式为他内部定义的green,p标签则为red；但如果使用!global全局变量p标签则为green;使用方法: $myColor: green !global;  // 全局作用域
5. 全局变量我们一般定义在一个文件中然后使用@include来包含文件。

sass变量用于存储一些信息，可以重发使用。

Sass变量可以存储：字符串、数字、颜色值、布尔值、列表、null值

sass变量使用$符号

//定义变量值

$bgcolor：red

//使用变量

boby{

            background-color:$bgcolor

}

Sass嵌套css规则

在css中重复写选择器是非常麻烦的，如果要写一大串指向页面中同一块样式时，需要一遍又一遍的写id比如:

#content article h1{color：red}

#content article  p{margin-bottom:1px}

在sass中就可以这样写，嵌套在里面，sass在输出css时会帮忙把这些嵌套规则处理好，避免你重复写比如:

#content{

        article{

                     h1{color：red}

                     p{margin-bottom:1px}

}

article{

}

}

大多情况下这种简单嵌套没问题，但是想要在嵌套的选择器里面应用一个类似于:hover的伪类不行由此提供了一个特殊结构&

rticle a {
  color: blue;
  &:hover { color: red }
}

 在ie中需要特殊编写:

#content aside {
  color: red;
  body.ie & { color: green }
}

 Sass@import

@import指令可以让我们导入其他文件内容(为了减少css重复代码节省开发时间以及项目完整整洁易读性我们可以创建一些代码文件比如:变量定义、颜色、字体等文件)

css@import指令在每次调用的时候都会创建一个额外的http请求，但sass@import指令将会把文件包含css中，不需要请求额外的http请求

语法:@import font

注：不需要指定文件后缀，sass会自动添加

如果不希望将sass的代码文件编译到一个css文件，可以在文件名的开头加一个下划线，但是在导入语句中不需要添加。

注：不能将带下划线与不带下划线同名的文件放在一个目录下，否则带下划线的文件会被忽略

Sass @mixin与@include

@mixin指令允许我们定义一个可以在整个样式表中重复使用

@include 指令可以将混入(mixin)引入到文档中

定义一个混入:

@mixin imortant-text{

color:red

}

.con{@include imortant-text;background-color: green;}

转换成css代码:

.con{color:red;background-color: green;

}

混入中也可以包含混入:

@mixin meng{

@include imortant-text;

}

向混入传递变量:混入可以接收参数，我们可以向混入传递变量，定义可以接收参数的混入；

/*混入接收两个参数*/
@mixin bordered($color,$width){
  border: $width solid $color;
}
/*调用混入*/
.con{
  @include bordered(red,1px)
}
/*css 代码*/
.con{
  border: 1px solid red;
}
/*给参数设置默认值*/
@mixin bordered($color:red,$width:1px){
  border: $width solid $color;
}

可变参数可以用来创建盒子阴影实例如下：

@mixin box-shadow($shadow...){
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
/*css*/
.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Sass  @extend 与继承

继承指令告诉Sass一个选择器的样式从另一个选择器继承.，这个函数很好的体现了代码的复用，避免重复代码的发生。

示例:

.button{
  border: 1px solid black;
  text-align: center;
}
.button-sub{
  @extend  .button;
  background-color: #F6E6E6;
}

Sass 函数

Sass定义了各种类型的函数。这些函数我们可以通过css语句直接调用

字符串相关、数字相关、list相关、map相关、选择器相关、Introspection相关、颜色相关

用到了，自行百度吧！