Sass: 不止是比Scss更精炼的语法格式

Sass,Syntactically Awesome Style Sheets的缩写,是CSS3的一个超集。它基于Ruby, 支持轻量级的变量、内置函数、Mixins、自定义函数等。它主要是为了减少重复代码的编写,以及复用性。它被更多的前端接受是在推出了Scss(Sassy CSS)的语法格式之后吧。可是我们是否考虑过,为什么它原生不去采用CSS那些语法?又或者说:它在为了适应市场而推出的Scss语法是否可以完全承袭原有所有特性?

无可厚非,原生态的Sass语法在精炼程度以及更多特性方面都更胜一筹。作为一个前端,我建议大家都去转变并适应Sass的缩进语法。如果你接触过Ruby或Python,那么,其实一点都不难。下面是我总结的一些Sass语法要点。

基本语法

缩进语法

首先,Sass整体是以缩进来保持层次关系的,而且在每一条语句结尾也不需要分隔符(冒号)。例如:


.content
  border: 1px solid #ccc
  padding: 20px
  h2
    font-size: 3em
    margin: 20px 0

Sass中的Mixins

与Scss语法中不同,Sass中以“=”定义Mixin,并以“+”调用。如下:


=box-sizing($x)
  -webkit-box-sizing: $x
  -moz-box-sizing: $x
  box-sizing: $x
.content
  +box-sizing(border-box)

List操作

我们可以通过空格或者逗号间隔来定义列表变量。


$authors: nick tom mike dan
$designers: jason, tim, lucy,mary 
@each $a in $authors
  .author-#{$a}
    background: url(#{$a}.jpg)

length($authors) // 4
.author
  float: left
  width: 100% / length($authors)

append($authors, tim) // nick tom mike dan tim
join($authors, $designers) // nick tom mike dan tim jason lucy mary

index($authors, dan) // 4, 注意是从1计数,而不是0
nth($authors, 3) // mike

$author-style: zip($authors, $designers) // nick jason, tom tim, mke lucy, dan mary
@each $a in $author-style
  .author-#{nth($a, 1)}
    background: nth($a, 2)

更多的颜色操作

不止是线性上的更改,我们可以利用以下scale_color函数去改变某一个颜色参数,从而获取到更细微更丰富的颜色。函数scale_color支持的调整因子如下;

  • $red
  • $green
  • $blue
  • $saturation
  • $lightness
  • $alpha

我们以示例说明用法:


.content
  color: scale_color(#eee, $lightness: 7%)

IF表达式:类三元操作符


$theme: light
header
  background: if($theme == dark, #000, #fff)

占位符placeholder

Sass缩进语法以下两个特性:

  1. 可以在定义的占位符同时将占位符属性赋值成一个CSS选择器
  2. 可以在占位符定义中使用嵌套

示例:


%btn
.btn  //我们稍后可以在HTML中使用该选择器
  text-transform: uppercase
  font-size: 1em
  border: 1px solid #ccc
  b //嵌套,之后继承该占位符的选择器都会生成嵌套的定义
    color: #000
.btn-a
  @extend %btn
  background: #777
.btn-b
  @extend %btn
  background: #ff0

以上只是一些Sass缩进语法中与Scss的比较,如果你希望学习更多用法,请参考官方文档