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

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

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

sass注意点如下：

sass不支持花括号和分号的方式而stylus支持的语法要更多样性一点
	
sass变量必须以$开头，然后使用冒号隔开这点跟css属性是一样的
	
sass中如果有全局变量，局部变量都同名的话，局部变量会覆盖全局变量
	
sass变量的作用域只能在当前的层级上有效果比如($myColor: red;


	h1 {

	  $myColor: green;   // 只在 h1 里头有用，局部作用域

	  color: $myColor;

	}


	p {

	  color: $myColor;

	});h1的样式为他内部定义的green,p标签则为red；但如果使用!global全局变量p标签则为green;使用方法: $myColor: green !global;  // 全局作用域
	
全局变量我们一般定义在一个文件中然后使用@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相关、颜色相关

用到了，自行百度吧！

 

 

  Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目，

  Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS)，是一个 CSS3 语法的扩充版本，这份参考资料使用的就是此语法。第二种比较老的语法成为缩排语法（或者就称为 “Sass”）， 提供了一种更简洁的 CSS 书写方式。 它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，而且也不使用分号，而是用换行符来分隔属性。

github地址：https://github.com/San-Shui/sass 

clone远程仓库到本地：


  
git clone https://github.com/San-Shui/sass.git


进入gulp目录


  
cd sass


安装依赖


  
yarn install 或者 npm install 


运行项目


  
gulp


运行之后会生成一个dist目录，dist目录下的文件是通过配置gulp自动生成。



修改src目录下的任何文件都会自动刷新网页



Sass基础—Sass语法：http://www.w3cplus.com/sassguide/syntax.html 

Sass基础—颜色函数: http://www.w3cplus.com/preprocessor/sass-color-function.html 

Sass基础—Sass函数:http://www.w3cplus.com/preprocessor/sass-other-function.html

SASS

安装

SASS是采用Ruby语言编写的，想要使用SASS就必须安装Ruby。

安装Ruby
Ruby安装完成后，安装sass。sudo gem install sass
安装中可能出现的问题：

gem install fails with openssl failure
使用

在WebStorm中创建后缀为.scss的样式文件，导入样式文件的后缀为.css：

<link rel="stylesheet" type="text/css" href="main.css">

安装sass和sass预处理器
npm install sass sass-loader