Sass & Compass 初步使用

一、需安装的东西

  • ruby(mac自带)

  • gem(sources可能被墙)

  • sass

  • compass

查看安装情况:

ruby -v
gem -v
sass -v
compass -v

查看 gem 的 sources:

gem sources

Sass & Compass 初步使用

可参考资料

  • 如何安装 Ruby、Sass、Compass(Windows,使用 Ruby China 镜像)

二、实操

  1. 使用终端进入选定的目录

  2. compass 初始化

  3. sass 编写

针对1:

  • mac可能用到的命令:

cd xxx
ls
  • win可能用到的命令:

E:
cd xxx
dir

针对2:

  • 进入到特定目录后,输入命令:

compass init    // 方式1
compass create [project_name]    // 方式2,会创建一个以project_name命名的compass目录
  • config.rb是compass目录的配置文件,可根据个人需求修改(重要)

针对3:

  • 体验sass的强大吧(与css比较)

// reset
@import "compass/reset";

// css3圆角
@import "compass/css3";
.box{
    @include border-radius(5px);
}

// css3渐层
.box{
    @include background(linear-gradient(lighten(red, 20%), red)); 
}

// sprite
@import "icons/*.png";
@include all-icons-sprites;  //all-后面的‘icons’代表文件夹名字
  • compass会监测目录下文件变动而进行实时编译(可能需要watch一下)

Sass & Compass 初步使用

可参考资料:

相关推荐