less介绍

1. less介绍

作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题，可以随时退回使用标准的 CSS.

2. less使用

1.变量 @color:red; body{ background:@color } 由于变量只能定义一次，实际上他们就是“常量

2.混合

.common{ color:red } div{ background:blue; .common }

3.嵌套规则

a{ color:red; &:hover{ color:blue; } } div{ color:red; span{ color:red; } }

&表示当前选择器的父选择器 &可以在一个选择器中出现不止一次。这就使得它可以反复引用父选择器，而不是重复父选择器的类名。

4.媒体查询

div{ @media screen{ color:red; @medis(min-width:768px){ color:blue; } } }

5.运算

@num:4 @fs:18px; @color:red div{ color:@color-12; font-size:@fs-@num }

任何数值，颜色和变量都可以进行运算。 如果在一个运算中使用了单位，如：font-size:18px - 4 ，最终输出结果中使用这个单位 – 14px。

6.函数

@base: red; @width: 0.3; div{ width: percentage(@width); // `30%` color: saturate(@base, 10%); background-color: spin(lighten(@base,15%), 8); }

percentage:转换成百分比； saturate：饱和度 lighten：亮度 spin：色相值 Less 提供了许多用于转换颜色，处理字符串和进行算术运算的函数

7.作用域

@color:red; div{ span:{ color:@color; } @color:blue; } 输出 color:blue

首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推 变量和混合不必在使用前声明

8.注释

/*块注释*/ //行注释 块注释会被编译 行注释不会被编译

9.导入

@import 'myless'; //myless.less @import 'myless.css'

10.变量插值

@mySelector:page; .@{mySelector}{ color:red; } 编译成： .page{ color:red; }

11.URLS

@baseUrl:'./theme'; @import "@{baseUrl}/page"; div{ background:url("@{baseUrl}/close.png"); }

12.属性

@str:color; div{ @{str}:red; background-@{str}:blue; } 编译为： div{ color:red; background-color:blue; }

13.扩展

.page{ &:extend(.text); background:red; } 或者 .page:extend(.text){ background:red; } .text{ color:red; } 编译成： .page{ background:red; } .page, .text{ color:red; }

.c:extend(.d all) { // 扩展".d"的所有实例，比如".x.d"或者".d.x" } .e:extend(.f, .g) {} 它可以包含多个要扩展的类，使用逗号分割即可。

14.!important

.page(@bg: blue, @color: red) { background: @bg; color: @color; } .unimportant { .page(); } .important { .page() !important; } 编译成： .unimportant { background:blue; color: red; } .important { background: blue !important; color: red !important; }

15.命名参数

.display-flex(@direction:row;@alignItems:center;@justifyContent:center) { display: flex; flex-direction: @direction; align-items: @alignItems; justify-content: @justifyContent; } div1{ .display-flex(@alignItems:flex-start;@justifyContent:flex-start) } div2{ .display-flex(column,@justifyContent:flex-start) } .box-shadow(@x: 0; @y: 0; @size: 1px; @color: red) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .page{ .box-shadow(2px; 5px); }

16.匹配模式

.position-absolute(top;@left:0;@top:0){ position:absolute; left:@left; top:@top; } .position-absolute(bottom;@left:0;@top:100px){ position:absolute; left:@left; top:@top; } .position-absolute(@_;@left:0;@top:100px){ position:absolute; left:@left; top:@top; color:red; } div{ .position-absolute(bottom) } 编译成： div{ position:absolute; left:0; top:100px; color:red; }

17.传递规则集给混合

.screen(@color){ @media screen and (min-width:1000){ @color();} } .page{ background:red; .screen({ background:blue; }) } //声明规则集合 @screen:{background:red;}; //使用规则集合 .scr

18.循环

.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); } 编译成： .column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }

3. 需要注意作用域和匹配问题

来源 http://www.css88.com/doc/less/features/#parent-selectors-feature