less预编译css基础语法

序

作为一种 CSS 扩展, Less 不仅向后兼容 CSS, 它还使用现有的 CSS 语法新增了额外的特性. 这使得学习 Less 更轻松, 一旦有任何问题，可以随时退回使用标准的 CSS。

为什么要学习less，sass等预编译语言？

因为高效，便捷，复用，利于维护……

安装

一. 菜鸟方式
koala官网：http://koala-app.com/index-zh.html
点击下载：下载koala v2.3.0

二. 其他方式
npm安装：

$ npm install less -g

调用语法：
lessc [option option=parameter ...] <source> [destination]
例如：

$ lessc bootstrap.less bootstrap.css

以下是我使用less总结下来的的5大经典实用技术

1.嵌套

最喜欢的莫过于嵌套语法
编译前：

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

编译后：

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

2.表达式

可以进行运算，比如加、减、乘、除。（注意：老外的数学不是盖的，使用圆括号进行优先级计算时注意单位，因为有坑）

举一个栗子让大家慢慢体会。

编译前：

.test {
  width: (200+200)-10px;
  height: 2*200px;
  font-size: 24px/2;
  border-width: 20-10px;
}

编译后：

.test {
  width: 390px;
  height: 400px;
  font-size: 12px;
  border-width: 10px;
}

3.混合

sass也有这个功能，不过我还是觉得less的混合比较人性化，调用方便快捷。另外，它还可以用来封装css3帧动画以及浏览器兼容样式混合函数。
快来一堆栗子吭一下。

编译前：

.error{
  color: red; //  这个会生成样式
}
.warning(){
  background-color: orangered;
}
.font-s(@x){ //传参
  font-size: @x;
}
.line-h(@h:1.2em){ //设置默认值
  line-height: @h;
}
.message{
  .error;
  .warning(); //无参数调用可以省略括号
  .font-s(24px);
  .line-h();
}

编译后：

.error {
  color: red;
}
.message {
  color: red;
  background-color: orangered;
  font-size: 24px;
  line-height: 1.2em;
}

小白莫要以为上面的做法太多余，如果是大型项目，遇到大量相同样式的时候，他就可以发威了！！！

4.变量

我个人喜欢通过变量存储一些常用色彩以及字体等。

编译前：

@color-c: #ccc;
@selector: banana;

.@{selector} {
  color: @color-c;
}

编译后：

.banana {
  color: #cccccc;
}

5.父级选择器

例一
编译前：

a {
  color: blue;
  &:hover {
    color: green;
  }
}

编译后：

a {
  color: blue;
}

a:hover {
  color: green;
}

例二
编译前：

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

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

编译后：

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

结束语

当然，less的功能远远不止这些，还有很多高级语法没有在上面的案例中展示。如果您热衷于less预编译，请去官网了解更多

谢谢关注，欢迎点赞：）