1st 介绍及安装使用:
Sass(Syntactically Awesome StyleSheets)
Sass与Less一样,也是CSS预处理器,有着变量(variables),嵌套(Nested rules),混合(mixins)等功能。使用如Compass的样式库有助于更好的组织管理文件,以及高效开发项目!
语法格式:
有两种写法:1.SCSS(sassy css),这种只是在css语法基础上进行扩展,以.scss格式结尾;2.缩进格式(indented sass),通常称作“sass”。使用的是ruby语法,缩进代替花括号,换行代替分号。这种格式以.sass结尾。(ruby,日本人发明的,前些年与python其名,世界上很多网站是用ruby写的,如早期的Twitter。但是国内环境不是很好,原先我也没怎么接触过这么语言。)
推荐SCSS写法!与css无痕过渡!
使用Sass:
三种方法使用Sass:作为命令行工具;作为独立的Ruby模块(module);作为Rack-enabled框架的插件(如ruby on rails与Merb)。但是无论哪种方式都需要先安装Sass gem!
windows系统需要先安装ruby,点击链接跳转。苹果默认已经安装了,Windows系统-----╮(╯▽╰)╭
安装命令:gem install sass
命令行语法可通过sass --help进行查看!
运行sass编译文件:
sass test.scss test.css
监视单个sass文件,每次修改保存时自动编译!
sass --watch test.scss:test.css
监视整个文件夹:
sass --watch app/scss:public/stylesheets
2nd 快速入门
2.1 变量(variable):使用$符号标识(老版本用!标识)
示例example.scss:
$testColor:gold; .test1{ color:$testColor; $width:100px; width: $width; }