Bootstrap Less的使用

简介

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

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

编译工具

Less 和 Sass 都需要经过编译生成CSS 才可以使用经常使用的编译工具是koala

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

链接: 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还可以有函数详细用法见官网.

来源：https://www.cnblogs.com/kkcoolest/p/11677273.html

标签

css

less

border-radius