sass

635 阅读1分钟

(一)前端css预处理语言

(二)sass的安装以及在普通项目的使用

1.安装ruby

2.安装好sass和compass之后,新建一个测试项目

gem install sass
gem install compass  

3.然后在项目根目录下打开命令执行compass watch,

compass watch是一个监听,当有sass内容变化时就会自动编译。

4.效果如下图所示

5.在index.html中引入

1. 混合器

@mixin rounded-corners{
    -moz-border-radius:5px;
    -wekit-border-radius:5px;
    border-radius:5px;
}

在样式表中可以使用通过@include来使用这个混合器。
notice{
    background-color:green;
    border:2px solid #000;
    @include rounded-corders;
}

最终形成正常的编译效果。

2。使用选择器继承来精简css

//通过选择器继承样式
.error{
    border:1px solid red;
    background-color:#000;
}
.seriousError{
    @extend .error
    border-width:3
}