less开发规范

开发项目工作室这边一般用less，想找个机会总结一下我容易忽略的css规范

统一代码风格

列表型属性值 书写在单行时，, 后必须跟一个空格。

示例：

1	font-family: Arial, sans-serif;

对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。

示例：

1	box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。

示例：

1 2	/* recommended */ background-color: rgb(255,255,255);

对于超长的样式，在样式值的空格处或,号后换行，建议按逻辑分组

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162));
);

对于只包含一条声明的样式，为了易读性和便于快速编辑，建议将语句放在同一行。

1	.span1 { width: 60px; }

对于包含多条声明的样式块与块之间须空一行，只包含一条声明的样式块之间无须空行，且声明本身只占一行

示例：

/* 无须空行 */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}

/* 此处须空行 */
.bullet-btn {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 2.5px;

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

示例：

/* ==========================================================================
   comments like this
 ============================================================================ */

/**
 * or multiple-line comments like this
 * Short description describing the file.
 * 
 */

>、+、~ 选择器的两边各保留一个空格

示例：

/* recommended */
main > nav {
    padding: 10px;
}

属性选择器中的值必须用双引号包围。

示例：

/* recommended */
article[character="juliet"] {
    voice-family: "Vivien Leigh", victoria, female
}

class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关class 的命名（类似于命名空间）（例如，.btn 和 .btn-danger）。

避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

class 名称应当尽可能短，并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

基于最近的父 class 或基本（base） class 作为新 class 的前缀。

使用 .js-* class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。

属性缩写

margin

padding

font

background

border

border-radius

如上能够缩写的属性在没有指定其所有值的情况下，尽可能只写需要指定的属性的全称；需要设置所有值，才使用缩写

less规范

代码按如下形式按顺序组织：

@import
变量声明
样式声明

// ✓
@import "est/all.less";

@default-text-color: #333;

.page {
    width: 960px;
    margin: 0 auto;
}

+ / - / * / / 四个运算符两侧保留一个空格。+ / - 两侧的操作数有相同的单位，如果其中一个是变量，另一个数值书写单位。

// ✗
@a: 200px;
@b: (@a+100)*2;

// ✓
@a: 200px;
@b: (@a + 100px) * 2;

在给 mixin 传递参数时，在参数分隔符（, / ;）后要保留一个空格

.box {
    .size(30px, 20px);
    .clearfix();
}

如果混入的是本身不输出内容的 mixin，在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className

less

@width声明变量

calc()特例

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。

1 2	@var: 50vh/2; width: calc(50% + (@var - 20px)); // 结果是 calc(50% + (25vh - 20px))

转义

允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

注意：这是Less 3.5+ 版本的简写，3.5之前的依然需要 @min768: ~"(min-width: 768px)";

命名空间和访问符

出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组，less可以更加直观地实现这一点

假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。