预处理器

一、什么是CSS预处理器

CSS预处理器会是能让你通过预处理器独有的语法来生成CSS。还增加一些原生CSS不具备的特性，让CSS的结构更加具有可读性且易于维护。帮助更好地组织CSS代码，提高代码的复用率，提升可维护性。但是有学习使用成本。

常见的有Sass、LESS、PostCSS 和 Stylus。

二、Sass

1. 变量

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

2. 计算

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

3. 嵌套

& ：父选择器

nav {
  a {
    color: red;
    header & {
      color:green;
      border: {
      	top: 1px solid red;
      	bottom: 1px solid green;
      }
    }
  }  
}
// 编译后
nav a {
  color: red;
}
header nav a {
  color: green;
  border-top: 1px solid red;
  border-bottom: 1px solid green;
}

伪类嵌套：&和相连的类名之间不能有任何的空格,否则变为上述的后代选择器
.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden;
    }
}
// 编译后
clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

4. 注释

test：标准CSS注释，会有输出；test2：Sass注释，无输出；test3：压缩模式下也有输出

/* test */
// test2
/* 
  test3
*/

// 编译后

/* test */
/* 
  test3
*/

5. 继承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}
.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}
// 编译后
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}
.btn-primary {
  background-color: #f36;
  color: #fff;
}
.btn-second {
  background-clor: orange;
  color: #fff;
}

6. Mixin

@include调用@mixin

// 无默认值
@mixin left {
	float: left;
	margin-left: 10px;
}
div { @include left; }
// 有默认值，不传参就编译出默认值
@mixin left($value: 10px) {
    float: left;
    margin-right: $value;
}
div { @include left(20px); }
// 组合用法
@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
// 编译后
div {
  float: left;
  margin-left: 10px;
}
div {
  float: left;
  margin-right: 20px;
}
#navbar li {
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
}
#footer {
  border-top-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -webkit-border-top-left-radius: 5px;
}

7. @import

@import "path/filename.scss";
@import "foo.css";  //

8. @if/@else

$a: 50%;
div{
    @if $a > 30% {
        background-color: #000;
    } @else {
        background-color: #fff;
    }
}

9. 循环

@for $i from <start> through <end>  // 包括end
@for $i from <start> to <end>  // 不包括end
@for $i from 1 to 3 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

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

@each $member in a, b {
    .#{$member} {
    background-image: url("/image/#{$member}.jpg");
    }
}
// 编译后
.border-1 {
  border: 1px solid blue;
}
.border-2 {
  border: 2px solid blue;
}

.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

.a {
  background-image: url("/image/a.jpg");
}
.b {
  background-image: url("/image/b.jpg");
}

10. 自定义函数

@function double($n) {
    @return $n * 2;
}
// 编译后
#sidebar {
    width: double(5px);
}

11. @media

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

三、参考

Sass笔记

http://www.ruanyifeng.com/blog/2012/06/sass.html

https://sass-lang.com/