[关闭]
@FunC 2016-12-03T13:58:14.000000Z 字数 1897 阅读 2160

Sass

前端


变量

$开头表示变量;
例子:

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3. body {
  4. font: 100% $font-stack;
  5. color: $primary-color;
  6. }

嵌套

像HTML那样直观书写css父子结构
(那兄弟结构呢?)
例子:

  1. //scss
  2. nav {
  3. ul {
  4. margin: 0;
  5. padding: 0;
  6. list-style: none;
  7. }
  8. li { display: inline-block; }
  9. a {
  10. display: block;
  11. padding: 6px 12px;
  12. text-decoration: none;
  13. }
  14. }
  15. //编译后的css
  16. nav ul {
  17. margin: 0;
  18. padding: 0;
  19. list-style: none;
  20. }
  21. nav li {
  22. display: inline-block;
  23. }
  24. nav a {
  25. display: block;
  26. padding: 6px 12px;
  27. text-decoration: none;
  28. }

运算

css中不支持运算,这点在sass中得到改进
运算过程注意符号也参与运算
例子:

  1. //scss
  2. article[role="main"] {
  3. float: left;
  4. width: 600px / 960px * 100%;
  5. }
  6. //编译后的css
  7. article[role="main"] {
  8. float: left;
  9. width: 62.5%;
  10. }

import

引入文件/模块化
若不想sass单独编译模块,可以在模块文件名前加入下划线让sass忽略它,如_partial.scss
引用方式与CSS3中的@import基本相同,也可因引入文件
例子:
_reset.scss:

  1. // _reset.scss
  2. html,
  3. body,
  4. ul,
  5. ol {
  6. margin: 0;
  7. padding: 0;
  8. }

base.scss

  1. // base.scss
  2. @import 'reset';
  3. body {
  4. font: 100% Helvetica, sans-serif;
  5. background-color: #efefef;
  6. }

我们注意到,import reset时没有添加文件后缀,因为sass引擎能自动补全.scss
如果引入css文件则语法参见CSS3

  1.   @import "foo.css";

Mixin

Mixin类似于函数(但不包含逻辑,只是可重用的代码块),支持参数(参数支持默认值)
通过@mixin声明,通过@include调用
例子:

  1.   @mixin left($value: 10px) {
  2.     float: left;
  3.     margin-right: $value;
  4.   }
  5.   //实际使用时可修改参数
  6.   div {
  7.     @include left(20px);
  8.   }

注意,其实变量代表的是字符串,所以不仅仅是属性值可以使用变量,属性名也能使用变量。通过#{}来嵌入变量。
下面是通过mixin填圆角属性例子:

  1.   @mixin rounded($vert, $horz, $radius: 10px) {
  2.     border-#{$vert}-#{$horz}-radius: $radius;
  3.     -moz-border-radius-#{$vert}#{$horz}: $radius;
  4.     -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  5.   }

调用时

  1.   #navbar li {
  2.    @include rounded(top, left);
  3.   }

颜色函数

SASS提供内置的生成颜色的函数,以生成系列颜色
例子:

  1.   lighten(#cc3, 10%) // #d6d65c,变亮
  2.   darken(#cc3, 10%) // #a3a329,变暗
  3.   grayscale(#cc3) // #808080,灰度化
  4.   complement(#cc3) // #33c,互补色

高级语法

条件语句

@if@else
例子:

  1.   @if lightness($color) > 30% {
  2.     background-color: #000;
  3.   } @else {
  4.     background-color: #fff;
  5.   }

循环语句

@for@while@each
例子:

  1. //for
  2.   @for $i from 1 to 10 {
  3.     .border-#{$i} {
  4.       border: #{$i}px solid blue;
  5.     }
  6.   }
  7. //while
  8.   $i: 6;
  9.   @while $i > 0 {
  10.     .item-#{$i} { width: 2em * $i; }
  11.     $i: $i - 2;
  12.   }
  13. //each
  14.   @each $member in a, b, c, d {
  15.     .#{$member} {
  16.       background-image: url("/image/#{$member}.jpg");
  17.     }
  18.   }

自定义函数

例子:

  1.   @function double($n) {
  2.     @return $n * 2;
  3.   }
  4.   #sidebar {
  5.     width: double(5px);
  6.   }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注