Less & BEM规范-一一网

介绍

Less是一种动态样式语言，属于CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

注释

以//开头的注视不会被编译到css文件中，以/**/包裹的注释会被编译到css文件中

变量

使用@来声明一个变量

作为普通属性值来使用

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}
复制代码

作为选择器和属性名使用：@{变量名}

// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

@fnord:  "I am fnord.";
@var:    "fnord";
content: @@var;	// content: "I am fnord.";
复制代码

作为URL：@{url}

// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
复制代码

变量的延迟加载

@var: 0;
.class {
  @var: 1;
  .base {
    @var: 2;
    z-index: @var;	// 3; 等作用域加载完毕
    @var: 3;
  }
  z-index: @var;	// 1
}
复制代码

嵌套规则

基本嵌套规则

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
复制代码

&的使用

// 1. 施加伪类到现有的选择器
.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// 2. 生成重复的类名
.button {
  &-ok {	// .button-ok
    background-image: url("ok.png");
  }
  &-cancel {	// .button-cancel
    background-image: url("cancel.png");
  }

  &-custom {	// .button-custom
    background-image: url("custom.png");
  }
}

// 3. 重复引用父选择器
.link {
  & + & {	// .link + .link
    color: red;
  }

  & & {	// .link .link 
    color: green;
  }

  && {	// .link.link
    color: blue;
  }

  &, &ish {	// .link, .linkish
    color: cyan;
  }
}

// 4. &代表所有父选择器（不仅仅是最近的祖先）
.grand {
  .parent {
    & > & {	// .grand .parent > .grand .parent
      color: red;
    }

    & & {	// .grand .parent .grand .parent
      color: green;
    }

    && {	// .grand .parent.grand .parent
      color: blue;
    }

    &, &ish {	// .grand .parent, .grand .parentish
      color: cyan;
    }
  }
}
复制代码

混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

// 当您调用 mixin 时，括号是可选的。
.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}
复制代码

不带输出的混合

// 创建一个 mixin 但又不想输出那个 mixin，你可以在它后面加上括号。
.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin;
  .my-other-mixin;
}

// 输出
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}
复制代码

带选择器的混合

.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

//输出
button:hover {
  border: 1px solid red;
}
复制代码

带参数的混合

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}
复制代码

带参数且有默认值的混合

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
复制代码

带多个参数的混合

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}
.some .selector div {
  .mixin(#008000);
}

// 输出 
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
复制代码

命名参数

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

// 输出
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
复制代码

匹配模式

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

// 调用
@switch: light;

.class {
  .mixin(@switch; #888);
}

/* 结果：
	第一个 mixin 定义不匹配，因为它期望dark作为第一个参数。
	第二个 mixin 定义匹配，因为它预期light.
	第三个 mixin 定义匹配，因为它期望任何值。
*/
.class {
  color: #a2a2a2;
  display: block;
}


// 根据参数匹配
/*
如果我们.mixin使用单个参数调用，我们将获得第一个定义的输出，但如果我们使用两个参数调用它，我们将获得第二个定义，即@a淡入淡出@b。
*/
.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}
复制代码

arguments变量

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px; 5px);
}

// 输出
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}
复制代码

高级参数和@rest变量

