scss入门学习(一)

sass的文件后缀名

sass是目前流行的css预处理语言。sass有两种后缀文件，一种是.sass,不允许使用大括号和分号；另一种是.SCSS，允许使用大括号和分号,类似于我们平时写css的语法习惯。其实sass最早出现在2007年，但却没有后来的LESS流行和易于接受，最主要的原因是sass严格的语法要求不太符合csser编写，sass为了改变这种现状，迎合大众，推出了更为宽松的SCSS这种类css写法。

sass文件的编译

sass扩展了css的写法，为css提供了变量，继承，宏等能够提高效率和增强维护性的新概念。是不是说我们直接就可以在html文件中引用.sass文件了么?答案是否定的，浏览器并不会认识sass语法形式，而只会解析.css文件资源，所以我们需要将sass编译成css。

主要有以下几种编译方式：

命令编译

单文件编译：

1	sass <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

多文件编译：

1	sass sass/:css/

实时监听文件更改

1	sass --watch <要编译的sass文件路径>/style.scss:<要输出的css文件路径>/style.css

GUI界面工具编译

Koalo
CodeKit

自动化编译

自动化编译因你使用的工具的不同而不同。当前流行的有gulp，grunt，webpack等。

不同样式风格的css输出方法

嵌套输出方式(nested)

1	sass test.scss:test.css --style nested

展开输出方式(expanded)

1	sass test.scss:test.css --style expanded

紧凑输出方式(compact)

1	sass test.scss:test.css --style compact

压缩输出方式(compressed)

1	sass test.scss:test.css --style compressed

变量

声明变量

— 1.变量声明符号($)
— 2.变量名称
— 3.赋予变量的值

1	$width: 100px;

普通变量和默认变量

在普通变量后加上关键字!default即可声明默认变量.默认变量的价值再进行组件化开发的时候非常有用。

1	$width: 100px !default;

局部变量和全局变量

在选择器，函数，混合宏…外面声明的变量为全局变量。相应的在块内部声明的变量为局部变量。局部变量在块内会覆盖全局变量。

$color: orange !default; //全局变量
.a{	
	$color: red; // 全局变量
	color: $color;  // color: red大专栏  scss入门学习(一)br/>}
.b{
	color: $color;  // color: orange
}

变量的调用

$width: 100px !default;
.container{
	width: $width;
}

混合宏(mixin)

当你的网站中有几处样式类似，比如颜色，字体时用变量就可以统一处理了；但是当你有大段的样式需要复用时，变量就无法达到目的了。而混合宏就变得很有意义了。

声明混合宏

— 混合宏声明符号(@mixin)
— 混合宏名称
— (可重用的)代码片段

不带参数的混合宏

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

带参数的混合宏

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

复杂的混合宏

@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)
}

调用混合宏

— 混合宏调用的关键字@include
— 混合宏的名称

继承／扩展

当两个样式有高度可重用代码时，我们可以定义一个基类，将相似度高的代码提取出来，然后子类继承(extend)父类。

<!-- 定义一个基类 -->
.btn{
	border: 1px solid 
	padding: 6px 10px;
  	font-size: 14px;	
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn; // 继承
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn; // 继承
}

占位符%placeholder

当定义一个基类的时候，如果没有子类继承他(extend)，就会造成代码冗余。我们使用占位符声明的代码，如果不被@extend调用的话，将不会产生任何代码。

1
2
3

%mt5{
	margin-top: 5px; //如果没有子类继承，代码中不会显示
}

优先使用占位符；如果需要传参数，使用宏；没有参数，使用继承。