Sass基本语法

sass是一种基于ruby语言开发的CSS预处理器。它可以使用变量,嵌套,混入,继承,运算,函数等编程语言具有的特性进行CSS的开发,使得CSS的开发变得简单粗暴清晰可维护。
sass有两种后缀文件格式:一种是sass后缀形式;一种是scss后缀形式。我选择的后缀是scss

注释

sass有两种注释方式:一种是”/* */“,标准的CSS注释;还有一种是双斜杠形式”//“。
前者在编译之后会作为注释在CSS文件中出现,但是后者不会。

变量(variable)

sass可以像编程一样编写CSS。在sass中可以声明变量,并在整个样式表中调用,是不是很酷?你可以在文件的任意位置声明变量,但是必须先声明才能使用。

变量的声明必须是**$开头**,后面接着变量名,(就像php一样),而变量名和变量值之间则用:连接(就像写CSS一样)。在值的后面加上**!default**表示默认值。如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

//单行注释,不会被编译在CSS文件上 /*基本样式定义*/ //这里是声明变量 $globalFontSize:1em; $headerH1:1.5em; $bodyBgRed:red; $textColor:#343 !default;//默认值 $SIZE:size; //这里调用变量,先声明才能调用 body{ font-#{$SIZE}:$globalFontSize; background:$bodyBgRed; color:$textColor; } //编译后得到的CSS /*基本样式定义*/ body { font-size: 1em; background: red; color: #334433; }

也可以在写CSS部分的时候重新定义属性值,这样我们就不用修改引用的文件,只要重新定义需要修改的变量就可以了。

//这里重新定义属性值 body{ font-size:$globalFontSize; background:$bodyBgRed; color:#999;//重新定义了color的值 } ------------ //编译后得到的CSS body { font-size: 1em; background: red; color: #999; }

一个变量也可以设置多个值,通过**nth($variables,index)**来调用其中的值,其中index从1开始,不是0。

//声明变量 $textColor:#343434 #f00 #fff #456 !default; //调用 body{ color:nth($textColor,1);//选择了$textColor的第一个值#343434 } a{ color:nth($textColor,2);//选择了$textColor的第二个值#f00 } p{ color:$textColor; } ---------- //编译后得到的CSS body { color: #343434; } a { color: red; } p { color: #343434 red white #445566; } //**p部分编译之后color的属性值包括了$textColor所有的值;** //color:#343434 #f00 #fff #456;

##嵌套(nesting) sass分两种嵌套:一种是选择器嵌套;一种是属性嵌套
###选择器嵌套 通过在一个选择器中嵌套另一个选择器实现继承。在嵌套过程中。可以用&表示父元素选择器。

//sass $float:left right; $navBg:#345; .nav{ padding:10px; width:960px; background:$navBg; li{ float:nth($float,1); } a{ display:block; padding:5px 10px; color:#fff; &{ /*写在a的内部第一层*/ font-size:30px; } } &{ /*写在a的外部,.nav的内部第一层*/ font-size:30px; } } -------- //编译后的CSS .nav { padding: 10px; width: 960px; background: #334455; } .nav li { float: left; } .nav a { display: block; padding: 5px 10px; color: #fff; } .nav a { /*写在a的内部第一层*/ font-size: 30px; } .nav { /*写在a的外部,.nav的内部第一层*/ font-size: 30px; }

###属性嵌套 有些CSS属性有相同的单词开头,如background,可以利用属性嵌套来编写。

//sass body{ background:{ color:#343; image:url(../images/bg.png); repeat:repeat; position:left top; attachment:scroll; clip:content-box; size:50%; } } ------- //编译后的CSS body { background-color: #343; background-image: url(../images/bg.png); background-repeat: repeat; background-position: left top; background-attachment: scroll; background-clip: content-box; background-size: 50%; }

##混合(mixin) 估计mixin可以算是sass中最强大的特性,利用mixin可以将一部分CSS从代码中抽出,定义成一个模块重复使用。可以在公用的样式中定义一个mixin模块,需要的时候直接调用就好了。同时,mixin还可以传递参数,尼玛越来越向编程了…… ####声明一个mixin模块 使用**@mixin声明一个mixin,后面紧接着mixin的名,可以传递参数,同时给参数设定一个默认值。 但是要注意,参数也是要用$开始,而且参数名和参数值是用冒号**分开。如果一个属性有多个值,比如box-shadow等,那参数就用变量名加上三个点表示” $variable… ” 。

//声明一个mixin模块 //boxRect @mixin boxRect($W:20px,$H:20px){ width:$W; height:$H; } //box-shadow @mixin shadow($shadow...){ -webkit-box-shadow:$shadow; -moz-box-shadow:$shadow; -o-box-shadow:$shadow; box-shadow:$shadow; }

上述代码简单的声明了两个mixin模块。

####调用声明的mixin模块

用**@include**调用已经声明的模块。
在@include之后紧接着mixin模块名,就像调用函数一样(尼玛简直就是在编程啊),如果模块有默认参数。模块后面的括号可以省略。

