sass 语法简介

基本语法：

变量

sass通过$声明变量，例如：

$headline-ff:Arial;
$main-sec-ff:Tahoma;

h1{
	font-family: $headline-ff;
}

@import

利用sass的@import能力，创建变量文件，并引入宿主文件：

宿主文件screen.scss代码：

@import "variables" //前置下划线 和 后缀.scss或者sass可以省略，所以统一目录下 有了_variables文件就不能再有variables文件
h1{
   font-family: $headline-ff;
}

变量文件_variables.scss代码：（利用compass watch 时，如果创建的scss文件名前加入了下划线_,则不会被编译对应的css文件）

$headline-ff:Arial;
$main-sec-ff:Tahoma;

经过编译后的screen.css代码：

h1 {
  font-family: Arial;
}

原生css中@import与scss中@import的区别：

原生css@import的缺点：

1、需要放到代码最前端才生效

2、当浏览器读到这条@import指令时才会加载对应的@import的文件。性能差

scss中@import特点：

1、可以放到scss文件的任意位置，scss在编译后会将 宿主文件和 变量文件 合并到一个css文件

2、宿主文件中可以任意引用变量文件中的 变量和mixin函数。

3、默认@import指令的中路径相对于宿主文件，那为何compass生成的项目中的 @import "compass/reset" 也会生效？解释说是sass提供一个load_paths询问路径选项，compass通过配置这个选项将compass的路径加入到sass的load_paths询问路径中。

4、可以一次@import多个文件，利用逗号分隔：

@import "_variables.scss","compass/reset";

如何在scss中引用css中的@import？

满足下图中条件则仍是引用css原生的@important

scss中的注释：

1、支持// 和/**/

2、在编译后的css文件中，以//注释的内容不会被输出，以/**/注释的内容会被输出。

3、编译后的css文件中会有自动生成的注释信息，方便我们定位相应的.scss文件，方便样式调试。如何关掉这个调试信息？

scss提供的嵌套语法：

选择器嵌套：

scss文件：

$headline-ff:Arial;
$main-sec-ff:Tahoma;

div{
	font-family: $main-sec-ff;
	h1{
		font-family: $headline-ff;
	}
}

编译后的css文件：

div {
  font-family: Tahoma;
}
div h1 {
  font-family: Arial;
}

属性嵌套：

scss文件：

div{
	font:{  //不要丢掉冒号":"
		family: Tahoma;
		size: 16px;
	}
}

编译后的css文件：

div {
  font-family: Tahoma;
  font-size: 16px;
}

区别下面两种写法：

scss文件

a{
	:hover{
		color: #c50000
	}
}
a{
	&:hover{   //”&“为父类选择器。
		color: #c50000
	}
}

编译后的css文件：

a :hover {
  color: #c50000;
}

a:hover {
  color: #c50000;
}

高级语法：

函数分类：

1、与代码块无关的函数，多事内置函数，称：functions 。 地址：http://sass-lang.com/documentation/Sass/Script/Functions.html

2、可重用的代码块，又分为两类：

使用时以复制拷贝的方式使用，通过@include方式调用，称为mixin；

使用时以组合声明的方式存在，通过@extend方式调用。

mixin函数定义以及调用：

不含参数的mixin：

@mixin col-6{
    width:50%;
    float: left;
}
@mixin c-gray9{
    color:#999;
}
.web-sec{
    @include col-6;
    @include c-gray9;
    height: 30px
}

编译后的css

.web-sec {
  width: 50%;
  float: left;
  color: #999;
  height: 30px;
}

可以看出：@include可以多次引用，可以和普通样式混合写。

含参数的mixin：

@mixin col($width:50%){ //:后面跟默认参数值
	width:$width;
	float: left;
}

.web-sec{
	@include col;
}
.web-sec{
    @include col(30%);
}

编译后的css

.web-sec {
  width: 50%;
  float: left;
}

.web-sec {
  width: 30%;
  float: left;
}

@extend使用

.err{
    color:#c50000;
}
.err span{
    color:#999;
}
.alert{
    background-color:yellow;
}

.err-2{
    @extend .err;
    @extend .alert;
    border:1px solid #c50000;
}

编译后的css

.err, .err-2 {
  color: #c50000;
}
.err span, .err-2 span {
  color: #999;
}
.alert, .err-2 {
  background-color: yellow;
}
.err-2 {
  border: 1px solid #c50000;
}

由上看出：@extend同样可以同时引用多个；后代选择器（又称为包含选择器）同样会继承；

同时@extend也可以连续继承，A被B继承的同时B又被A继承

.err{
	color:#c50000;
}

.err-2{
	@extend .err;
	border:1px solid #c50000;
}
.err-3{
	@extend .err-2;
}

编译后css

.err, .err-2, .err-3 {
  color: #c50000;
}
.err-2, .err-3 {
  border: 1px solid #c50000;
}

@extend的两个注意点：

1、@extend不可以继承选择器序列

.err span{
	color:#c50000;
}
.err-2{
	@extend .err span; //错误，编译后的css文件会报错
	border:1px solid #c50000;
}

2、使用%，用来构建只用来继承的选择器

%err{
	color:#c50000;
}
.err-2{
	@extend %err;
	border:1px solid #c50000;
}

编译后css

.err-2 {
  color: #c50000;
}
.err-2 {
  border: 1px solid #c50000;
}

sass中的@media

@mixin col-sm(){
	@media(min-width:640px){
		width:50%;
		float: left;
	}
}

p{
	@include col-sm;
}
div{
	
	@media(max-width:640px){
		width:100%;
	}
	width:960px;
	margin:0 auto;
}

编译后的css

@media (min-width: 640px) {
  p {
    width: 50%;
    float: left;
  }
}

div {
  width: 960px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  div {
    width: 100%;
  }
}

sass中的@at-root指令

.box{
	color:#666;
	@at-root .header{
		height: 30px
	}
}

.box2{
	color:#666;
	.header{
		height: 30px
	}
}

编译后的css

.box {
  color: #666;
}
.header {
  height: 30px;
}

.box2 {
  color: #666;
}
.box2 .header {
  height: 30px;
}

@at-root 将scss中嵌套的样式 提到最外层

@mixin 参数校验

将下面mixin函数添加参数校验：

@mixin col-sm($width:50%){
	width:$width;
}

添加校验后

@mixin col-sm($width:50%){
	@if type-of($width) != number{
		@error "$width 必须是数值,你输入的是: #{$width}.";
	}
	@if not unitless($width){ //如果带单位
		@if unit($width) != "%"{
			@error "$width应该是一个百分值,你输入的是: #{$width}.";
		}
	} @else {
		@warn "$width应该是一个百分值,你输入的是: #{$width}.";
		$width: percentage($width/100);
	}

	width:$width;
}

查看其它相关语法：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

config.rb配置文件简介：

1、控制编译后的css文件样式

output_style = :expanded or :nested or :compact or :compressed

遇到的坑：

1、报错：" Invalid GBK character"

解决办法：在config.rb配置文件中添加：Encoding.default_external = "utf-8"  ;

2、与js不同，mixin函数中的分号最好不要省略，有时会报错。