less 学习笔记

这个笔记原本是想写成私密的，毕竟不是什么好难懂的东西，并且主要是我想熟悉下语法，整理成我习惯的文档！不过思否的记笔记功能不能贴图！-_-!就只有发成这个了 个人文章如今都没有什么质量！见谅

---

LESS 作为 CSS 的一种形式的扩展，它并无阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了不少额外的功能

变量

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

#header { color: @light-blue; }

输出：

#header { color: #6c94be; }

注意：LESS 中的变量为彻底的 ‘常量’ ，因此只能定义一次.

混合

在 LESS 中咱们能够定义一些通用的属性集为一个class，而后在另外一个class中去调用这些属性。例如：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

输出：

#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

注意： 任何 CSS class, id 或者 元素 属性集均可以以一样的方式引入

嵌套

less中能够以嵌套的方式编写层叠样式。例如：

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

输出：

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

串联嵌套

& 符号的使用—若是你想写串联选择器，而不是写后代选择器，就能够用到&了. 这点对伪类尤为有用如 :hover 和 :focus
例如：

.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

输出：

.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

At-Rules 的嵌套

at-rule 是CSS样式声明，以@开头，紧跟着是标识符（charset），最后以分号（;）结尾。
at-rule 规则的嵌套和普通选择器的嵌套是类似的，不一样点在于at-rule规则会像冒泡同样输出时在最顶层。例如：

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

输出：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

运算

任何数字、颜色或者变量均可以参与运算。例如：

// 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%

颜色的运算：

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

calc() 特例

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

@var: 50vh/2;
width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

Escaping

例如：

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

输出：

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

　函数

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等，可参考函数手册。
例子：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

命名空间

有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你能够像下面这样在#bundle中定义一些属性集以后能够重复使用：

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

你只须要在 #header a中像这样引入 .button:

#header a {
  color: orange;
  #bundle > .button;  // can also be written as #bundle.button
}

做用域

LESS 中的做用域跟其余编程语言很是相似，首先会从本地查找变量或者混合模块，若是没找到的话会去父级做用域中查找，直到找到为止.

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

@var: red;

#page {
  #header {
    color: @var; // white
  }
  @var: white;
}

注释

块注释和行注释均可以使用：

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

导入（Importing）

“导入”的工做方式和你预期的同样。你能够导入一个 .less 文件，此文件中的全部变量就能够所有使用了。若是导入的文件是 .less 扩展名，则能够将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";

字符串插值

变量能够用相似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免编译

有时候咱们须要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
要输出这样的值咱们能够在字符串前加上一个 ~, 例如:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

咱们能够将要避免编译的值用 “”包含起来，输出结果为:

.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript 表达式

JavaScript 表达式也能够在.less 文件中使用. 能够经过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;

输出：

@var: "HELLO!";

可访问javascript环境

@height: `document.body.clientHeight`;

若是你想将一个JavaScript字符串解析成16进制的颜色值, 你可使用 color 函数:

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);