简介
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');
}