本文主要介绍less的基本用法和一些简单的小技巧。
一、编译.less文件以.css使用命令行
具体请参照LESS官网链接
二、LESS基本用法
2.1变量的设置与使用
设置变量,封装样式:
@main-color: #5B83AD;
使用变量:
body{
background: @bg-color;
}
渲染结果如下:
body {
background: #FFFFFF;
}
2.2混合使用
设置混合使用的.class样式,封装样式:
.padding{
padding: 0.5rem 0.625rem;
}
调用所需的.class样式
.nav-wrapper{
.padding;//使用less混合功能,仅需在所需要的.class类(.nav-wrapper)中声明.+class类名(.padding)即可直接引入该样式
background-color: #EFF3F7;
font-size: 0;
}
渲染结果如下:
.nav-wrapper {
padding: 0.5rem 0.625rem;
background-color: #EFF3F7;
font-size: 0;
}
2.3混合使用延伸1(带参使用)
设置所需的混合参数以及变量,封装样式:
.padding{
padding: 0.5rem 0.625rem;
}
.nav-wrapper(@bgcolor) {
.padding;
background-color: @bgcolor;
font-size: 0;
}
混合模式带参使用:
.nav{
.nav-wrapper(#EFF3F7);
}
渲染结果如下:
扫描二维码关注公众号,回复:
2527317 查看本文章
.nav {
padding: 0.5rem 0.625rem;
background-color: #EFF3F7;
font-size: 0;
}
2.3混合使用延伸2(带默认参数使用)
设置所需的混合参数以及变量,封装样式:
.padding{
padding: 0.5rem 0.625rem;
}
.nav-wrapper(@bgcolor:#EEEEEE) {
.padding;
background-color: @bgcolor;
font-size: 0;
}
混合模式带参使用:
.nav{
.nav-wrapper();
}
渲染结果如下:
.nav {
padding: 0.5rem 0.625rem;
background-color: #EEEEEE;
font-size: 0;
}
2.4@_ 匹配模式
栗子:绘制三角形
配置基础样式,封装样式:
.triangle(top, @width: 5px, @color: #ccc) {
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(right, @width: 5px, @color: #ccc) {
border-width: @width;
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(bottom, @width: 5px, @color: #ccc) {
border-width: @width;
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
.triangle(left, @width: 5px, @color: #ccc) {
border-width: @width;
border-color: transparent transparent transparent @color;
border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 5px, @color: #ccc) {
// @_ 是固定格式,表示不管你匹配到谁,都会带上这些内容
width: 0;
height: 0;
overflow: hidden;
}
调用集成样式,如制作顶部倒三角
.triangle-top {
.triangle(top, 30px);
}
渲染效果如下:
.triangle-top {
border-width: 30px;
border-color: #ccc transparent transparent transparent;
border-style: solid dashed dashed dashed;
width: 0;
height: 0;
overflow: hidden;
}
2.5运算,包含加减乘的运算,需要用括号拼接,操作的对象主要是数字、颜色、变量等。(颜色一般情况下很少用运算)
配置基础样式,封装样式:
@width:3rem;
调用样式:
.wrapper{
width:(@width-0.5)*1;//单位只要有一个带即可
}
2.6嵌套规则
嵌套关系主要是父子级的关系层,但是不建议大家使用,该方式不便代码的维护管理,尽可能使用.class来规划业务层级问题。
LESS嵌套参考案例:
.list {
width: 10rem;
margin: 3rem auto;
padding: 0;
font-size: 16px;
li {
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 0.375rem;
padding: 0 0.375rem;
}
p {
float: left;
color: #333;
&:hover {
//&代表上一层选择器
color: red;
}
}
span {
float: right;
}
}
渲染结果:
.list {
width: 10rem;
margin: 3rem auto;
padding: 0;
font-size: 16px;
}
.list li {
height: 1.5rem;
line-height: 1.5rem;
margin-bottom: 0.375rem;
padding: 0 0.375rem;
}
.list p {
float: left;
color: #333;
}
.list p:hover {
color: red;
}
.list span {
float: right;
}
2.7懒人必备arguments变量,使用arguments的好处的就可以帮你自动填充所有变量。
封装样式:
.border_arg(@width: 1.75rem, @color: #e6e6e6, @style: solid) {
border: @arguments
}
调用样式:
.border_arguments {
.border_arg(0.375rem); //传参的思想
}
渲染结果:
.border_arguments {
border: 0.375rem #e6e6e6 solid;
}
三、less小技巧
3.1注释问题
/*编译后会被保留*/
//编译后不会被保留
3.2适用 !important
.nav{
.nav-wrapper(#EFF3F7)!important;//nav-wrapper所有的样式都带上!important
}
3.3避免编译符号 ~
在字符串前加上一个~即可使用一些less不认识的专有语法或者一些不正确的css语法。