调整字号

Sass语法

Sass 是一个 CSS 预处理器,简单来说是一种更强大的书写 CSS 的方式,允许你在 CSS 中使用变量、嵌套、函数等等。Sass 的意思是 Syntactically Awesome StyleSheets(语法上更牛的样式表)。

Sass 有两种语法,一种叫 SCSS(Sassy CSS),扩展名 .scss,语法更接近原生 CSS,实际上也完全兼容原生的 CSS,另一种叫 Sass,扩展名 .scss,不使用分号,并且用缩进来代替花括号:

/* SCSS */
#main {
  color: blue;
  font-size: 0.3em;
}

/* Sass */
#main
  color: blue
  font-size: 0.3em

缩进语法的细节看这里

对 CSS 的扩展

规则嵌套

Sass 允许在 CSS 规则中进行嵌套:

#main p {
  width: 97%;

  .redbox {
    background-color: #ff0000;
  }
}

编译后的结果

#main p {
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000; }

Sass 会自动把 #main p 加到 .redbox 前。

引用父选择器:&

可以用 & 来引用父选择器本身,在写 :hover 等规则时很有用:

a {
  text-decoration: none;
  &:hover { text-decoration: underline; }
}

编译结果为

a {
  text-decoration: none;
  a:hover { text-decoration: underline; }
}

& 会被父选择器代替。如果同时使用嵌套,那么 & 是嵌套后的结果:

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译结果:

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

属性嵌套

font-familyfont-size 这一类规则,前缀相同,也可以都写在 font 下:

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译结果:

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

占位符(placeholder)

占位符类似 %foo 的形式,是 Sass 中一种特殊的选择器:

%error {
  border: 1px #f00;
  background-color: #fdd;
}

这一段规则不会出现在编译后的 CSS,但 %error 可以用来继承(下文介绍)。

注释语法

Sass 支持 /**/// 两种注释语法,区别是前者在编译后仍然保留,后者被去除:

/* 多行注释
   被保留 */
body { color: black; }

// 单行注释编译后去除
a { color: green; }

编译结果:

/* 多行注释
   被保留 */
body { color: black; }

a { color: green; }

Sass 不仅完全兼容 CSS 语法,而且进行了扩展,称作 SassScript,增加了变量、算术以及很多功能函数。

变量

Sass 变量以 $ 开头,定义方式类似 CSS 属性:

$width: 5em;

使用变量:

#main {
  width: $width;
}

如果变量定义在某个选择器内,那么只能在局部使用。如果想要使它成为全局变量,可以加 !global

#main {
  // 只能在局部使用
  $width: 5em;
  width: $width;
}
#main-2 {
  $width: 5em !global;
  width: $width;
}

使用 !default 来给变量设置默认值。如果变量还没有值,那么会被赋值为默认值,如果变量之前已被赋值了,那么 !default 语句被忽略,省去了 if 判断。例:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "First content";
  new-content: "First time reference"; }

Sass 变量名中短线和下划线可以互换,比如定义了 $main-width,那么也可以通过 $main_width 使用。

变量插入:#{}

Sass 变量也可以用在选择器和属性名中,用 #{} 插入:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }

算术

Sass 支持在属性值中进行四则运算:

body {
  margin: (14px/2);
  top: 50px + 100px;
  right: $var * 10%;
}

颜色值也可以运算:(意义不大)

p {
  color: #010203 + #040506;
}
a {
  color: #010203 * 2;
}

结果:

