Sass-开发规范

参考：https://www.sasscss.com/sass-guidelines/

一. 语法规范：

 
语法格式： 
 

   使用两个空格代表缩进，而不是使用tab键； 
 

   理想上，每行保持为80个字符宽度； 
 

   正确书写多行CSS规则； 
 

   有意义的使用空格。 
 

 
字符串： 
 

   遵循固定的编程规范处理 Sass 中的字符串 
 

   在 Sass 中字符串应该始终被单引号( 
  ')所包裹（在 querty 键盘中单引号比双引号更容易输入） 
 

 
编码 
 

   入口文件中第一行通过 @charset 指令使用 UTF-8 编码格式：@charset 'utf-8'; 
 

 
引用： 
 

   引用时以字符串用单引号包裹形式引用 
 

   包含引号的字符串：字符串内包含了一个或多个单引号，虽然转义也可以，但建议使用双引号包裹整个字符串 
 

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

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

 
urls 
 

 
  URL 最好也用引号包裹起来，原因和上面所描述一样： 
   
  .foo  
  { 
    
  background-image 
  : 
    
  url 
  ( 
  '/images/kittens.jpg' 
  ) 
  ; 
   
  } 
 

 
零值 
 

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

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

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

 
单位 
 

当定义长度时（只针对长度而言），0 后面不需要加单位。
将一个单位添加给数字的时候，实际上是让该数值乘以1个单位，而不是拼接。

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

 
  注意：此情况一般+0个单位也可以，但是有时候可能会造成混乱，尽量使用上面方法给数字添加单位： 
 

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

要删除一个值的单位，你需要除以相同类型的 1 单位，而不是截取

$length: 42px;

// Yep
$value: $length / 1px;

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

 
计算 
 

   最高级运算应该始终被包裹在括号中 
 

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

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

 
颜色格式： 
 

 
  为了尽可能简单地使用颜色，我建议颜色格式要按照以下顺序排列： 
 

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

 
  除非是为了快速开发出原型，否则不建议使用 CSS 颜色关键字。 
 

 
  使用 HSL 值或者 RGB 值，通常在逗号 ( 
  , 
  )后面追加一个空格，而不在前后括号 ( 
  ( 
  ,  
  ) 
  ) 和值之间添加空格。 
 

// Yep
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Nope
.foo {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

 
颜色值 
 

   当一个颜色被多次调用时，最好用一个有意义的变量名来保存它： 
  $sass-pink 
  : 
    
  hsl 
  (330, 50%, 60%) 
  ; 
 

   如果你是在一个主题中使用，我不建议固定的使用这个变量。相反，可以使用另一个标识方式的变量来保存它： 
  $main-theme-color 
  : 
    
  $sass-pink 
  ; 
 

 
列表 
 

   列表需要遵守以下规范： 
 

除非列表太长不能写在 80 字符宽度的单行中，否则应该始终单行显示；
除非适用于 CSS，否则应该始终使用逗号作为分隔符；
要么使用内联形式，要么使用多行形式；
始终使用括号包裹；
始终不要添加尾部的逗号。

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Yep
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
);

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif;

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif;

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif,);

   注意：当要给列表添加一个新列表项时，请遵守提供的 API，不要手动给列表添加列表项。 
 

$shadows: (0 42px 13.37px hotpink);

// Yep
$shadows: append($shadows, $shadow, comma);

// Nope
$shadows: $shadows, $shadow;

 
Maps 
 

   在 Sass 中，样式开发者可以使用 map 这种数据结构 —— Sass 团队使 map 可以映射关联数组、哈希表甚至是 Javascript 对象。map 是一种映射任何类型的键值对，包括内嵌类型的 map，但是我不建议使用 map 存储复杂数据类型。 
 

   map 的使用应该遵循下述规范： 
 

冒号(:)之后添加空格；
左开括号(()要和冒号 (:)写在同一行；
如果键是字符串（99% 都是字符串），则使用括号包裹起来。
每一个键值对单独一行；
每一个键值对以逗号(,)结尾；
为最后一个键值对添加尾部逗号 (,)，方便添加新键值对、删除和重排已有键值对；
单独一行书写右闭括号 ())；
右闭括号 ())和分号(;)之间不使用空格和换行。

// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

 
CSS规则集 
 

   在这里，极有可能颠覆每个人对书写 CSS 规则集的认知（根据众多规范整理而成，包括CSS Guidelines）： 
 

相关联的选择器写在同一行；不相关联选择器分行书写；
最后一个选择器和左开大括号({)中间书写一个空格；
每个声明单独一行；
冒号(:)后添加空格；
所有声明的尾部都添加一个分号 (;)；
右闭大括号(})单独一行；
右闭大括号(})添加空行。

// Yep
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// Nope
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

   注意： 
 

   本地变量在其他任何变量之前声明，并和其他声明用空行分隔开； 
 

   不需 @content 的混合宏在放在其他声明之前； 
 

   嵌套选择器在新行声明； 
 

   需要 @content 的混合宏在嵌套选择器后声明； 
 

   右闭大括号(})上一行无需空行； 
 

.foo, .foo-bar,
.baz {
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {
    color: red;
  }

  @include respond-to('small') {
    overflow: visible;
  }
}

14 . 样式声明顺序

   CSS 声明顺序各种讨论都，整体看使用最多的是如下两派： 
 

坚持以字母顺序排列；
以类型（position, display, colors, font, miscellaneous...）顺序排列；

   这两派中以类型顺序排列的相对比较多，一般是相关联样式写在一起，具体怎么选看自己吧。 
 

 
   15. 选择嵌套 
  
    建议嵌套不要超过三层 
  
    在最外层选择器中嵌套伪类和伪元素是被允许，也是受推荐的 
  
   .foo {  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

 
  二. 命名规范： 
 

   1. 占位符： Sass 占位符遵循和类名相同的命名模式，因此被视为常规的 CSS 选择器，命名参考CSS命名 
 

   2. 变量、函数和混合宏：小写连字符分隔，有意义的命名（ CSS-y 的风格） 
 

   3. 常量：Sass没有提供常量的说法，但对于众多编程语言，建议使用全大写方式书写常量 
 

$CSS_POSITIONS: (top, right, bottom, left, center);

4. 命名空间：

su- 作为一个命名空间

$su-configuration: ( … );

@function su-rainbow($unicorn) {
  // …
}

 
  三. 结构： 
 

   结构内容较多，请单独看关于Sass结构的文章 
 

 
  四. 响应式设计和断点： 
 

   1. 占位符： Sass 占位符遵循和类名相同的命名 
 

猜你喜欢