LESS

#笔记 CSS

1. 编译方法

1. Koala 编译软件；
2. Node.js；
3. 浏览器端编译；

编写、维护都在 LESS 文件中，由编译后的 CSS 供浏览器识别。

2. 语法

2.1. 注释

/* 这一注释将被编译 */
// 这一注释将不会别编译

2.2. 混合

<div class="box border"></div>

可写作

.border{
  // ...
}
.box{
  // ...
  .border {};
}

2.3. 变量

2.3.1. 以 @ 声明变量

@text_width: 300px;

2.3.2. 传入参数并调用

• 传入：

.border(@border_width) {
  border: solid yellow @border_width;
}

• 调用：

.border(3px); 

2.3.3. 设置默认值

.border(@border_width: 5px) {
  border: solid yellow @border_width;
}

• 即默认为 5px，以 .border() 即为默认值；
• 传入其它参数则以该参数为准；

2.4. 运算

• 数值可运算：一般只要一项有单位即可；
• 色值亦可运算：HEX 转为 RGB 再加减，但少用；

2.5. 嵌套

ul {
  // ul的样式
  li {
    // li的样式
  }
  a {
    // a 的样式
    // 尽管 a 是 li 的子级，但建议写在与 li 同级，可增加加载速度；
    &:hover {
      // a:hover 的样式
      // & 代表其父级选择器；
    }
  }
}

2.6. 匹配模式

• 三角形实例：

.triangle(top, @width: 10px, @colour: gray) {
  border-width: @width;
  border-color: transparent transparent @colour transparent;
  border-style: dashed dashed solid dashed;
}
.triangle(bottom, @width: 10px, @colour: gray) {
  border-width: @width;
  border-color: @colour transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}
.triangle(left, @width: 10px, @colour: gray) {
  border-width: @width;
  border-color: transparent @colour transparent transparent;
  border-style: dashed solid dashed dashed;
}
.triangle(right, @width: 10px, @colour: gray) {
  border-width: @width;
  border-color: transparent transparent transparent @colour;
  border-style: dashed dashed dashed solid;
}
.triangle(@_, @width: 10px, @colour: gray) { 
  // @_ 表全局引用的因子，无论参数传入成功与否均会实现；
  width: 0;
  height: 0;
  overflow: hidden;
}

• 调用：

.sanjiao {
  .triangle(top);
}
// 或者——
.sanjiao {
  .triangle(top, 100px);
}

2.7. 引入

• 导入 LESS 文件：

@import "nameOfLess"; 

• 导入 CSS 文件：

@import (less) "nameOfCss.css";

2.8. 其它

2.8.1. 避免编译

~'内容'

以上内容不被编译，直接原封不动进入 CSS 中，可应用与 filter 及 calc（需让浏览器自己计算而非 CSS）等语句。

2.8.2. !important 关键字

• 表该样式优先级最高，一般用于调试用：

div {
  .border() {} !important;
}

2.8.3. 三角形 CSS3 写法

.triangle {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 10px;
  border-color: transparent transparent blue transparent;
  border-style: dashed dashed solid dashed;
  /*dashed is for IE*/
}

2.8.4. 清除浮动

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}

在 LESS 中的写法：

.clearfix {   
  zoom: 1;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}