第一次用Sass

之前好长一段时间在一些老外的博客上看到Sass这个东西,可是一直都没在意,直到今天用了才知道这东西原来是如此的方便,大大的提高了工作效率,下面我简单的给大家介绍一下。

Sass到底是什么东西?

Sass是CSS的一种扩展语言,官方网址:Sass-lang.com,它的全称是:Syntactically Awesome StyleSheets,看到有一个Awesome就感觉很霸气!Sass有两种语法格式 1).文件扩展名为Scss 2).文件扩展名为Sass,我们将要介绍的是Scss的语法。
这里要说明的是:浏览器认识的是.css文件,而不认识.scss或者.sass的文件,所以Sass会把.scss或者.sass文件最终输出成.css的文件。
Sass的安装这里就省略,请参考Sass的官方网址:Sass-lang.com

内嵌式语法

比如说我要把#header里面的a加一个背景颜色,在CSS里可以这么写:

#header a{
	background:orange;
}

但在Sass中我可以这样写:

#header{
	a{
		background:orange;
	}
}

你可能会想,这样写有什么好处?不是还多写了一些东西吗?其实在一个项目中写这样的语法是很便于管理和查找的,比如说我现在只写页面头部的样式,除了一些公共样式之外,其它的我全写在#header里面,这样的话,所有的东西都只在#header里面,这样就不会乱,很容易可以找到#header里面元素所对应的样式规则。

属性也可以嵌套

我们以前设置一个元素内文字的字体、大小、胖瘦等等属性可能会这样写:

.funky {
	font-family: arial;
	font-size: 30em;
	font-weight: bold; 
}

在Sass中,你可以这样写:

.funky {
	font: {
		family: arial;
		size: 30em;
		weight: bold;
	}
}

对父元素的引用 – &符

对于上面的例子,如果我们想要给#header里面的a标签加一个:hover伪类,这个时候该怎么办呢?你可能会这样写:

#header{
	a{
		background:orange;
	}
	a:hover{
		color:orange;
	}
}

其实我们可以用&符来对父元素进行引用:

#header{
	a{
		background:orange;
		&:hover{
			color:orange;	
		}
	}
}

在Sass中使用变量

上面所介绍的这些特性还不够吸引你?别着急,接着往下看。
我们在给一些元素设置颜色相关的属性的时候,可能会时不时的切换到PS中取一下色值,把十六进制色值复制过来,写了很多的CSS以后,再想用到以前用过的一个色值,又得回到PS中重新取一下。现在在Sass中你可以把一个色值定义成一个变量,这样可以重复使用:

	$specialRed: #e56c6c;

我在后面就可以使用$specialRed这个变量了:

.red{
	color:$specialRed;
}

这样是不是很方便?

Sass中的@import

Sass中的@import有好几种用法,我们只说说它与众不同的一些地方。

分离文件

我们在一个项目中,可能要根据不同的功能或者分类来对CSS文件进行管理,比如说我在style.scss中要引入一个只是用来控制排版的文件名为typography的文件,但是我们不想让Sass生成typography.css文件,只需要生成style.css文件引入网页中的话,我们可以把typography另存成文件名为_typography.scss的文件,然后在style.scss中导入:

	@import "typography";

这样,我们就可以达到目的了。

内嵌式@import

如果example.scss中有这样一条样式:

.example {
	color: red;
}

这时别的元素再导入这条样式:

#main {
	@import "example";
}

Sass会输出成:

#main .example {
	color: red;
}

Sass中使用@media Queries

假如,当浏览器的窗口宽度低于800px的时候,我们想把#pagewrap的背景改成红色,而当宽度低于500px时,把#pagewrap的背景改成绿色,在CSS中我们需要这样写:

@media (max-width:800px) {
	#pagewrap{
		background:red;
	}
}
@media (max-width:500px) {
	#pagewrap{
		background:green;
	}
}

但是在Sass中我们可以把@media嵌在规则里面:

#pagewrap {
	@media (max-width:800px) {
		background:red;
	}
	@media (max-width:500px) {
		background:green;
	}
}

OMG!That’s awesome!!!

强大的Mixin和Function

从上面的变量概念就可以看出,Sass把编程的概念搬到了CSS中,Mixin和Function则是把这一概念更加深化了。

Mixin的基本用法

@mixin sexy-border($color, $width) {
	border: {
		color: $color;
		width: $width;
		style: dashed;
	}
}
p { @include sexy-border(blue, 1in); }

可以看到,在用sexy-border时,我们是动态的把颜色和宽度传过去的。

Function的基本用法

	$grid-width: 40px;
	$gutter-width: 10px;

	@function grid-width($n) {
		 @return $n * $grid-width + ($n - 1) * $gutter-width;
	}

	#sidebar { width: grid-width(5); }

上面的代码最终会输出成以下内容:

#sidebar {
	width: 240px;
}

结语

我用了Sass以后觉得它可以大大的提高我们的工作效率,所以强烈推荐大家使用。这篇文章只是一个简单的介绍,如果大家想深入学习,可以参考Sass的官方文档:http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
Bye-Bye!