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 强制要求对括号内内容计算的极端情况。

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

// Nope
.foo {
  width: 100% / 3;
}

View Code

颜色：　　

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

　　建议应用顺序

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

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

View Code

未完待续....

编辑中........

posted @ 2017-01-01 12:56 wanglehui 阅读(213) 评论(0) 收藏举报

刷新页面返回顶部

wanglehui

渴望？呼吸？

SASS学习笔记

核心原则：

语法格式：

字符串：

数字：

颜色：

公告