强大优雅的sass层叠样式--看完马上能用【原创】

 

sass是css的扩展语言,保留了css的特征,弥补了css的缺陷,css更加强大,优雅,多功能,在使用sass过程时,你可以嵌套,引用,定义变量,加入参数等等,下面就来介绍sass的安装和用法,看完你马上就能用,从此不再被css拖累。

img

一、安装

  1. 因为sass基础ruby语言开发,所以首先确认电脑有有没有安装了ruby,如果还没有,可以点击ruby下载安装。

  2. 下载安装好之后,需要查看有没有安装成功,需要打开CMD输入以下命令:

ruby -v //如安装成功会打印 ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
  1. Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件,所以我们要gem源,用以下命令来查看gem源。
gem sources -l
  1. 如果发现没有任何东西,需要安装gem源:
gem sources -a http://rubygems.org/
  1. 查看是否添加成功:
gem sources -l   *** CURRENT SOURCES *** http://rubygems.org/
  1. 然后就可以安装sass系统了。
gem install sass gem install compass//sass可以结合compass使用。

二、使用

1.在D:盘中创建项目文件untitled2, 再创建sass文件夹 创建 test.scss 文件 。

2.启动rubyCMD,找到存放 test.scss 文件夹的位置 ,输入命令:(进入到sass文件夹内)。

img

一下代码把test.scss文件转换为css格式的文件,文件夹内生成如下图两个文件

sass test.scss test.css

img

3.监听

如果如果想监听整个文件,需要回到sass的父目录,本例中是untitled2, 输入下面命令,就会自动生成一个css的文件,并且把 .scss格式的文件对应生成 .css结尾的css文件

sass --watch --style expanded sass:css //compressed为编译后的缩进格式 //以下四中均为输出样式,下面用法会详细介绍。 

nested //嵌套输出 
expanded //展开输出 
compact //紧凑输出 
compressed //.压缩输出 

img

三、语法

1、嵌套规则

sass中可以把一套css样式嵌套到另一套样式当中,是sass出色的原因之一。父元素嵌套着子元素,层层关系,避免重复输写父元素,使得复杂的css也能在书写和阅读上更加清晰易管理。属性也可以进行嵌套。

