首页 > 代码库 > 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 增强语法的样式表