Less新手入门

admin管理员组

文章数量:1794759

Less新手入门

一、变量：@定义变量（例如@width） 二、混合（Mixins）

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); /*混入*/ }

三、嵌套（Nesting）

/*将伪选择器与混合一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合(& 表示当前选择器的父级）:*/ .clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }

四、@规则和冒泡 @ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡

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

编译成：

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

五、运算 算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

六、转义 转义（Escaping）允许你使用任意字符串作为属性或变量值。

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

编译成：

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

七、函数 例如利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：

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

八、命名空间和访问符

#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 形式 }

九、映射

#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }

编译成：

.button { color: blue; border: 1px solid green; }

十、作用域 Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从“父”级作用域继承。

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

十一、注释

“//”或者“/**/”

十二、导入 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

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

本文标签： 新手入门