LESS学习笔记

前言：学而时习之不亦说乎
其实是以前做的笔记不见了重新写~😤

安装

服务器端

通过npm（包管理器）安装

$ npm install -g less

客户端

在页面中引用

<link rel="stylesheet/less" type="text/css" href="文件.less" />
<script type="text/javascript" src="less.js"></script>

需要注意<link>的rel属性并且这个标签放在脚本文件之前，less.js下载

用法

变量

变量定义： @变量名 : 值;

混合

将一系列属性从一个规则集引入到另一个规则集中。

.border {
	border: 1px solid #ccc;
}
#id {
	.border;
}

嵌套

可以在一个选择器中嵌套子选择器的样式。

#parent {
	border: 1px solid #ccc;
    #child {
    	color: #123;
    }
    a {
    	&:hover {
        	color: #123;
        }
    }
}

注意，&表示父选择器，上栗&:hover等价于a:hover

计算

任何数值、颜色和变量都可以计算。

@num: 10px
#id {
	width: @num * 10;
    height: calc(@num + 5px);		// calc()是css3中的属性，用于计算
    padding: ~'calc(@num - 5px)'	// 不会在编译后的css文件中显示计算结果
}

函数