CSS预处理脚本

(以下所有操作基于mac osx) sass 1.sass的安装

  • sass的安装依赖ruby环境,所以在安装sass之前需要先安装ruby环境,如果系统没有安装ruby环境的朋友先自行google安装ruby环境,安装好ruby环境以后执行以下命令安装sass
    sudo gem install sass
  • 执行以下命令,如果正确输出版本号则表明sass已经正确安装
    sass -v
2.sass更新
  • gem update sass
3.sass的卸载
  • gem uninstall sass
4.sass的编译
  • 命令编译
    sass test.scss test.css
  • 实时监听文件的改变并编译
    sass --watch test.scss test.css
  • 使用GUI图形化界面软件编辑
    在这里给他家推荐一款作者经常使用的工具Koala,它既可以编辑sass文件也可以编辑后面要讲到的less文件
  • 自动化编译
    如果你的项目使用了gulp或者grunt等自动化工具,可以进行相关配置,自动化编译,不懂配置小伙伴可以去阅读grunt和gulp的相关文章,所有插件的配置方式都一样
5.sass的输出
  • 嵌套式输出
  • 嵌套输出带 --style expanded(带css格式的输出,样式换行)
  • 嵌套输出带 --style compact(紧凑的css格式输出)
  • 嵌套输出带 --style compressed(压缩的css格式输出)
6.sass的变量
  • 注意sass变量的作用域
  • sass通过&符号直接访问父元素
  • 属性嵌套
.box{ border:{ top:1px solid #ddd; left:2px solid #ddd; } } 编译成css就是 .box{ border-top:1px solid #ddd; border-bottom:1px solid #ddd; }

7.混合宏
  • 定义一个混合宏
@mixin name{ //样式 }

  • 调用混合宏
a{ @include name; }

  • 带参数的混合宏
@mixin name(arg:defaultValue){ //样式 }

8.拓展和继承
  • 继承
.parent{ //样式 } .test{ @extend .parent }

  • 占位符
%test{ //样式 } .h1{ @extend %test; }

  • 插值
9.sass运算(注意单位)
  • 颜色运算
  • 字符运算
  • 变量运算
10.@if{...}@else{...}
11.@for $i frome start through end / @for $i from start to end
12.@while 条件{}
13.@each $item in $list
14.sass函数
  • 字符串函数
unquote() quote() to-upper-case() to-lower-case()

  • 数字函数
percentage() round() ceil() floor() abs() min() max() random()

  • 列表函数
length() nth() join() append() zip() index()

  • Introspection 函数
type-of() unit() unitless() comparable()

  • map函数
map() map-get() map-has-key() map-keys() map-values() map-merge() map-remove() keywords()

  • 颜色函数
rgb() rgba() red() green() blue() mix() lighten() darken() saturate() desaturate() adjust-hue() grayscale() alpha() opacity() opacfy() fade-in() transparentize() fade-out()

【CSS预处理脚本】15.@规则
  • @import
  • @media
  • @extend
  • @at-root
  • @debug
  • @warn
  • @error
less

    推荐阅读