当前流行的css预处理器----sass

sass

Ruby编写 在服务端编译

less

可以在客户端使用 js编译 也可以在服务端用node编译

stylus

基于node开发的 node编译

sass

1.安装Ruby

检测是否安装成功

ruby -v

2.安装sass

gem source -a http://rubygems.org/

gem sources -a http://ruby.taobao.org/

gem install sass

检测安装成功

sass -v

3.编译

sass --watch demo.scss:deme.css

1).找到目标文件

1.文件的绝对路径

2.进入到文件当前文件夹内

4.压缩

sass --style compressed demo.scss demo.css

sass语法

1.变量

1). $color

2). $orientation :left;

如果镶嵌入 border-left-radius:5px;

border-#{$orientation}-radius:5px;

2.计算

$w :100px;

$w*2

margin:(14px/2);

3.嵌套

4.注释

/**/ 会在编译后的css中能看见

//  只能在scss文件中看见

5.继承

@extend

6.Mixin

1).定义

@mixin myclass{

}

@mixin myclass($value:100px){

$value

}

2).引用

@include

实例：省略号

@mixin ellipsis{

overflow: hidden;

word-break: keep-all;

word-wrap: normal;

white-space: nowrap;

text-overflow: ellipsis;

}

css3的属性

@mixin radius($value:5px){

-webkit-border-radius:$value ;

-moz-border-radius:$value ;

border-radius:$value ;

}

7.引入文件

@import "test.scss"