css3 框架学习

参考：  https://pages.18f.gov/frontend/css-coding-styleguide/frameworks/

添加一些常用的mixin  http://bourbon.io/

sass 选择器的书写顺序：

• 
  variables
• @extend directives
• @include directives
• declaration list (property name and value)
• media queries
• pseudo-states and pseudo-elements
• nested elements
• nested classes

• Use unitless values for line-height as this will inherit values from the font-size.
• Use up to 10 decimal places in em units to ensure accuracy.

NAME

• Write classes semantically. Name its function not its appearance.
• Avoid presentation- or location-specific words in names, as this will cause problems when you (invariably) need to change the color, width, or feature later.
• Be wary of naming components based on content, as this limits the use of the class.
• Name modifiers and state-based rules with adjectives. e.g. .is_hovered{}
• If your CSS has to interface with other CSS libraries, consider namespacing every class.
  eg .hy-nba-lg-

Architecture

component ,Components are very basic structure such as buttons, blurbs, navs, and positioning structures like insets, island, and enclosure.

module, modules are built with these components

sass 技巧

1 !default。给之前没有赋值的变量，加上默认值。即，如果之前有赋值，这句无效

 $a : 1;

$a : 2 !default;

//此时，$a 还是为1.