.mixin(...) {        // matches 0-N arguments
.mixin() {           // matches exactly 0 arguments
.mixin(@a: 1) {      // matches 0-1 arguments
.mixin(@a: 1; ...) { // matches 0-N arguments
.mixin(@a; ...) {    // matches 1-N arguments
  
.mixin(@a; @rest...) {
  // @rest is bound to arguments after @a
  // @arguments is bound to all arguments
}
复制代码

运算

算术运算+, -, *,/可以对任何数字、颜色或变量进行运算。如果可能，数学运算会考虑单位并在对数字进行加、减或比较之前进行转换。结果有最左边明确说明的单位类型。如果转换不可能或没有意义，单位将被忽略。不可能转换的示例：px 到 cm 或 rad 到 %。

// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px

// example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%
复制代码

乘法和除法不会转换数字。在大多数情况下它没有意义 – 长度乘以长度给出一个区域，而 css 不支持指定区域。Less 将按原样对数字进行操作，并为结果分配明确规定的单位类型。

@base: 2cm * 3mm; // result is 6cm
复制代码

颜色分为红色、绿色、蓝色和 alpha 维度。该操作分别应用于每个颜色维度。例如，如果用户添加了两种颜色，则结果的绿色维度等于输入颜色的绿色维度之和。如果用户将颜色乘以数字，则每个颜色维度都会相乘。

注意：alpha 的算术运算没有定义，因为颜色的数学运算没有标准约定的含义。不要依赖当前的实现，因为它可能会在以后的版本中发生变化。

对颜色的操作总是产生有效的颜色。如果结果的某个颜色维度最终大于ff或小于00，则该维度将四舍五入为ff或00。如果 alpha 最终大于1.0或小于0.0，则 alpha 将四舍五入为1.0或0.0。

@color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
复制代码

继承（延长）

Extend是一个Less伪类，它将它所放置的选择器与其引用的选择器相匹配。

扩展到类

// :extend选择器将所述“延伸选择器”（申请nav ul）到.inline类的任何地方.inline类出现。声明块将保持原样，但没有任何对扩展的引用
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// 输出
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

// 拓展语法
.a:extend(.b) {}
// the above block does the same thing as the below block
.a {
  &:extend(.b);
}

// 可选参数all
.c:extend(.d all) {
  // extends all instances of ".d" e.g. ".x.d" or ".d.x"
}
.c:extend(.d) {
  // extends only instances where the selector will be output as just ".d"
}

// 多个扩展的类，用逗号分隔
.e:extend(.f) {}
.e:extend(.g) {}
// the above an the below do the same thing
.e:extend(.f, .g) {}
复制代码

扩展到选择器

附加到选择器的扩展看起来像一个普通的伪类，以选择器作为参数。一个选择器可以包含多个扩展子句，但所有扩展都必须位于选择器的末尾。

在选择器之后扩展：pre:hover:extend(div pre).
选择器和扩展之间允许有空格：pre:hover :extend(div pre).
允许多个扩展：pre:hover:extend(div pre):extend(.bucket tr)– 注意这与pre:hover:extend(div pre, .bucket tr)
这是不允许的：pre:hover:extend(div pre).nth-child(odd)。延长必须在最后。

一个规则集中扩展多个选择器

.big-division,
.big-bag:extend(.bag),
.big-bucket:extend(.bucket) {
  // body
}
复制代码

扩展内部规则集

可以使用&:extend(selector)语法将扩展放入规则集的主体中。将扩展放入主体是将其放入该规则集的每个选择器的快捷方式。

pre:hover,
.some-class {
  &:extend(div pre);
}
// 一致
pre:hover:extend(div pre),
.some-class:extend(div pre) {}
复制代码

经典用例

/*
	1. 已有.animal类，香添加一个覆盖背景颜色的动物子类型
*/
.animal {
  background-color: black;
  color: white;
}
.bear {
  &:extend(.animal);
  background-color: brown;
}

/*
	2. Mixins 将所有属性复制到选择器中，这可能会导致不必要的重复。因此，您可以使用 extends 而不是 mixins 将选择器向上移动到您希望使用的属性，从而减少生成的 css。
*/
.my-inline-block {
  display: inline-block;
  font-size: 0;
}
.thing1 {
  &:extend(.my-inline-block);
}
.thing2 {
  &:extend(.my-inline-block);
}

/*
	3. 另一个用例是作为 mixin 的替代方案 - 因为 mixin 只能与简单的选择器一起使用，如果您有两个不同的 html 块，但需要对两者应用相同的样式，您可以使用扩展来关联两个区域
*/
li.list > a {
  // list styles
}
button.list-style {
  &:extend(li.list > a); // use the same list styles
}
复制代码

@import

从其他样式表导入样式；在标准 CSS 中，@import必须在所有其他类型的规则之前。但是 Less.js 并不关心你把@import语句放在哪里

文件扩展名

如果文件有.css扩展名，它将被视为 CSS 并且@import语句保持原样。
如果它有任何其他扩展名，它将被视为 Less 并导入。
如果它没有扩展名，.less将被附加，并将作为导入的 Less 文件包含在内。

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is
复制代码

导入选项

Less 为 CSS @importCSS at-rule提供了多种扩展，以提供更大的灵活性，让您可以对外部文件执行的操作。

句法： @import (keyword) "filename";

reference: 使用 Less 文件但不输出它
inline: 在输出中包含源文件但不处理它
less: 无论文件扩展名是什么，都将文件视为Less 文件
css: 将文件视为 CSS 文件，无论文件扩展名是什么
once: 只包含文件一次（这是默认行为）
multiple: 多次包含文件
optional: 找不到文件时继续编译

每个@import允许多个关键字，您必须使用逗号分隔关键字：

例子： @import (optional, reference) "foo.less";

避免编译

使用～""将样式包裹，可避免编译

BEM命名规范

.block_element--modifier

名称	解释	例子
Block	有意义的独立实体	`header`, `container`, `menu`, `checkbox`, `input`
Element	Block的一部分，没有独立的含义并且在与以上与Block相关联	`menu item` , `list item`, `checkbox caption`, `header tittle`
Modifier	Block或者Element的标志，使用它们来改变外观或者行为	`disabled`, `highlighted`, `checked`, `fixed`, `size big`, `color yellow`

例子：

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
复制代码

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端

Microsoft Windows安全漏洞

代码分析引擎 CodeQL 初体验

seo网站优化规律你需要知道这些知识

APBoard Protected Forum Thread Posting漏洞

React源码解析-虚拟DOM

MobileNet系列之MobileNet_v1

Less & BEM规范

介绍

注释

变量

嵌套规则

混合

运算

继承（延长）

扩展到类

扩展到选择器

扩展内部规则集

经典用例

@import

文件扩展名

导入选项

避免编译

BEM命名规范

Microsoft Windows安全漏洞

代码分析引擎 CodeQL 初体验

seo网站优化规律 你需要知道这些知识

APBoard Protected Forum Thread Posting漏洞

React源码解析-虚拟DOM

MobileNet系列之MobileNet_v1

Less & BEM规范

介绍

注释

变量

嵌套规则

混合

运算

继承（延长）

扩展到类

扩展到选择器

扩展内部规则集

经典用例

@import

文件扩展名

导入选项

避免编译

BEM命名规范

seo网站优化规律你需要知道这些知识