Skip to content
turingou edited this page Sep 17, 2014 · 3 revisions

多说评论框及其组件使用 LESS 编写。LESS 是一种 CSS 预编译语言,通过将 CSS 进行简化和拓展,我们将多说评论框的样式组件拆分开,这些文件分布在 ./less 文件夹下,是以 .less 后缀结尾的文件。

对于 LESS 文件的书写,我们建议采用这样的编码习惯:

采用 Space

采用 Space 而非 Tab 进行缩进。

缩进控制

所有文件,均采用 2 空格缩进。

选择器的继承不超过 3 层

LESS 文件可以很方便的进行继承选择器的书写,例如:

.father {
  .brother {
    color: red;
    a {
      span {
        font-size: 12px;
      }
    }
  }
  .me {
    background-color: #000;
    &:hover {
      background-color: #fff;
    } 
  }
  &:hover {
    background-color: #efefef;
  }
}

但我们并不建议继承选择器采用这种方式进行深度嵌套,所以请确保你的 LESS 文件没有超过 3 层的选择器嵌套,例如将上述代码的迁移部分,修改成为:

.father {
  .brother {
    color: red;
    a span {
      font-size: 12px;
    }
  }
}

区分属性与继承选择器

使用空行区分属性与继承选择器,而非粘连的写在一起:

.father {
  .brother {
    color: red;

    a span {
      font-size: 12px;
    }
  }
}

属性在前,伪类其次,继承选择器最后

为了更好的区分当前选择器的属性,与当前选择器伪类的属性,和子孙选择器所匹配的样式有所不同,请按照上述顺序,来进行样式的书写,比如:

.father {
  font-size: 14px;
  
  &:hover {
    background-color: #efefef;
  }
  &:active {
    background-color: red;
  }
  &.abc {
    background-color: green;
  }

  .brother {
    color: red;
    a span {
      font-size: 12px;
    }
  }
}

所有发布到官方主题的样式表,我们都会仔细审查这些文件是否符合我们的编码习惯,所以在进行 Pull Request 之前,请确保这些主题与社区的编码习惯相符。