首页 > 代码库 > Sass 增强语法的样式表
Sass 增强语法的样式表
功能:
- 完全兼容CSS3
- 相对CSS,扩展了变量、嵌套和mixins
- 对控制颜色和其他值的非常有用的方法
- 高级功能,如库的直接控制
- 良好的格式,自定义输出
语法
对于Sass,有两种语法。一种叫SCSS(Sassy CSS),它是CSS语法的扩展,也就是说,每个有效的CSS3样式对于一个有效的SCSS。并且SCSS理解更多的CSS技巧和厂商特性,里如果IE8的filter语法。第二种是旧些的语法,叫SASS。提供一种写CSS的便捷方式。前者的文件后缀名是.scss,后者是.sass。使用Convert命令可以相互转换:sass-convert style.sass style.scss反之亦然
使用方法
1. 安装
$gem install sass
2. 转换
sass input.scss output.css
3. 监控
$sass --watch input.scss:output.css
目录:
$sass --watch app/sass:public/stylesheets
CSS扩展
1. 嵌套规则
Sass允许CSS嵌套到另外一个CSS中。例如:
#main p { color: #00ff00; width: 97%; .redbox { background-color: #ff0000; color: #000000; }}
编译后:
#main p { color: #00ff00; width: 97%;}#main p .redbox { background-color: #ff0000; color: #000000; }
2.引用父选择器:&
在嵌套使用中,有时候需要引用父元素:
a { font-weight: bold; text-decoration: none; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; }}
编译后:
a { font-weight: bold; text-decoration: none; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }
3.嵌套属性
在同一个命名空间下,CSS有时候会有多个属性,例如font-family,font-size和font-weight都在font命令空间下。使用嵌套,将减少输入。Sass提供冒号(:)来支持这个方法。例如:
.funky { font: { family: fantasy; size: 30e m; weight: bold; }}
编译后:
.funky { font-family: fantasy; font-size: 30em; font-weight: bold; }
也是可以带值的
.funky { font: 20px/24px fantasy { weight: bold; }}
编译后:
.funky { font: 20px/24px fantasy; font-weight: bold;}
注释
方法:/* */或者//
@规则
1. @import
导入SCSS和Sass文件。所有导入的文件都会被合并成一个单独的CSS文件。另外,变量和mixins都可以在主文件中引用。
在一次import中,可以导入多个文件,之间使用逗号隔开。例如:
@import "rounded-corners", "text-shadow"
可以引入变量:
$family: unquote("Droid+Sans");@import url("http://fonts.googleapis.com/css?family=#{$family}");
编译后:
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
Sass 增强语法的样式表
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。