第一次用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!