just do it

less学习笔记

Posted on Dec 08, 2016 By LiuZhiKe

less是什么

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

使用less

Less 可以通过 npm 在命令行上运行；在浏览器上作为脚本文件下载；或者集成在广大的第三方工具内。请参考 多种用法

这里推荐使用的是一款国产的开源预处理语言图形编译工具Koala, 因为是有中文版而且使用起来简单,Koala是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。

在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。

其他配置使用注意事项等等,去Koala官网查看相关文档, 都有很详细说明, 这里主要记录学习less的语法.

声明文档格式

在less文件顶部声明@charset "utf8";

注释

/* 我是注释 */ 在less文件和css文件中都会显示
// 我是注释 不会在css文件中显示, 在less中显示

变量

less中声明变量必须使用@开头, 例如@变量名: 值;

//less文件
@test_width:300px;
.box {
	width:@test_width;
	}

编译成css文件之后 :

//css文件
.box {
	width: 300px;

混合

我理解为把之前声明过的样式当做变量使用, 可提高代码复用, 提升效率.

//less文件
.box1 {
	width:300px;
	height:300px;
	background:#0f0;
	}
	
.box2 {
	.box;  //代替了类名为box1的全部样式声明
	margin: 10px;
	}

编译成css文件之后 :

//css文件
.box1 {
	width:300px;
	height:300px;
	background:#0f0;
	}
	
.box2 {
	width:300px;
	height:300px;
	background:#0f0;
	margin: 10px;
	}

默认带值:

//less文件
.border(@border_width:10px) { //如声明了10px, 那么没传参数的话默认显示就是10px
	border: solid pink @border_width;
	}
.box1 {
	.border(); //没有传参数
	.border(30px); //传入了参数

编译成css文件之后:

//css文件
.box1 {
	border: solid pink 10px; //显示默认值
	border: solid pink 30px; //显示传入参数的值
	}

举个减少代码量的栗子,一些css3属性要做兼容, 用的多的样式用混合之后就轻松了.

//less文件
.border_radius(@radius:5px){
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
	}
	
.box1 {
	.border_radius();

编译成css文件之后:

.box1 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

其他地方要用到不同的圆角弧度, 只需在.border_radius();中传入需要的值就OK

匹配模式

在使用的时候传入事先定义好声明的值就可以了, 举个栗子, 遇到用css写三角形的情况, 用匹配模式-匹配三角形, 只需传入方向和宽度.

//less文件
    //声明上右下左四个方向的三角
.triangle(top,@w:5px,@c#ccc) {
	border-width: @w;
	border-color: transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
	}
.triangle(right,@w:5px,@c#ccc) {
	border-width: @w;
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed solid dashed;
	}
.triangle(left,@w:5px,@c#ccc) {
	border-width: @w;
	border-color: transparent @c transparent transparent;
	border-style: dashed solid dashed dashed;
	}

.triangle(bottom,@w:5px,@c#ccc) {
	border-width: @w;
	border-color: @c transparent transparent transparent;
	border-style: solid dashed dashed dashed;
	}
//无论选择上面哪一个, 始终会把下面这个表达式里的声明带上	
.triangle(@_.@w:5px.@c:#ccc){
	width:0;
	height:0;
	overflow:hidden;	

.sanjiao {
	.triangle(bottom, 100px); //匹配传入的参数, 不传参数会显示默认的
	}

编译成css文件之后:

//css文件
.sanjiao {
	border-width:100px;
	border-color: #cccccc transparent transparent transparent;
	border-style: solid dashed dashed dashed;
	width:0;
	height:0;
	overflow: hidden;
	}

匹配模式-定位

一个使用匹配模式, 匹配定位的例子.

//less文件
.pos(r) {
	position: relative;
	}
.pos(a) {
	position: absolute;
	}
.pos(f) {
	position: fixed;
	}
	
.box1 {
	width:300px;
	height:300px;
	background-color: #ccc;
	.pos(r); //传入需要匹配的参数
	}

编译成css文件之后:

.box1 {
	width:300px;
	height:300px;
	background-color: #ccc;
	position: relative;
	}

运算

在less中的运算, 任何数字, 颜色,或者变量都可以参与运算+ - * /, 运算应该包裹在括号中.

//less文件
@test_width:300px;
.box {
	width: (@test_width - 20)*5; //先减后乘
	color: #ccc - 10; //用得少
	}

编译成css文件之后:

.box {
	width: 1400px; //运算后的结果
	color: c2c2c2; //颜色会变淡
	}

嵌套规则

和写HTML代码类似, 直接上代码:

//html文件
<ul class='list'>
	<li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
	<li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
	<li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
	<li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
	<li><a href="#">这是一段测试文字</a><span>2016-12-06</span></li>
</ul>

//less文件
.list {
	width:600px;
	margin: 30px auto;
	padding: 0;
	list-style: none;
	
	li {
		height: 30px;
		line-height: 30px;
		background_color: #ccc;
		margin-bottom: 5px;
	}
	a {
		float: left;
		&:hover { //&代表的是父元素
			color: red;
			}
	}
	span {
		float: right;
	}
	}

注意其中&代表的是父元素,编译成css文件之后:

.list {
	width:600px;
	margin: 30px auto;
	padding: 0;
	list-style: none;
	}
.list li {
		height: 30px;
		line-height: 30px;
		background_color: #ccc;
		margin-bottom: 5px;
		}
.list a {
		float: left;
		}
.list span {
		float: right;
		}

@arguments

类似于形参, 代替多个值, 编译后的值为传入的实参, 如没有传参,则编译为默认值.

//less文件
.border(@w:30px,@c: yellow,@xx:solid) {
	border: @arguments; //可代替上面括号内三个参数

.box {
	.border(70,red,dashed); //传入你需要的参数用逗号分隔, 不传表示默认
	}

编译成css文件之后:

//css文件
.box {
	border: 70px #ff0000 dashed;

避免编译

有时候我们需要输出一些不正确的css语法或者使用一些less不认识的专有语法, 要输出这样的值用''/""包裹, 然后再前面加上~ 例如width:~'calc(300px - 30px)';

//less文件
.box {
	width: calc(300px - 30px);
	}

编译成css文件之后:

//css文件
.box {
	width: calc(300px - 30px);
	}

这样不需要编译的时候, 也可以很好的解决.

!important

作用是增加优先级, 一般不用, 影响性能.

//less文件
.border_radius(@radius:5px){
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
	}
	
.box1 {
	.border_radius() !important; //添加了!important

编译成css文件之后:

.box1 {
	-webkit-border-radius: 5px !important;
	-moz-border-radius: 5px !important;
	border-radius: 5px !important;