//sass .boxRect400{ @include boxRect();//不加参数,使用默认参数,可以省略括号,也可以留着 } .boxRect200{ /*调用了boxRect模块*/ @include boxRect(20px,10px); } .shadow{ /*调用了shadow模块*/ @include shadow(0 1px 1px rgba(0,0,0,0.5)); } .nav{ @include boxRect(10px,10px); @include shadow(0 1px 1px rgba(0,0,0,0.5)); &:hover{ @include shadow(0 2px 3px rgba(0,0,0,0.7)); } } ------- //编译后的CSS .boxRect400 { width: 20px; height: 20px; } .boxRect200 { /*调用了boxRect模块*/ width: 20px; height: 10px; } .shadow { /*调用了shadow模块*/ -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .nav { width: 10px; height: 10px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } .nav:hover { -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); -o-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7); }

####@content的诞生 为了解决CSS3中@media带来的麻烦,sass引入了**@content**使得mixin可以接受一整块的样式。

//声明模块 //这个模块包含了要定义的属性,和前面的讲到的使用是一样的 @mixin mediaContent(){ width:200px; height:100px; color:#345; font-size:20px; } //使用@content来引入一整块样式 @mixin max-screen($max){ @media screen and (max-width:$max){ @content;//接受的样式块从这里开始 } } //调用模块 @include max-screen(720px){ body{ @include mediaContent(); } } ------- //编译后的CSS @media screen and (max-width: 720px) { body { width: 200px; height: 100px; color: #345; font-size: 20px; } }

##继承(extend)

@extend可以复制一个class或者ID中的属性,然后将它们添加到另一个class或者ID的属性列中。

//sass //sass .blue_button{ background:#336699; font-weight:bold; color:white; padding:5px; } .org_button{ border-color:orange; } //对比一下@include @mixin red_button(){ background:#f00; font-weight:bold; color:white; padding:5px; } @mixin org_button(){ border-color:orange; } .checkout_button{ //继承了两个class @extend .blue_button; @extend .org_button; //引用了两个模块 @include red_button(); @include org_button(); } ------- //编译之后的CSS .blue_button, .checkout_button { background: #336699; font-weight: bold; color: white; padding: 5px; } .checkout_button { background: #f00; font-weight: bold; color: white; padding: 5px; }

可以看到,使用@include即引用模块时,其实是以复制的形式添加目标的属性,而使用@extend即 继承时,则是将被继承的对象和自身联合,在文件中一起声明一次,大家都叫“联合声明”。 ####占位选择器 从3.2。0之后可以定义占位选择器%。
假设在基础文件中定义了很多基础的样式,然后实际上不管是否使用@extend继承相应的样式,所有的代码都会编译解析成CSS,这样一来就会有很多多余的CSS。占位选择器的诞生很好的解决了这个问题。添加了占位选择器之后,只有被继承了的部分才会被解析出来。

//sass %bgRed{ background:red; } bgBlue{ background:blue; } %bgYellow{ background:yellow; } body{ @extend %bgRed; } ------- //编译之后的CSS body { background: red; } .bgBlue { background: blue; }

定义了两个占位选择器%bgRed和%bgYellow,但是%bgYellow没有调用,所以在解析的时候便不会包含bgYellow部分。 占位选择器可以使CSS文件更加精炼简洁。一般用在定义基础的样式定义上。

##运算 sass可以对数值进行加减乘除四则运算。注意运算符前面要加上一个空格。

$baseFontSize:14px; $baseWidth:200; // $baseHeight:($baseFontSize *$baseWidth)/2+30; body{ height:$baseHeight; } ------- //编译之后的CSS body { height: 1430px; }

值得注意的是:在运算表达式中,如果有多个变量,最好保证只有一个带单位的变量,不然很有可能报错。上述的代码中,如果将$baaeWidth中的”200”改成”200px”,就有多个单位,将会报错,无法通过编译。

##函数 sass定义了一些很多函数可以使用,同时也可以自己定义函数,@function。 使用函数的方法也很简单,使用函数名加上括号就可以了,有参数的话就带上参数。

//sass @function pxToRem($px){ @return $px / $baseFontSize *1rem; }

#####sass几个常见用的颜色函数 Lighten/Darken函数,修改亮度

#page{ color:lighten(#336699,20%); } //编译后的CSS #page{ color:#6699cc; }

Saturate/Desaturate函数,修改饱和度

$main_color:#336699; #page{ color:saturate($main_color,30%); } //编译后的CSS #page{ color:#1466b8; }

adjust-hue函数,修改色度

$main_color:#336699; #page{ color:adjust-hue($main_color,180); } #page{ color:adjust-hue(desaturate($main_color,10%),90); } //编译之后的CSS #page { color: #996633; } #page { color: #8f3d8f; }

grayscale函数,100%\降低饱和度,这个方法与下面代码是一样的效果。

desaturate(#336699,100%);

Mix函数,混合颜色

#page{ color:mix(#336699,#993266); } //编译后的CSS #page { color: #664c7f; }

##选择和循环 条件判断 sass真的就是将CSS当成编程语言来折腾了。提供判断循环来编写CSS。 ####选择 @if可可以和**@else**结合多条件使用,就像写程序一样。

//sass $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } ------- //编译之后的CSS p { color: green; }

####for循环

for循环有两种形式,分别为:

@for $var from <start> through <end>

@for $var from <start> to <end>。

$i表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to不包括end这个数。

//sass @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } ------- //编译之后的CSS .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

####sass中的三目运算 if($condition, $if_true, $if_false) 。
三个参数分别表示条件,条件为真的值,条件为假的值。

if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px

基本语法结束,在学习过程中感觉到了sass的魅力。编写CSS变得有趣,而且简单粗暴!!!!!