sass说明

CSS它不是一种编程语言，你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
sass 就是很好用的css预处理器， 它提供了 CSS 中还不存在的特性，例如变量、 嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得再次有趣。

变量（variables）

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。 你可以在变量中存储颜色、字体 或任何 CSS 值，并在将来重复利用。Sass 使用 $ 符号 作为变量的标志

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

嵌套（nested rules）

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同(不宜嵌套过多， 3层即可)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

混合（mixins）

Mixins允许我们在项目中复用样式片段，可以传递参数这个特性使得它们非常灵活，强大。除了传递参数，也可以直接传递一个样式片段给Mixin。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

// 传递一个样式片段给Mixin
@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    @content;  
}

.button-green {  
    @include button {  
        background: green  
    }
}

注意： 当一个内容片段传进mixin的时候，它的作用域是在定义它的地方，而不是在mixin里面。也就是说，传进去的内容片段不能使用在mixin中定义的变量。

继承（Extend/Inheritance）

@extend命令让一个选择器继承其它选择器去复用样式片段。
% 是placeholders

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

注意： @extend命令不够灵活。不能向它传递参数，它原本是啥样就是啥样。这里还有一些在@media中使用@extend的限制，比如，不能横跨多个@media指令使用@extend。

模块化 （modules）

将样式抽到不同文件中，通过@use 或者@import引入（@import “foo.css”;插入外部文件）

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

注意：文件命名前面加短横线的表示不打包成一个css，作为样式表的一部分存在（_base.scss）

数学运算&编程

.container {
 width: 100%;
}

article[role="main"] {
 float: left;
 width: 600px / 960px * 100%;
}

aside[role="complementary"] {
 float: right;
 width: 300px / 960px * 100%;
}

// 条件
@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

// for循环
@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}
// while 循环
$i: 6;

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

// 自定义函数
@function double($n) {
　　　　@return $n * 2;
　　}

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

函数（functions）

总结&其他

minxin 与 extend区别

1. @extend产生，@mixin不产生DRY式的代码
2. 在大多数情况下@mixin会比@extend更好，但是它们俩都有自己的一席之地。当样式和选择器之间的关系在某些方面比较紧密的时候，使用@extend。除此之外，你可以使用@mixin在任何地方。

sass 在线转css

sass 注释风格

1. 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
2. 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
3. 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息

SASS提供了一些内置的颜色函数，以便生成系列颜色

1. lighten(#cc3, 10%) // #d6d65c
2. darken(#cc3, 10%) // #a3a329
3. grayscale(#cc3) // #808080
4. complement(#cc3) // #33c