LESS

简介

Less 是一个 CSS 预处理器，让 CSS 具有动态性。

另一方面，Bootstrap 是一个快速开发 Web App 和站点的工具包。

在本教程中，我们将讨论了有关使用带有 Less CSS 的 Bootstrap 知识。这样，您可以在 CSS 中使用 Bootstrap 的 Less 变量、混合（mixins）和嵌套（ nesting）。

包含哪些内容:feature(基本特色) ,less Function(函数)  Using less.js(less.js直接在heml页面中引入less) tools of less(工具)

一,variables(变量)

@width:10px;
@height:@width+10px;

#header{
width:@width;
height:@height;
}

上面的@width是less中的一个变量,可以进行运算,其通过less.cdm转换为下面的css样式

#header{
width:10px;
height:20px;
}

二,Mixins(混合模式)

Mixins are a way of including ("mixing in") a bunch of properties from one rule-set into another rule-set. So say we have the following class:

MIxins  意为 mixing in 混合进去的意思  我们直接上例子:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

经过编译后得css样式:

#menu a{
color:#111;
border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a{
color:red;
border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

这种方法类似于直接将类名当作函数来使用,增加代码的复用性

三,Nesting 嵌套模式

我们可以在less中使用嵌套模式,即在样式中写样式,这样结构更加明显,方便代码的管理,话不多说直接上列子

#header{
    color:black;
    .navigation{
        font-size:12px;
        }
    .logo{
    width:300px;
    }
}

对应的css代码:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

还可以使用此方法将伪选择器与mixin捆绑在一起。这里有一个经典的clearfix hack，重写为mixin(&表示当前选择器的父类):

.clearfix{
    display:block;
    zoom:1;
    &:after{
        content:'';
        display:block;
        font-size:0;
        height:0;
        clear:both;
        visiblity:hidden;
    }
}

案例1:

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

output:

.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

案列二:

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

The selector .no-borderradius & will prepend .no-borderradius to its parent .header .menu to form the.no-borderradius .header .menu on output:

.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}