[关闭]
@EncyKe 2016-11-17T07:44:03.000000Z 字数 2058 阅读 1371

LESS

#笔记 CSS



1. 编译方法

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

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

2. 语法

2.1. 注释

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

2.2. 混合

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

可写作

  1. .border{
  2. // ...
  3. }
  4. .box{
  5. // ...
  6. .border {};
  7. }

2.3. 变量

2.3.1. 以 @ 声明变量

  1. @text_width: 300px;

2.3.2. 传入参数并调用

  1. .border(@border_width) {
  2. border: solid yellow @border_width;
  3. }
  1. .border(3px);

2.3.3. 设置默认值

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

2.4. 运算

2.5. 嵌套

  1. ul {
  2. // ul的样式
  3. li {
  4. // li的样式
  5. }
  6. a {
  7. // a 的样式
  8. // 尽管 a 是 li 的子级,但建议写在与 li 同级,可增加加载速度;
  9. &:hover {
  10. // a:hover 的样式
  11. // & 代表其父级选择器;
  12. }
  13. }
  14. }

2.6. 匹配模式

  1. .triangle(top, @width: 10px, @colour: gray) {
  2. border-width: @width;
  3. border-color: transparent transparent @colour transparent;
  4. border-style: dashed dashed solid dashed;
  5. }
  6. .triangle(bottom, @width: 10px, @colour: gray) {
  7. border-width: @width;
  8. border-color: @colour transparent transparent transparent;
  9. border-style: solid dashed dashed dashed;
  10. }
  11. .triangle(left, @width: 10px, @colour: gray) {
  12. border-width: @width;
  13. border-color: transparent @colour transparent transparent;
  14. border-style: dashed solid dashed dashed;
  15. }
  16. .triangle(right, @width: 10px, @colour: gray) {
  17. border-width: @width;
  18. border-color: transparent transparent transparent @colour;
  19. border-style: dashed dashed dashed solid;
  20. }
  21. .triangle(@_, @width: 10px, @colour: gray) {
  22. // @_ 表全局引用的因子,无论参数传入成功与否均会实现;
  23. width: 0;
  24. height: 0;
  25. overflow: hidden;
  26. }
  1. .sanjiao {
  2. .triangle(top);
  3. }
  4. // 或者——
  5. .sanjiao {
  6. .triangle(top, 100px);
  7. }

2.7. 引入

  1. @import "nameOfLess";
  1. @import (less) "nameOfCss.css";

2.8. 其它

2.8.1. 避免编译

  1. ~'内容'

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

2.8.2. !important 关键字

  1. div {
  2. .border() {} !important;
  3. }

2.8.3. 三角形 CSS3 写法

  1. .triangle {
  2. width: 0;
  3. height: 0;
  4. overflow: hidden;
  5. border-width: 10px;
  6. border-color: transparent transparent blue transparent;
  7. border-style: dashed dashed solid dashed;
  8. /*dashed is for IE*/
  9. }

2.8.4. 清除浮动

  1. .clearfix::after {
  2. content: "";
  3. display: block;
  4. clear: both;
  5. }
  6. .clearfix {
  7. zoom: 1;
  8. }

在 LESS 中的写法:

  1. .clearfix {
  2. zoom: 1;
  3. &::after {
  4. content: "";
  5. display: block;
  6. clear: both;
  7. }
  8. }

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注