SASS学习笔记

核心原则：

　　1、Sass 以简为美，简约至上。

　　2、实用胜过完美。有些时候，你可能会发现自己违背了这里所描述的规则。如果感觉自己的方式有道理，感觉很正确，那就继续做吧。编写代码从来都不是一家之言。

语法格式：

　（1）受 CSS Guidelines 所启发

• 使用两个空格代表缩进，而不是使用tab键；
• 理想上，每行保持为80个字符宽度；
• 正确书写多行CSS规则；
• 有意义的使用空格。
• 

  // Yep
  .foo {
    display: block;
    overflow: hidden;
    padding: 0 1em;
  }
  
  // Nope
  .foo {
      display: block; overflow: hidden;
  
      padding: 0 1em;
  }

  View Code

　（2）当几个开发者在同一项目中编写 CSS 时，迟早会陷入各自为政的境地。编码样式指南通过规范统一的样式，不仅防止了这种混乱现象，也减轻了阅读和维护代码的难度。不过具体格式规范看个人喜好，也以公司要求为准。

字符串：

　　编码：@charset ‘utf-8‘;

　　引用（引号 ‘或"）： Sass 中字符串应该始终被单引号(‘)或(")所包裹

• 如果颜色名不被引号包裹，将会被解析为颜色值，显然这会导致严重问题；
• 大多数的语法高亮机制将会因未被引号包裹的字符串而罢工；
• 提高可读性；
• 没有理由不去用引号包裹字符串。
• 

  // Yes
  $direction: ‘left‘;
  
  // No
  $direction: left;

  View Code

　　无须引用：

• CSS 中类似 initial 或 sans-serif 的标识符无须引用起来。事实上，font-family: ‘sans-serif‘ 该声明是错误的，因为 CSS 希望获得的是一个标识符，而不是一个字符串。因此，我们无须引用这些值。
• 

  // Yep
  $font-type: sans-serif;
  
  // Nope
  $font-type: ‘sans-serif‘;

  View Code

　　包含引号的字符串

• 使用双引号包裹整个字符串，从而避免使用转义字符。
• 

  // Okay
  @warn ‘You can\‘t do that.‘;
  
  // Okay
  @warn "You can‘t do that.";

  View Code

• URL 最好也用引号包裹起来
• 

  // Yep
  .foo {
    background-image: url(‘/images/kittens.jpg‘);
  }
  
  // Nope
  .foo {
    background-image: url(/images/kittens.jpg);
  }

  View Code

数字：

　　Sass 中，数字类型包括了长度、持续时间、频率、角度等等无单位数字类型。

　　零值：当数字小于 1 时，应该在小数点前写出 0. 永远不要显示小数尾部的 0。

• 

  // Yep
  .foo {
    padding: 2em;
    opacity: 0.5;
  }
  
  // Nope
  .foo {
    padding: 2.0em;
    opacity: .5;
  }

  View Code

　　单位：当定义长度时，0 后面不需要加单位。

• 

  // Yep
  $length: 0;
  
  // Nope
  $length: 0em;

  View Code

  该建议只是针对于长度而言，对于类似 transition-delay的时间属性就是不适合的。简而言之：只有长度可以使用无单位的 0 作为属性值。

　　添加单位：将一个单位添加给数字的时候，实际上是让该数值乘以1个单位。

• 

  $value: 42;
  
  // Yep
  $length: $value * 1px;
  
  // Nope
  $length: $value + px;

  View Code

　　删除单位：要删除一个值的单位，你需要除以相同类型的 1 单位。

• 

  $length: 42px;
  
  // Yep
  $value: $length / 1px;
  
  // Nope
  $value: str-slice($length + unquote(‘‘), 1, 2);

  View Code
• 编辑中........

SASS学习笔记

原文：http://www.cnblogs.com/zxjwlh/p/6240916.html