一、介绍
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
中文网址: http://lesscss.cn/
二、特点
1、写样式更简单:嵌套
2、使用方便:变量、运算、函数
3、学习成本低:语法
三、语法
1、变量
变量声明
@color:#adf;
@height:100px;
//1. 变量声明
header{
background-color:@color;
height:@height;
}
- 变量名称要求: 字母、数字、下划线、中横线
- 首字母可以为数字,可以为纯数字
- 区分大小写
- 变量值随意
变量差值
将一个变量的值作为选择器
@section:#section;
@{section}{
height:400px;
background:#ede;
}
变量拼接
@one:section;
@two:footer;
@s:~'@{one},@{two}';
@{s}{
background:#999;
}
2、运算
header{
height:100px+200px;
}
section{
height:100px*2%; // 200px;
// 如果都有单位,则使用第一个作为单位
width:900/33px; //27.2727px;
// 如果只有一个有单位,则使用该单位
}
3、嵌套
less 支持嵌套书写形式
(1)普通嵌套
#app{
#header{
// 子孙元素
.logo{
}
// 子元素
>.search{
}
// 后边紧挨着的元素
+ div{
}
&:hover{
}
&::before{
}
}
}
(2)媒体查询
.left{
height:500px;
background-color:#adb;
// >=1200
@media screen and(min-width:1200px) {
background:#6e4848;
}
// >=1200,<=900
@media screen and(max-width:1200px) and (min-width:900px){
background:#baa;
}
//<900
@media screen and (max-width:900px){
background:#abd;
}
}
(3)变量作用域
变量只能在当前代码段和下层代码段使用。
4、混合 mixins
将需要重复使用的代码封装到一个类中,在需要使用的地方调用。
.class #id
(1)普通混合
.font_h{
color: red;
}
h1{
font-size:28px;
.font_h;
}
(2)不带输出混合
不输出选择器的单独样式设置
.float_left{
content:".";
display:block;
clear:both;
}
#box1{
float_left();
}
(3)参数混合
// 定义混合
.border(@border_color){
border:2px solid @border_color;
}
// 使用混合
.div{
.border(#f60);
// 使用时我们需要传入一个参数进去
}
.div {
border: 2px solid #ff6600;
}
两个混合,混合名相同,但是参数不同,这是两个不同的混合,根据参数的个数来决定执行哪个混合
参数默认值
// 定义混合
.border(@border_color:#f60;){
border:2px solid @border_color;
}
// 使用混合
.div{
.border();
}
.div {
border: 2px solid #ff6600;
}
注意: 具有默认值的参数一定要靠后声明,否则会有语法错误。
调用的时候有两种形式
按顺序传参
.box2(100px, 100px, #000);
制定参数名传参
.box2(@bg:#090, @width: 100px, @height:200px);
(4)条件混合
.arrow(@size:10px, @color: #908, @direction) when(@direction=bottom) {
width:0px;
height:0px;
border-style:solid;
border-width: @size;
border-color: @color transparent transparent transparent ;
}
4、导入
less 支持组件化,允许将不同功能的代码放到不同的文件中。
- less 文件不需要加后缀
- css 文件需要加文件后缀
5、函数
less 提供了内置函数来处理,文档地址 https://less.bootcss.com/functions/,函数和混合的区分
混合
相当于是自定义函数函数
相当于是内置函数
数学函数
- ceil
- floor
- percentage 将小数转化为 『百分比』
颜色操作
- lighten 加亮
- darken 加暗
- fadein 提高透明度
- fadeout 降低透明度
6、Map
Map 相当于 JS 的对象,可以把一系列的数据保存在 Map 中
#color(){
base: #098;
darker: darken(#098, 10%);
darkest: darken(#098, 30%);
}
footer{
height:100px;
background: #color[darker];
}