Sass基本使用

Sass是什么？

Sass是CSS预处理器，预处理器就是定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这些语言进行编码工作。

用CSS预处理器可以让你的编码效率提高十倍。

Sass 和 SCSS 有什么区别？

一开始Sass规定的语法格式是严格的缩进式语法，不带大括号和分号，所以造成程序员在写sass的时候有非常大的不习惯，虽然它是最早的预处理器，却没有人家LESS用的人多，所以又支持了使用大括号和分号，这就是SCSS。

• 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；
• 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass 和 CSS 有什么区别？

• CSS 指层叠样式表 (Cascading Style Sheets)
• Sass (Syntactically Awesome StyleSheets)，是由buby语言编写的一款css预处理语言，有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的。

Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports)等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目， 其后缀是.sass。

Sass 和 less 有什么区别？

sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等，加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用。

sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。

很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。

详细LESS基本特性

css预处理器

css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。

使用css预处理语言的好处：使css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。

• sass是css预处理语言，编译后生成css；
• sass不使用花括号和分号，使用缩进，css使用花括号和分号；
• sass支持嵌套、继承等高级功能，css不支持；
• sass更加优雅，维护更加方便；
• sass浏览器不能直接识别解析，需要经过编译器编译；
• sass的文件后缀名是.sass，css文件的后缀名是.css。
• 书写风格：

// sass
#sidebar
  width: 30%
  background-color: #faa

// css
#sidebar {
  width: 30%;
  background-color: #faa;
}

Sass语法

   $font-stack: Helvetica, sans-serif  //定义变量
   $primary-color: #333 //定义变量
   
   body
     font: 100% $font-stack
     color: $primary-color

Scss语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass的基本特性

嵌套规则

$color:#999;
body{
    background-color:$color;
    color:$color;
	h2{
		color:$color;
		div{
			color:$color;
		}
	}
}

翻译后：

body{
    background-color:$color;
    color:#999;
}
body h2{
	color:#999;
}
body h2 div{
	color:#999;
}

变量

Sass的变量包括了三个部分：

1. 声明变量的符号“$”
2.变量名称
3.赋予变量的值

例：

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表示的是默认值

计算功能：

div{
    position:absolute;
    left: (20px/2);
    top: $top * 2;
}

继承（代码的重用）

SASS允许一个选择器，继承另一个选择器。

.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

Mixin（混合宏是可以重用的代码块）

混合宏的出现主要是为了解决当样式变得越来越多，越来越复杂的时候，需要重复使用大段样式时，而使用变量又无法达到我们的目的，这个时候就要用到了混合宏。

1. 声明混合宏
   通过@mixin来声明一个混合宏：

@mixin border-radius{
    -webkit-border-radius:5px;
    border-radius:5px;
}

@mixin是混合宏的关键词，类似于css中的@media,@font-face一样。border-radius是混合宏的名称。大括号里面是复用的样式代码。

2. 带参数混合宏

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

3. 复杂的混合宏

@mixin box-shadow($shadow...) {
  @if length($shadow) >= 1 {
    @include prefixer(box-shadow, $shadow);
  } @else{
    $shadow:0 0 4px rgba(0,0,0,.3);
    @include prefixer(box-shadow, $shadow);
  }
}

box-shadow的混合宏，带有多个参数，这个时候可以使用…来代替。
意思是当$shadow的参数数值大于或等于1时，表示有多个阴影值，反之调用默认的参数值

混合宏的调用

通过关键词@include来调用声明好的混合宏，然后如果需要传参数，我们就传入参数；

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

使用：

button {
    @include border-radius;
}

插入文件：@import命令，用来插入外部文件

@import "scss/style.scss";
//如果插入的是.css文件，则等同于css的import命令

@import "style.css";

颜色函数

SASS提供了一些内置的颜色函数

　　lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

大佬：http://www.ruanyifeng.com/blog/2012/06/sass.html

拜