Less 学习笔记

一、准备工作:
安装配置less
打开命令面板输入使用 npm install -g less
下载kaola 网址 :http://koala-app.com/
注: koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
二、开始学习less
1.建立一个新的移动app文件
2.在css文件夹下新建一个名为index.less文件
3.进入koala
点击找到对应的文件夹
进入图2
完成后会出现“success”的提示窗,在文件中新建一个css文件
在html页面中引入index.css和index.less,然后回到kaola中点击refresh刷新一下会出现一个css图标点击之后选中自动编译—>执行编译同样出现success
这里写图片描述
这时回到文件目录树里,就会发现多一个文件index.min.css
这里写图片描述
在html文件中添加一些元素,例:


之后到less文件里进行编写

//定义一些变量
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
//给div一个样式
div{
    width: 100px;
    height: 100px;
    background: @light-blue;
}

了解了基本用法之后,就可以依照官方文档进行学习


变量:定义变量来代替某个值,只能编译一次,本质是“常量”。例如:

@color:#ffddee;

body {
  background-color:@color;      
}

输出的结果为:

body {
  background-color:#ffddee;
}

变量是延时加载的,只有用到的时候才会加载。变量的查找顺序是从下到上,最近优先。


混合(Mixin): 在一个选择其中调用另外一个选择器,从而拥有其定义的特征。例如:

a {
  background-color:red;
  .nav;  
}

.nav{
  font-size:14px;
}

输出的结果是:

1 a {
2   background-color:red;
3   font-size:14px;
4 }
5 
6 .nav {
7   font-size:14px;
8 }

在混合的时候,如果不想让某个定义显示,可以在定义后加(),如上面的代码,在.nav 的定义处改为.nav() {….} 则只输出 a的定义。就像函数的调用一样。而在调用的时候.nav()等价于.nav 如果.nav中需要使用变量,则可以在调用的时候传入变量,如:

@font:14px;
a {
    background-color:red;
   .nav(@font);
}

.nav(@font) {
  font-size:@font;  
}

其中,@font 是可以设置默认值的,用法和在PHP中的用法一样,直接在选择器定义的时候设置@font=12px;即可。

当传递多个参数的时候,可以用@argument对象接收所有的参数,然后以数组的方式使用它。如果.nav定义为 .nav(…) 则代表可以接收0到多个参数,如果定义为.nav(@font,…)则@font是必须的,后面还可以传参数,后面的参数可以用@rest全部接收,然后以数组的方式使用即可。


嵌套:在选择器中定义另一个选择器,这样对应DOM中的结构. 例如:

div {
  a {
    font-size:14px; 
  }
}

输出结果:

div a {
  font-size:14px;
}

继承:在Less中允许选择器继承另一个选择器定义的属性,使用:extend,例如:

.subclass {
  background-color:#ccddee;
  text-align:center;
}

.class {
   color:red
   &:extend(.subclass);
}

其中&代表当前的上级对象,即.class本身,也就是说 .a:extend(.b){} 等价于 .a{&:extend(.b);}。上面的输出结果为:

.class {
  color:red;
}

.subclass, .class {
  background-color:#ccddee;
  text-align:center
}

在继承的时候,可以使用@_调用父层级的参数

如果在集成的时候加上all关键字,则会继承所有有关的定义,比如.a:extend(.b all){} 那么会继承所有出现过.b定义的地方的定义

继承的时候,如果在把 !important放在引用的选择器后面,则所有继承下的属性都会带有!important.

注意,:extend必须放在选择器的最后,否则是编译错误的。:extend是不能匹配带有变量的选择器定义的,然而带有变量的选择器定义可以使用:extend

合并属性:在每个需要合并的属性后添加一个+作为标识,则嵌套或者继承时,相同的属性就会合并

@import 

使用方法:@import (option) filename;  导入其他文件内容到该Less文件

其中,option的选项有以下值

referrence: 引用一个less文件,但是不对其内部的定义进行输出;

inline: 包含(include) 源文件但是不执行

less: 将导入的文件作为less文件编译,无论其后缀名是什么

css:  将导入的文件作为css文件编译,无论其后缀名是什么

once(default): 只包含一次该文件

multiple: 包含多次该文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值