less 项目实战

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";

.