less 初试

第一次接触less，做些记录。

官网     民间中文文档      less notepad++插件

1. 支持变量声明 支持颜色、大小等相加

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

编译出来的css是这样

#header {
  color: #6c94be;
}

变量还可以用在选择器中

// 变量
@mySelector: banner;

// 用法
[email protected]{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

编译后

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

也可以用在url中，比如图像的url

2. 支持嵌套

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

用less这样写：

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

3. 支持混合引用

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}

bordered可以被引用
.是一个复合的样式，@是一个单一的属性值？？

4. 提供了一些便捷函数
百分比、饱和度、色相、亮度处理等

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

5. 支持命名空间
在引用的时候要加上命名空间的名字(是一个>符号)

#bundle {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white
    }
  }
  .tab { ... }
  .citation { ... }
}

#header a {
  color: orange;
  #bundle > .button;
}

6. 作用域问题 有点类似js的闭包 以寻找到最近的(以大括号嵌套划分)变量声明为准
而且变量声明不强制要求前向声明

7. 支持导入css和less文件

@import