css3,scss和sass

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等.
SCSS即是SASS的新语法，是Sassy CSS的简写.
scss可以通过框架的扩展自动转换成css。
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
优点，使用嵌套语法快速编写。
安装
1.安装ruby
2.gem install sass
使用
1.转化命令
sass test.scss
sass test.scss test.css(生成test.css文件)
2.4个编译风格
* nested：嵌套缩进的css代码，它是默认值。
* expanded：没有缩进的、扩展的css代码。
* compact：简洁格式的css代码。
* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。例如 sass –style compressed test.sass test.css
3.自动监听并编译
// watch a file
sass –watch input.scss:output.css
// watch a directory
sass –watch app/sass:public/stylesheets
基本用法
1.使用变量$2.使用计算 3.选择器嵌套 4.注释//编译后不保留 或者/× ×/编译后保留 5.重用代码@extend.class1;继承/@mixin class（$value: 10px）定义代码块class,参数值$vlaue缺省值10px 使用@include class（20px）;使用
6.颜色函数lighten,darken,grayscale,complement
7.插入文件@import
8.高级用法 @if @else @for @while @each @function @return