1.注释
less 的注释有两种方法,"/**/" 和 "//",前一种会在 css 文件中显示,后一种不会在 css 显示。
2.定义变量的方法:"@"加上变量名。
@tabbarActiveColor:#26a2ff;
3.运算
@height: 30px; height: @height; // 30px line-height: @height - 1; // 29px
4.继承 &
"&"符号,这个符号起到继承的作用,这个符号就是它的父级标签(类,id等等)。
.industry-section { 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 { 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 { 100%; max- 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- 100%; 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; 1200px; transform: translateX(-50%); @media (max- 1600px) { 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){ 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){ 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; 100%; border-bottom: 1px solid @color; content: ' '; } } // 底部 .border-bottom-1px(@color) { position: relative; &:after { display: block; position: absolute; left: 0; bottom: 0; 100%; border-bottom: 1px solid @color; content: ' '; } }
9.继承 extend
.animal{ color: #fff; } /* 语法1:<selector>:extend(<parentSelector>){} */ .bear:extend(.animal){ 100px; height: 100px; } /* 语法2:<selector>{ &:extend(<parentSelector>); } */ .deer{ &:extend(.animal); 50px; height: 50px; }
10.引入 @import
@import "main.less";
.