p {
  color: #050709; }
a {
  color: #020406; }

颜色函数

Sass 提供了很多有用的颜色函数,比如 lighten() 增加亮度,saturate() 增加饱和度:

lighten(hsl(0, 0%, 0%), 30%)      => hsl(0, 0, 30)
lighten(#800, 20%)                => #e00
saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
saturate(#855, 20%)               => #9e3f3f

IE6-8 由于不支持 rgba() 等,需要用 filter 实现 Alpha 透明度,并且颜色要 #AABBCCDD 的格式,用 Sass 的 ie_hex_str() 函数可以方便地计算:

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}

编译结果:

div {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr=#FF00FF00, endColorstr=#80FF0000);
}

更多颜色函数看这里

@import

Sass 中可以直接 @import 其他的 .sass 或 .scss 文件,这些文件的内容会被添加到编译后的 CSS:

@import "path/filename.scss";
@import "rounded-corners", "text-shadow"; // 一次导入多个文件

.sass 或 .scss 后缀可以省略,前提是文件夹中不能有同名的两个 sass 和 scss 文件。

如果导入的文件符合以下某条,那么文件内容不会被导入,而是保留这条 @import 在 CSS 中:

  • 文件以 .css 结尾
  • 以 http:// 开头
  • url() 的方式导入
  • 带有媒体查询

最后一条指的是像下面这样的:

@import "foo" screen and (max-width: 480px);

很多用 Sass 编写的框架里都能看到类似 _settings.scss 的文件名。如果某个文件你只想用来导入,但不编译,那么可以在文件名开头加下划线。导入时,可以省略下划线,仍然写 @import "settings"; 来导入,最终编译时不会生成对应的 _settings.css 文件。

@media

在 Sass 中,@media 有所增强,嵌套在选择器里的时候与原生 CSS 的行为不同:

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

并且 @media 自己也可以嵌套,将几个条件串联起来:

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译后

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }

mixin

mixin 的语法如下:

@mixin mixin-name {
  /* 规则 */
}

mixin 可以定义参数,还可以给参数设置默认值,中间用“:”隔开:

@mixin large-text($size: 20px) {
  font-size: $size;
}

在调用 mixin 时,使用 @include

a {
  @include large-text; // 或@include large_text;
}
p {
  @include large-text(30px);
}
em {
  @include large-text($size: 26px); // 增加可读性
}

mixin 名中的短线和下划线也可以互换使用。

mixin 里也可以调用其他的 mixin:

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

需要注意的是 mixin 只是简单地拷贝代码,所以可能会产生重复,这跟后面的 @extend 不同,比如

a {
  @include large-text; 
}
p {
  @include large-text;
}

生成了两份相同的代码

a {
  font-size: 20px; }
p {
  font-size: 20px; }

@extend

Sass 中可以继承某一个选择器规则,比如

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

还有占位符 %foo 也可以用来继承:

%error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend %error;
  border-width: 3px;
}

跟继承一个类的区别是,%error 自身不会出现在 CSS 中,它只能用来继承。

跟 mixin 相比,@extend 会自动把选择器合并成一行,比如上例生成的 CSS:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.seriousError {
  border-width: 3px;
}

@at-root

使用 @at-root 可以使规则摆脱嵌套,出现在最外层:

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

编译结果

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

控制语句

Sass 还支持 if 等流程控制语句,主要是用在 mixin 中。

@if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

编译结果

p {
  border: 1px solid; }

null 是 Sass 中的一个特殊类型,在 @if 语句被当做 false。还支持 @else@else if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译结果

p {
  color: green; }

@for

@for 用来循环输出样式,有两种语法:一种是 @for $var from <start> through <end>,另一种 @for $var from <start> to <end>$var 可以替换成任意的变量名。<start> 也可以大于 <end>,这种情况下 $var 会递减。两种语法的区别是,from ... to 不包含 $var = <end> 的情况,而 through 语法会包含。如

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@each

@each 用于遍历一个列表,语法是 @each $var in <list or map>。list 是 Sass 中的一种类型,如果一组值用空格或逗号分隔,就是一个列表,比如 margin: 10px 15px 0 0 中的 10px 15px 0 0,或 font-face: Helvetica, Arial, sans-serif 中的 Helvetica, Arial, sans-serif

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

编译结果

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

@function

Sass 中还可以自己定义函数,在函数中可以访问全局变量,用 @return 设定返回值:

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译结果

#sidebar {
  width: 240px; }

函数名的短线和下划线同样可以互用,grid_width 等同于 grid-width

还没有评论,沙发空缺中……
上一篇
«
下一篇
»
flight