正确使用less以及less变量variables

初见less
以//开始的注释不会被编译到css文件中
以/**/包裹的注释会被编译在css文件中

正确使用less

一、如何使用less
less文件只有在被编译后才能被浏览器识别使用

二、less编译工具
1、koala 国人开发的全平台的less编译工具 网址:http://koala-app.com/
2、winless windows下的less编译软件 网址:http://winless.org
3、codekit Mac平台下的less编译软件 网址:http://incident57.com/codekit/index.html

三、客户端调试方式
首先引用.less文件 注意引用时使用link引入,然后将rel属性设置为rel=“stylesheet/less”
然后引用less.js 注意:引入普通js引入方式一致,但是一定要放置在less样式文件之后

四、变量variables
(一)普通变量
1、变量的定义方式@
2、less编写:
@blue:#f00;
#header{
color:@blue
}
编译结果:
#header{
color:#f00
}
3、注意:由于前两只能定义一次,实际上他们就是“常量”
(二)、作为选择器和属性名的变量
1、使用时将变量以@{变量名}的方式使用
2、less编写
@mySelector:width;
.@{mySelector} {
@{mySelector}:960px;
height:500px;
}
编译结果:
.width{
width:960px;
height:500px;
}
(三)作为URL的变量
1、使用时,使用"“将变量的值括起来,使用时同样将变量以@{变量名}的方式使用
2、less编写
@imgUrl:“https://www.baidu.com/img/”;
body{background:#00f url(”@{imgUrl}/bdlogo.png") no-repeat}
编译结果: body{background:#00f url(http://www.baidu.com/img//bdlogo.png") no-repeat}

(四)延迟加载
1、延迟加载:变量是延迟加载的,在使用前不一定要预先声明 也就是说变量可以先使用再定义 不影响效果
2、less编写:
.lazy-eval{width:@var}
@var:@a;
@a:9%
编译结果:.lazy-eval-scope{width:9%}

(五)定义多个相同名称的变量时
1、在定义一个变量两次是,只会使用最后定义的变量,less会从当前作用域中向上搜索,这个行为类似于css的定义中始终使用最后定义的属性值。
2、less编写
@var:0;
class{
@var:1;
.brass{
@var:2;
three:@var;
@var:3;
}
one:@var;
}
编译结果:
.class{one:1}
.class .brass{ three:3 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值