Sass – 一种动态样式语言 – Less 、Sass 、Scss 、 Stylus 简介 + 区别
Sass
一种动态样式语言
Created by 左邦阳
Less 、Sass 、Scss 、 Stylus 简介 + 区别
CSS预处理器
Less Stylus基于JavaScript, 在客户端处理,Sass基于Ruby,在服务器端处理 扩展名:Less style.less , Sass style.sass/scss , Stylus style.styl 语法：变量、Mixins (混入)、继承...安装 + 配置 + 解析...
LESS只需引入JS文件<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>PS：在引入“.less”文件中，“link”的“rel”属性要设置为“stylesheet/less”。LESS源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析，当然也可在服务器端安装，基于Node JS环境安装, 安装方法就不细讲。。。 Stylus和Less 服务端的安装方法类似，同样依赖于Node JS的环境，唯一不同的是在Node JS的Command控制面板输入的命令不一样： $ npm install stylus
SASS 安装方法
到RubyInstaller官网上下载Ruby安装文件 输入以下命令:gem install sass 接下来就可以通过以下命令对style.sass进行时时编译，先找到自己项目的sass根目录，然后：sass -watch style.scss:style.cssScss基本用法
变量 计算 嵌套 注释 继承 混合 Mixin 颜色函数 插入文件 @for @while @each @function {@return} ......变量
计算 + — * / %
嵌套
注释
- SCSS的注释有两种常见方法
- //注释
- /*注释*/
- /* ! 这种注释在compressed 模式下也会出现*/
继承
混合 Mixin
颜色函数
插入文件
@import url(colores.css) @import "reset" @import "reset","css3"; @media screen and (orientation:landscape){ @import "phone" } .ie6{ @import "ie_hack" }@for
@while
@each
@function {@return}
compass+sass写css
安装命令:gem install compass
Compass 实用功能
- compass watch 实时编译scss
- 通过配置config.rb实现css自动压缩：
- 图片自动合成雪碧图，并且生成坐标
- 取img 宽高
- base64转码
- 自动生成浏览器私有前缀
配置config.rb实现css自动压缩
output_style = :expanded(带注释)，compressed(不带注释)
图片自动合成雪碧图，并且生成坐标
取img 宽高
.icon-w-h{ width:image-width('../images/icon2.png'); height:image-height('../images/icon2.png'); } 生成后的代码： .icon-w-h { width: 64px; height: 16px; }