更加方便的创建css文件。
平时常用的一般是嵌套和变量声明，其他的可以没事看看。

简单安装和编译

  1. npm install -g less
  3. lessc styles.less

常用

嵌套

基础功能。

变量

  1. @white:#fff;

import导入其他less

  1. @import './style.less';

运算

  1. @fontSize:10px;
  2. .class{
  3.   font-size:@fontSize*10;
  4. }

内置函数

函数地址： http://less.bootcss.com/functions/ 用的比较少，不做详细介绍

  1. @color: #FF8000;
  2. @width:1.0;
  3. .mycolor{
  4. color: @color;
  5.  width: percentage(@width);   //100%
  6. }

扩展

&:extend 在一个选择器中扩展其他选择器样式。

源代码：

  1. h2 {
  2.   &:extend(.style);
  3.   font-style: italic;
  4. }
  5. .style {
  6.   background: green;
  7. }

编译结果：

  1. h2 {
  2.   font-style: italic;
  3. }
  4. .style,
  5. h2 {
  6.   background: green;
  7. }

混合（函数）

可以定义函数，并引用，函数本身不会编译到css文件。

不带参数
**

  1. .a(){
  2.   padding-left: 100px;
  3. }
  4. .myclass{
  5.   background : #64d9c0;
  6.   .a;
  7. }
  1. .myclass {
  2.   background: #64d9c0;
  3.   padding-left: 100px;
  4. }
  5. //可以看到没有a输出

带参数

  1. .mixin(@color: black; @fontSize: 10px) {
  2.   color: @color;
  3.   font-size: @fontSize;
  4. }
  5. // 可以带名称
  6. .class1 {
  7.   .mixin(@fontSize: 20px; @color: #F5A9D0);
  8. }
  9. // 可以不带名称
  10. .class2 {
  11.   .mixin(#F79F81; @fontSize: 20px);
  12. }
  1. .class1 {
  2.   color: #F5A9D0;
  3.   font-size: 20px;
  4. }
  5. .class2 {
  6.   color: #F79F81;
  7.   font-size: 20px;
  8. }

循环

  1. // @i起始值
  2. // @n终止值
  3. // @j 每次增加值
  4. .mloop(@i:5,@n:10,@j:5) when (@i <= @n) {
  6.   .mt@{i} {
  7.     margin-top: @i * 1px;
  8.   }
  9.   .mr@{i} {
  10.     margin-right: @i * 1px;
  11.   }
  13.   .mloop((@i + @j), @n, @j); //递归调用
  14. }
  17. .mloop(); //执行
  1. .mt5 {
  2.   margin-top: 5px;
  3. }
  4. .mr5 {
  5.   margin-right: 5px;
  6. }
  7. .mt10 {
  8.   margin-top: 10px;
  9. }
  10. .mr10 {
  11.   margin-right: 10px;
  12. }

父选择器

  1. a {
  2.   color: #5882FA;
  3.   &:hover {
  4.     background-color: #A9F5F2;
  5.   }
  6. }
  1. a {
  2.   color: #5882FA;
  3. }
  4. a:hover {
  5.   background-color: red;
  6. }

参考

简书：一些有用的less总结

这短短的一生我们最终都会失去，不放大胆一点，爱一个人、攀一座山、追一个梦！