CSS语言预处理----SASS一分钟快速入门

1.先安装ruby

下载地址https://rubyinstaller.org/

2.安装sass和compass

gem install sass
 gem install compass

3.创建scss文件

@charset "utf-8";
//变量
$text-color:#000;
//通用样式
@mixin el1 {
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -ms-text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
//方法
@mixin border-radius($width){
    border-radius:$width;
    -webkit-border-radius:$width;
    -moz-border-radius:$width;
    -o-border-radius:$width;
    -ms-border-radius:$width;
}
//继承(缺点:编译后在外面出现该css)
.commonText {
    font-size:22px;
    font-weight:900;
}
//占位符(与继承的区别是,不会在外面出现该css)
%mt15 {
    margin-top:15px;
}
body {
  .box {
    @extend .commonText; // 继承使用
    @extend %mt15; //占位符使用
    @include border-radius(5px); // 方法使用
    @include el1; // 混合宏使用
    color:$text-color; // 变量使用
    cursor:pointer;
    border:1px solid #ccc;
    width:124px;
    &:hover {
      color:red;
    }
  }    
}

4.编译监听scss文件

sass --watch index.scss:index.css

5.愉快的使用css文件吧