1.注释
less 的注释有两种方法，"/**/" 和 "//"，前一种会在 css 文件中显示，后一种不会在 css 显示。
2.定义变量的方法："@"加上变量名。
@tabbarActiveColor:#26a2ff;
3.运算
@height: 30px;
height: @height; // 30px
line-height: @height - 1; // 29px
4.继承 &
"&"符号，这个符号起到继承的作用，这个符号就是它的父级标签(类，id等等)。
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
& > div:not(.heading) {
padding: 40px 150px;
& h3 {
font-size: @fs + 12;
margin-bottom: .5rem;
}
& li {
font-size: @fs + 2;
line-height: 1.6;
}
}
}
相当于
.industry-section {
width: 950px;
margin-right: auto;
margin-left: auto;
}
.industry-section > div:not(.heading) {
padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
font-size: 28px;
margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
font-size: 18px;
line-height: 1.6;
}5.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
classA
.page-width {
width: 100%;
max-width: 1920px;
margin-right: auto;
margin-left: auto;
}classB
body {
.page-width; // classB
font-size: @fs;
color: @text-color;
background-color: #fff;
font-family: "Microsoft Yahei", Arial, sans-serif;
}6.媒体查询
.application-section {
max-width: 100%;
width: 1920px;
height: 770px;
margin: 30px auto;
background: url(../images/app-scene.png) center top no-repeat;
position: relative;
& h2 {
position: absolute;
top: 70px;
left: 50%;
font-size: 0;
width: 1200px;
transform: translateX(-50%);
@media (max-width: 1600px) {
width: 1000px;
& span {
font-size: @fs + 20;
}
}
}
}
7.mixins 混合
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
默认值
.borderRadius(@radius:5px){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
.btn {
.borderRadius();
}8.function
less 包含许多内置函数
/*把像素转成rem
375/10 = 37.5
375 它是ipone6的屏幕宽度
注:将屏幕分成10等份,10rem为屏幕宽度
例如：
.slide-pages {
position: absolute;
.bottom(10);
.right(15);
}
*/
.fs(@px){
font-size: unit(@px/37.5,rem);
}
.w(@px){
width: unit(@px/37.5,rem);
}
.h(@px){
height: unit(@px/37.5,rem);
}
.lh(@px){
line-height: unit(@px/37.5,rem);
}
.pl(@px){
padding-left: unit(@px/37.5,rem);
}
.pr(@px){
padding-right: unit(@px/37.5,rem);
}
.pt(@px){
padding-top: unit(@px/37.5,rem);
}
.pb(@px){
padding-bottom: unit(@px/37.5,rem);
} .mt(@px){
margin-top:unit(@px/37.5,rem);;
}
.mb(@px){
margin-bottom:unit(@px/37.5,rem);
}
.ml(@px){
margin-left:unit(@px/37.5,rem);
}
.mr(@px){
margin-right:unit(@px/37.5,rem);
}
.top(@px){
top:unit(@px/37.5,rem);
}
.bottom(@px){
bottom:unit(@px/37.5,rem);
}
.left(@px){
left:unit(@px/37.5,rem);
}
.right(@px){
right:unit(@px/37.5,rem);
} .padding(@tb,@lr){
padding: unit(@tb/37.5,rem) unit(@lr/37.5,rem);;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix{
clear: both;
}
自定义
variable.less
/*把像素转成rem
375/10 = 37.5
375 它是ipone6的屏幕宽度
注:将屏幕分成10等份,10rem为屏幕宽度
例如：
.slide-pages {
position: absolute;
.bottom(10);
.right(15);
}
*/ // 字号
.fs(@px){
font-size: unit(@px/36,rem);
[data-dpr='2'] & {
font-size: unit(@px/36,rem) * 2;
}
[data-dpr='3'] & {
font-size: unit(@px/36,rem) * 3;
}
} // 宽度
.w(@px){
width: unit(@px/36,rem);
} // 高度
.h(@px){
height: unit(@px/36,rem);
} // 行高
.lh(@px){
line-height: unit(@px/36,rem);
} // 内边距
.pl(@px){
padding-left: unit(@px/36,rem);
}
.pr(@px){
padding-right: unit(@px/36,rem);
}
.pt(@px){
padding-top: unit(@px/36,rem);
}
.pb(@px){
padding-bottom: unit(@px/36,rem);
}
.p2(@ptb,@prl){
padding: unit(@ptb/36,rem) unit(@prl/36,rem);
}
.p3(@pt,@pm,@pb){
padding: unit(@pt/36,rem) unit(@pm/36,rem) unit(@pb/36,rem);
}
.p4(@pt,@pr,@pb,@pl){
padding: unit(@pt/36,rem) unit(@pr/36,rem) unit(@pb/36,rem) unit(@pl/36,rem);
} // 外边距
.mt(@px){
margin-top:unit(@px/36,rem);;
}
.mb(@px){
margin-bottom:unit(@px/36,rem);
}
.ml(@px){
margin-left:unit(@px/36,rem);
}
.mr(@px){
margin-right:unit(@px/36,rem);
}
.m2(@mtb,@mrl){
margin:unit(@mtb/36,rem) unit(@mrl/36,rem);
}
.m3(@mt,@mm,@mb){
margin:unit(@mt/36,rem) unit(@mm/36,rem) unit(@mb/36,rem);
}
.m4(@mt,@mr,@mb,@ml){
margin:unit(@mt/36,rem) unit(@mr/36,rem) unit(@mb/36,rem) unit(@ml/36,rem);
}
.ma(@mt,@mb){
margin:unit(@mt/36,rem) auto unit(@mb/36,rem);
} // 距离
.t(@px){
top:unit(@px/36,rem);
}
.b(@px){
bottom:unit(@px/36,rem);
}
.l(@px){
left:unit(@px/36,rem);
}
.r(@px){
right:unit(@px/36,rem);
} // 浮动
.fl{
float: left;
}
.fr{
float: right;
} // 清除浮动
.clearfix{
clear: both;
} // 圆角
.br(@px){
border-radius: unit(@px/36,rem);
} // 背景
.bs(@width,@height){
background-size:unit(@width/36,rem) unit(@height/36,rem);
}
.bp(@left,@top){
background-position:unit(@left/36,rem) unit(@top/36,rem);
} // 边框
.b(@px,@type,@color){
border: unit(@px/36,rem) @type @color;
} /**
* 解决1px问题
*/
// 顶部
.border-top-1px(@color) {
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid @color;
content: ' ';
}
} // 底部
.border-bottom-1px(@color) {
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom: 1px solid @color;
content: ' ';
}
}
9.继承 extend
.animal{
color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
width: 100px;
height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
&:extend(.animal);
width: 50px;
height: 50px;
}10.引入 @import
@import "main.less";
.