SASS即学即用

前言

Sass是CSS预处理器，Sass是一种易于使用的样式语言，可帮助减少传统CSS的许多重复性和可维护性挑战。学习Sass可以编写出可重复使用的样式效，也是在工作和面试要求中不可或缺的一项技能了。

基本概念

什么是Sass？

Sass与所有版本的CSS完全兼容。
文件后缀名是.scss，意思为Sassy CSS。
Sass是CSS的扩展，Sass是CSS预处理器。
Sass减少了CSS的重复，因此节省了时间。
Sass文件就是普通的文本文件，里面可以直接使用CSS语法。
Sass由Hampton Catlin设计，由Natalie Weizenbaum在2006年开发

为什么使用Sass？

随着项目开发样式表越来越大，越来越复杂并且难以维护。这是CSS预处理程序可以提供帮助的地方。
Sass使您可以使用CSS中不存在的功能，例如变量，嵌套规则，混合，导入，继承，内置函数和其他内容。

Sass与Less、Stylus有何区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和Less语法较为严谨，Less要求一定要使用大括号{}，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，Less和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而Less和Stylus可以基于NodeJS NPM下载相应库后进行编译；

基本用法

1、使用注释

支持/** **/ 和 //两种方式


/* Block comments */
// Line comments

2、引入样式

引入外部样式可以使用@import关键字。


@import './other_sass_file`;

文件的.scss或.sass扩展名是可选的。

3、声明变量

以$符号来声明变量。


$red: #833;
body {
  color: $red;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。


$side : left;
.rounded {
    border-#{$side}-radius: 5px;
}

4、使用嵌套

在嵌套的代码块内，可以使用&引用父元素，属性也可以嵌套，比如border-color属性。注意，border后面必须加上冒号


.markdown-body {
  p {
    color: blue;
  }
  &:hover {
    color: red;
  }
}

p {
    border: {
        color: red;
    }
}

最后编译的结果为


.markdown-body p {
    color: blue;
  }
.markdown-body :hover {
    color: red;
  }
p {
    border-color: red
}

5、使用继承

继承另外一个标签的属性可以使用@extend关键字。


.button {
  ···
}
.push-button {
  @extend .button;
}

6、Mixin

Mixin一般用来编写公共可复用的样式，如定位上下左右居中、背景图片地址和大小。使用@Mixin关键字来声明，应用使用@include关键字


@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}
h1 {
  @include heading-font;
}

带参数的声明和引用


@mixin font-size($n) {
  font-size: $n * 1.2em;
}
body {
  @include font-size(2);
}

具有默认值


@mixin pad($n: 10px) {
  padding: $n;
}
body {
  @include pad(15px);
}

带有默认变量


// 设置默认的值
$default-padding: 10px;
@mixin pad($n: $default-padding) {
  padding: $n;
}
body {
  @include pad(15px);
}

7、颜色函数

rgba


rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)

Mixing


mix($a, $b, 10%)   // 10% a, 90% b

RGB


red($color)         // → 0..255
green($color)
blue($color)

调整颜色


lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

高级用法

1、循环语句

使用for 循环。


@for $i from 1 through 4 {
  .item-#{$i} { left: 20px * $i; }
}

each循环（简单），作用与for类似。


@each $item in $menu-items {
  .photo-#{$item} {
    background: url('images/#{$item}.jpg');
  }
}

each循环（嵌套）


$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');

@each $id, $image in $backgrounds {
  .photo-#{$id} {
    background: url($image);
  }
}

While循环


$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

2、条件语句

@if可以用来判断，配套@else命令。


@if $position == 'left' {
   position: absolute;
   left: 0;
}
@else {
   position: static;
}

3、自定义函数

Sass允许用户编写自己的函数。


@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}

其他特性

1、List


$list: (a b c);

nth($list, 1)  // starts with 1
length($list)

@each $item in $list { ... }

2、Map


$map: (key1: value1, key2: value2, key3: value3);

map-get($map, key1)