sass预处理css的简单使用

概念

1. sass 中文官网
   Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
2. 特点
   完全兼容 CSS3
   在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
   通过函数进行颜色值与属性值的运算
   提供控制指令 (control directives)等高级功能
   自定义输出格式
3. 语法

1.嵌套写法，文件名要是.scss
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
2.缩进写法，这是最早的sass写法
#header 
  color: black;
  .navigation 
    font-size: 12px;
  
  .logo 
    width: 300px;

4.变量的定义

$符
$width: 5em;

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器

$color:red;
.box {
    //这里指.box
    &:hover {
        background-color: $color;
    }
    .son {
          width: 100px;
          height: 100px;
          background-color: burlywood;
          //这里指 .son
          &:hover {
              background-color: blueviolet;
          }
          p {color:$color;
			  //这里指 p
	          &:hover {
	              background-color: blueviolet;
	          }
			}
      }
    span {color: #000;}
    h3 {color: #c6c5c6;}
}

5. 属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//编译为
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
 }

注释有 /**/ // 。 //是不会编译出来

SassScript

1. 数据类型

• 数字1, 2, 13, 10px
• 字符串，有引号字符串与无引号字符串，“foo”, ‘bar’, baz
• 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布尔型，true, false
• 空值，null
• 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
  2.运算
  2.1 数字运算
  SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

除法需注意的地方

• 如果值，或值的一部分，是变量或者函数的返回值
  如果值被圆括号包裹
  如果值是算数表达式的一部分

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
//编译为
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; }

3. 函数
   SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p {
  color: hsl(0, 100%, 50%);
}

p {
  color: #ff0000; }

指令

1. @import 导入文件

注意
1.但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
2. 不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

2.@media和在css中使用一样，如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

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

3.@extend 继承样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
表示的是.error的样式被.seriousError继承了

混合指令（与JavaScript中的函数相似）

1. 定义
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

简写
为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，

    //定义
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

2.引用

1.定义之后，在父元素中引用编译
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
//编译后
.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }
  2.直接定义后编译（就像是函数的调用一样）
  @mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;
//编译后
a {
  color: blue;
  background-color: red; }

函数指令

定义函数@function name($n){}
调用 name(5)

$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; 
  }