Less自学笔记

fghgfhgfhgfhLess是一种动态样式语言，属于CSS预处理语言的一种。它使用类似CSS的语法，为CSS赋予动态语言的特性，如变量、函数、运算等。今天开始学习Less...

一、环境

通过<script>标签引入.less文件即可实现在服务器端将less预编译为css样式。

<script type="text/javascript" src="less.js"></script>

也可通过监测less样式，自动编译为css，从而减少修改less代码后需要按F5刷新后才能看到改变后的效果。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script

比较常用的less编译软件如Koala等。

二、注释

//单行注释不会进行编译
/*多行注释作为css的/*注释...*/形式进行编译*/

三、变量

定义采用"@变量名：变量值"形式，使用时采用"@变量名"或"@{变量名}"的形式。局部作用域高于全局作用域。

Less源码：

@c:color;
@div:.div;
@h:200px;
@w:200px;
@s1:'hello ';//要保留空格使用单引号或双引号，否则空格被忽略
@s2:world;

@{div}{
@c:#ccc;
width:@w;
height:@h;
content:'@{s1}@{s2}';
}

编译后的css：

.div {
width: 200px;
height: 200px;
content: 'hello world';
}

还可以通过extract函数获得列表元素，length获取元素个数，例如

@colors:#fff #ccc #ddd;
.div{
background:extract(@colors,1);
height:12px * length(@colors);
}

编译后的css：

.div {
background: #ffffff;
height: 36px;
}

四、嵌套

Less源码：

.main{
height:200px;
width:500px;
.main-left{
float:left;
height:200px;
width:100px;
}
.main-right{
float:right;
right:0;
height:200px;
width:400px;
.main-right-top{
height:50px;
}
.main-right-content{
height:120px;
}
.main-right-bottom{
height:30px;
}
}
}

编译后的css：

.main {
height: 200px;
width: 500px;
}
.main .main-left {
float: left;
height: 200px;
width: 100px;
}
.main .main-right {
float: right;
right: 0;
height: 200px;
width: 400px;
}
.main .main-right .main-right-top {
height: 50px;
}
.main .main-right .main-right-content {
height: 120px;
}
.main .main-right .main-right-bottom {
height: 30px;
}

五、父选择器&

通过&选择完整的父选择器，可以通过&追加，生成新的选择器，&：添加伪类，父选择器是组选择器时，会生成新选择器。

Less源码：

#lol .btn{
&:hover{
cursor:pointer;
}
&-m,&t{
font-size:10px;
}
.cng &{
text-indent:1px;
}
}
#lol1,.lol1{
&:hover{
cursor:pointer;
}
& + &{
cursor:pointer;
}
}

编译后的css：

#lol .btn:hover {
cursor: pointer;
}
#lol .btn-m,
#lol .btnt {
font-size: 10px;
}
.cng #lol .btn {
text-indent: 1px;
}
#lol1:hover,
.lol1:hover {
cursor: pointer;
}
#lol1 + #lol1,
#lol1 + .lol1,
.lol1 + #lol1,
.lol1 + .lol1 {
cursor: pointer;
}

六、@import

1、@import （reference）"文件路径"

将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过

extend

和

mixins

的方式引用样式库的内容。

2、@import （inline）"文件路径"

用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式。

3、@import （less）"文件路径"

默认使用该配置项，表示引入的文件为less文件。

4、@import （css）"文件路径"

表示当前操作为CSS中的

@import

操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件.

5、@import （once）"文件路径"

表示对同一资源可引入多次。

6、@import （multiple）"文件路径"

表示对同一资源可引入多次。

七、继承

7.1 语法

1、<selector>:extend(<parentSelector>){}

2、<selector>{&:(<parentSelector>);}

Less源码：

.parent{
width:50px;
}
.son1:extend(.parent){
height:10px;
}
.son2{
&:extend(.parent);
height:20px;
}

编译后的css：

.parent{
width:50px;
}
.son1:extend(.parent){
height:10px;
}
.son2{
&:extend(.parent);
height:20px;
}

7.2 all关键字

all关键字会匹配所有parentSelector中的样式，并用selector替换parentSelector生成新的选择器。

Less源码：

.parent{
　　height: 100px;
.hair{
　　color: #f27;
}
[name=eyes]{
　　color: #768;
}
}
.son:extend(.parent all){}

css源码：

.parent,
.son {
height: 100px;
}
.parent .hair,
.son .hair {
color: #f27;
}
.parent [name=eyes],
.son [name=eyes] {
color: #768;
}

八、混合（Mixin）
less源码：

.parent{
width:20px;
}
.parent1(@h){
height:@h;
}
.parent3(@fs:10px){
font-size:@fs;
}
.son{
.parent;
.parent1(100px);
.parent3();
}

编译后的css：

.parent {
width: 20px;
}
.son {
width: 20px;
height: 100px;
font-size: 10px;
}

九、匹配模式

Less源码：

.tri(top,@w,@c){
border-width:@w;
border-style:solid;
border-color:transparent transparent @c transparent;
}
.tri(bottom,@w,@c){
border-width:@w;
border-style:solid;
border-color:@c transparent transparent transparent;
}
.tri(left,@w,@c){
border-width:@w;
border-style:solid;
border-color:transparent @c transparent transparent;
}
.tri(right,@w,@c){
border-width:@w;
border-style:solid;
border-color:transparent transparent transparent @c;
}
.tri(@_,@w,@c){
width:0px;
height:0px;
}
.tri{
.tri(right,50px,green);
}

编译后的css

.tri {
border-width: 50px;
border-style: solid;
border-color: transparent transparent transparent #008000;
width: 0px;
height: 0px;
}

十、条件、循环

when关键字实现条件控制，递归实现循环控制

Less代码：

<span style="color:#009900;">/*true值匹配*/</span>
.truth(@a) when(@a){
&::after{
content:@a;
}
}
.myDiv1{
.truth(true);
}
<span style="color:#006600;">/* 类型判断函数
* iscolor
* isnumber
* isstring
* iskeyword
* isurl
*/</span>
.color(@c) when(iscolor(@c)){
color:@c;
}
<span style="color:#006600;">/* 单位判断函数
* ispixel
* ispercentage
* isem
* isunit
*/</span>
.myDiv2(@h) when(ispixel(@h)){
height:@h;
}
<span style="color:#006600;">/* 关系运算符
* >
* <
* >=
* <=
*/</span>
.mydiv3(@h) when (@h>100){
height:@h;
}
.temp{
.mydiv3(100);
}
<span style="color:#006600;">/* 逻辑运算符
* and
* or
* not
*/</span>
.mydiv4(@h,@w) when(@h>100) and (@w>200){
width:@w;
height:@h;
}
<span style="color:#006600;">/*& when实现if*/</span>
@tmp:true;
& when(@tmp){
.txt{
border-style:solid;
}
}
<span style="color:#006600;">/*循环*/</span>
.columns(@n,@i:1) when(@i<=3){
.columns-@{i}{
width:@i * 100% /100;
}
.columns(@n,@i + 1);
}
.columns(4);

编译后的css：

.myDiv1::after {
content: true;
}
.txt {
border-style: solid;
}
/*循环*/
.columns-1 {
width: 1%;
}
.columns-2 {
width: 2%;
}
.columns-3 {
width: 3%;
}

十一、运算符

在使用运算符时，运算符与运算数之间一定要有空格，否则会报错。当运算数之间单位不同时，以第一个运算数为准。

十二、函数