属性嵌套 nav {     
border: { //注意 border后面的  
style: solid; 
width: 1px;      
color: #ccc;      } 
}  //样式嵌套


#main p {   
color: #00ff00;   width: 97%;    
.redbox {     background-color: #ff0000;     color: #000000;   } 
}

编译之后:

nav{border: 1px solid #ccc;} 
#main p {color: #00ff00;width: 97%; } 
#main p .redbox { background-color: #ff0000; color: #000000; }

2、可以用 & 引用父元素

在写sass过程中,有时需要使用父元素,可是由于嵌套的格式,父元素嵌套着子元素,这时,可以用&来代替需要引用的父元素。

 a {     
&:hover { color: #ffb3ff; } 
}  //相当于  a:hover{color: #ffb3ff}

3、所有变量用$开头

在sass中可以定义变量,变量以美元符号开头,不在嵌套中定义的变量是全局变量,可以在任何地方使用,在嵌套中定义的变量只能在嵌套中使用。将局部变量转换为全局变量可以添加 !global

 

$blue : #1875e7;    

div {        
$height: 10px!global;       
$width: 5px;    
color : $blue;      
width: $width; 
}

4、#{ }

如果变量需要镶嵌在字符串中,要放在插值语句 #{ }里面,插值语句 #{ }可以sass中的任何地方使用。比如插值属性名,和插值属性值。

$side : left;   
.rounded {     
border-#{$side}-radius: 5px; 
}

属性值可以是css里面的属性名,字sass中比较灵活,在定义的属性值中可以是css中的属性值,一遍我们使用。例如:

$color-red: #f00; 
$border-color: green; 
$side: left;//值是css属性名。  

border-#{$side}-radius: 5px;  //相当于border-left-radius: 5px;

5、sass还可以在代码中使用算式

这个也是sass最为出色的地方,甩css十条街,在以往的css中,计算尺寸也是个问题,比如把一个宽为100%的元素分成3分,每份根本不知怎么分配,一点都不好计算。而sass可以直接运用算式可以很轻松的解决这个问题。

body {   
margin: (14px/2);   
top: 50px + 100px;   
right: $var * 10%; 
}

6、sass注释

sass中有时也要使用注释,支持/* */ 与 // 的注释,而他们之间却被编译之后却会有不同的效果。

/* comment */  //会保留到编译后的文件。

单行注释:

comment //只保留在SASS源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是”重要注释”。即使是压缩模式编译,也会独占一行,保留这条注释,通常可以用于声明版权信息。

/*!      重要注释! */

四、代码的重用:

1、类的继承:用@extend;

在写css的时候,通常会遇到两个元素样式一样的情况,但是其中一个元素又添加了额外的样式,在sass中可以直接使用@extend来引用另外另外一个元素完全的样式。

.class1 {     
border: 1px solid #ddd; }  

.class2 {     
@extend .class1;     
font-size:120%; }

2、@mixin混合模式

既然可以用@extend引用一个元素的样式代码块,那会不会存在一个代码块,需要被多处使用?在写项目的过程中,肯定会有,比如flex样式,就经常重复写。在sass中,用@mixin 命令定义一个代码块, 解决了这个问题,使用@include命令调用这个代码块,使得定义好的代码块加入到项目中,避免了从复书写的麻烦和。让经常重复书写的代码块只需要写一次就好,多次被@include加到项目中。定义的代码块不会被编译,不会出现在.css文件中。

@mixin flex {     
float: left;     
margin-left: 10px; } 

div {     
@include left; 
} 

@mixin 强大之处不仅可以定义代码块,还可以加入一个或者多个参数,把它封装成一个“函数”,在调用的时候加入参数可以灵活多变地被调用,如果使用默认值可以不填参数项。

@mixin left($value: 10px) {     

float: left;     
margin-right: $value; 
}

调用的时候可以根据需要加入参数:

div{     
@include left(100px) 
}

插入文件

@import 插入文件像css插入文件那样。

@import "path/filename.scss"; @import url(test.css); //相当于

五、高级用法

1.@if(条件)

@if就像js里面的判断语句if,判断是否符合条件,如果返回的结果是true,才会输出{}里面的代码块,否则不会输出。

p {  
 @if 1 + 1 == 2 { border: 1px solid; }   
@if 5 < 3 { border: 2px dotted; }   
@if null  { border: 3px double; } 
} //编译后p {border: 1px solid; }

这个用法也可以用于自适应,判断屏幕的宽度,从而对应输出适应各种屏幕的样式代码块。

@if $container-width < 960{   
width: $container-width - 300px;   
background-color: red; 
}

2、@else

这个也是相当于js语法里面的else语句,如果 if 语句的条件为false,则执行该代码块。@if后面可以跟多个@if else,当@if else的判断全部都为false时,左后执行@else代码块。

@if lightness($color) > 30% {     
background-color: #000;   } 

@else {     
background-color: #fff;   }

3、@for循环

@for也是相当于JavaScript for 循环,可以将代码快执行指定的次数,在这个格式里面,要存在一个变量,例子中就是$i,存在一个循环的范围,$i from 1 to 10,在这个范围里面循环执行{}里面的代码快。

@for $i from 1 through 3 {   

.item-#{$i} { width: 2em * $i; } }  //编译为 
.item-1 {   width: 2em; } 
.item-2 {   width: 4em; } 
.item-3 {   width: 6em; }

4、@while循环

@while循环同样也等同于JavaScript while 循环,判断条件,符合则执行下面的代码快。

$i: 6;   
@while $i > 0 {     
.item-#{$i} { width: 2em * $i; }     
$i: $i - 2;   }

5、@each遍历

@each等同与each()方法,使每个匹配的元素都执行{}代码块。在@each用法里会存在一个值列表,更像是一个数组,将变量作用于数组的每一项,对应输出结果。

@each $member in a, b, c, d {     
.#{$member} {       
background-image: url("/image/#{$member}.jpg");     
  }   
}   

//编译后   
.a{background-image: url("/image/#{$member}.jpg");}   
.b{background-image: url("/image/#{$member}.jpg");}   
.c{background-image: url("/image/#{$member}.jpg");}   
.d{background-image: url("/image/#{$member}.jpg");}

自定义函数

在sass中还可以使用@function自定义函数,和@mixin一样,可以使用一个或者多个参数,更像javascript中的function函数,@function定义的函数可以包含多条语句,需要使用@return输出。

@function double($n) {     
@return $n * 2;   }   
#sidebar {     
width: double(5px);   
}   //编译后   


#sidebar {     
width: 10px;   
}

总结

1.所有变量用$声明;

2.用&代替父元素。

3.镶嵌在属性中的变量用#{};

继承类名用: @extend .类名;

声明代码块用:@mixin 名 (变量参数) { };

引用代码快:@include 名;

定义函数@function 函数名(变量参数){ @return 输出语句 }

img

本文为博主原创文章,知识共享,开源精神,转载注明出处。