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
建议应用顺序
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; }
未完待续....
编辑中........