Sass学习

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学习

命令行语法可通过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; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzpwgx.html