less要点笔记
less要点笔记
变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译成css后：
#header {
width: 10px;
height: 20px;
}
混合
也就是将一组属性从一个规则集添加到另一个规则集的方法。
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();/**可以看到这里引用了上面的一个class样式的所有属性*/
}
.post a {
color: red;
.bordered();/**这里也引用了*/
}
嵌套
css中使用层叠来锁定元素，有关联的元素设置样式可能会大量重复，而且没有层次
less中采用嵌套的方式，有层次地显示了页面元素的样式
如下的css样式
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
在less中可以编写如下：
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
用less书写的代码更加简洁，并且模仿了HTML的组织结构。当然伪选择器也是可以进行嵌套书写。
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
@规则嵌套和冒泡
@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。
.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;
}
}
转义（Escaping）
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意，从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
命名空间和访问符
(不要和 CSS @namespace 或 namespace selectors 混淆了)。
有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（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()）后面。
映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出符合预期：
.button {
color: blue;
border: 1px solid green;
}
作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
导入
导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
