Bootstrap Less的使用

简介

由于CSS无法定义变量 以及冗余重复的代码 在大项目中编写CSS会有很多重复 于是有了更高级的预处理语言Less和Sass

Less相比Sass 使用更方便简洁 而Sass拥有更强大的功能

 

编译工具

Less 和 Sass 都需要经过编译生成CSS 才可以使用 经常使用的编译工具是koala(国内开发 全平台)

这儿给出Linux下64位最新版本koala_2.3.0_x86_64  其他版本koala官网自行下载

链接: https://pan.baidu.com/s/14F1himmYeHORxyNX-ooonQ  密码: ufvo

 

Less用法 (需要先下载Less)

1 Less使用@定义和引用变量 

//Less 源码
@color:#ffffff;
#header{
  color: @color;
}
//经过Koala编译后
#header {
  color: #ffffff;
}

2 使用混合 上面提到正是由于CSS重复的代码才导致Less和Sass 的出现  因此Less可以实现代码复用

//Less源码
.rounded-corners(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}

#header{
  .rounded-corners
}

#footer{
  .rounded-corners(10px)
}
//编译后的CSS
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

3 嵌套规则 可以在一个选择器中嵌套另一个选择器来继承编写层叠样式

//Less 源码    
.section-main{
  div li{
    List-style:none;
  }

  .container{
    margin: auto;
    width: 960px;
  }

  a{
    Text-decoration:none;
  }
}
//编译后的CSS
.section-main div li {
  List-style: none;
}
.section-main .container {
  margin: auto;
  width: 960px;
}
.section-main a {
  Text-decoration: none;
}

4 另外 Less还可以有函数  详细用法见官网.