css预编译器

css预编译器

sass与scss的区别?

• scss是sass的升级版,scss兼容sass的功能.
• 语法上有些差异:sass采用缩进的方式表示嵌套关系,scss采用花括号表示缩进关系

//sass 太费眼了
.father
    width:100px;
    .son
        width:50px;
//scss 适合我这种眼瘸手残患者
.father{
    width:100px;
    .son{
        width:50px;
    }
} 

预编译器使用前置

安装Ruby

Ruby下载

sass基于Ruby语言开发而成
1. ruby -v 验证ruby是否安装成功
2. gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
替换gem源
3. gem sources -l 打印是否替换成功
4. gem install sass   gem install compass
5. sass -v compass -v

安装sass

scss使用

sass变量的声明

1. 嵌套
2. 变量

$color:#11111;

3. 混入

@mixin
1.可以传变量

4. 继承

@extend
1.样式继承

编译sass

编译方式

• 命令行编译

单个文件编译
sass style.scss:style.css --style nested
sass style.scss:style.css --style expanded
sass style.scss:style.css --style compact
sass style.scss:style.css --style compressed

• 软件方式编译

koala
codekit

• 其他…