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

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

 

字符串：

　　编码：@charset 'utf-8';

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

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

• // Yes
  $direction: 'left';
  
  // No
  $direction: left;

　　无须引用：

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

• // Yep
  $font-type: sans-serif;
  
  // Nope
  $font-type: 'sans-serif';

　　包含引号的字符串

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

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

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

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

 

数字：

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

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

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

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

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

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

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

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

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

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

　　计算：最高级运算应该始终被包裹在括号中。提高可读性，防止一些 Sass 强制要求对括号内内容计算的极端情况。

 

• // Yep
  .foo {
    width: (100% / 3);
  }
  
  // Nope
  .foo {
    width: 100% / 3;
  }

 

颜色：　　

　　Sass 通过提供少数的函数功能， 非常善于操纵颜色，以下文章建议阅读：

• How to Programmatically Go From One Color to Another
• Using Sass to Build Color Palettes
• Dealing with Color Schemes in Sass
  

　　建议应用顺序

 

1. HSL 值;
2. RGB 值;
3. 十六进制（使用小写并尽可能简写）

　　HSL 表示法不仅仅是最易于理解的颜色表示方法，而且也便于开发者通过调整色调、饱和度和亮度来惊喜地调整颜色。

　　相比于 HSL 表示法，RGB 表示法的优势在于表示近似红绿蓝的颜色时更加简洁明了，但是表示红绿蓝的混合色时就不如 HSL 表示法更易于理解了。

　　最后，十六进制对于人类的思维来说是比较难以理解的，除非必要，否则请优先考虑前几种方式。

• // Yep
  .foo {
    color: hsl(0, 100%, 50%);
  }
  
  // Also yep
  .foo {
    color: rgb(255, 0, 0);
  }
  
  // Meh
  .foo {
    color: #f00;
  }
  
  // Nope
  .foo {
    color: #FF0000;
  }
  
  // Nope
  .foo {
    color: red;
  }

  
  未完待续....
  
  

编辑中........