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%);