(欢迎访问:http://www.3body.tk/iblog/)
Sass是一个建立在CSS上面的元语言(meta-language),相对于CSS来说,它能够使用更加整洁和结构化的语法来描述文档的样式。Sass提供了一个简单,优雅的CSS语法,同时还实现了很多方便管理样式表的特性。
安装Sass需要的工具
Linux 用户:
sudo apt-get install ruby1.9.1
Sass是使用Ruby实现的,所以你必须安装Ruby环境。
sudo gem install sass
Sass是CSS3的扩展, 增加了嵌套规则,变量,混入,选择器继承等等。
sudo gem install compass
Compass是一个开源CSS生成框架
Windows 用户:
对于windows用户,需要先安装Ruby gem 然后执行下面的命令:
gem install sass gem install compass
MAC 用户:
gem install sass gem install compass
使用compass创建一个工程
cd path/to/where-you-want-your-project
定位到你想创建工程的目录,对于一个自定义的theme来说,一般是 sites/all/themes。
compass create project-name
上面的命令会使用project-name 创建一个文件夹,并将你的工程安装到这个文件夹里。
自动监视并编译compass的改变
cd path/to/project compass watch // 或者使用下面的快捷写法 compass watch path/to/project
如果想手动编译,执行下面的命令:
compass compile [options]
这个命令的详细参数可以参考:
http://compass-style.org/help/tutorials/command-line/
http://compass-style.org/help/tutorials/production-css/
一些实用的Sass示例
sass中的变量
全部使用同样的颜色和宽度。Sass支持变量并支持对变量做数学运算。
.SCSS Syntax $blue: #3bbfce; $width: 100px; .main{ color: $blue; width: $width; } .footer { width: $width / 2; }
上面的代码会输入下面的css:
.main{ color: #3bbfce; width: 100px; } .footer { width: 50px; }
Sass的嵌套机制
Sass可以对选择子进行嵌套使用,避免重复的定义。对于属性也同样可以使用。
.SCSS Syntax #navigation #main-menu ul { background: #e5e5e5; border: 1px solid #e2e2e2; li { padding: 5px 10px 5px 10px; &:hover { background: #ccc; a { color: #fff; } } a { text-decoration: none; text-shadow: 1px 2px rgb(211, 200, 200); } } }
上面的代码会输入下面的css:
#main-menu ul { background: #e5e5e5; border: 1px solid #e2e2e2; } #navigation #main-menu ul li { padding: 5px 10px 5px 10px; } #navigation #main-menu ul li:hover { background: #ccc; } #navigation #main-menu ul li:hover a { color: #fff; } #navigation #main-menu ul li a { text-decoration: none; text-shadow: 1px 2px #d3c8c8; }
Sass中的混入
混入比变量更加有用,你可以重用整个CSS,属性或者选择子的代码段。甚至可以使用传入参数。
.SCSS Syntax @mixin left($dist) { float: left; margin-left: $dist; } #data { @include left(10px); }
上面的代码会输入下面的css:
#data { float: left; margin-left: 10px; }
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21394548/viewspace-757907/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/21394548/viewspace-757907/