Less学习笔记

Less

Less中文网

LESS CSS 框架简介

---

Less语法

引入：变量、嵌套、继承、运算、混合、匹配模式

用法

客户端

我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org 下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。

服务器端

node nmp安装less,在node环境中对less源文件进行编译

@import “variables.less”;

使用编译生成的静态 CSS 文件

我们可以通过 LESS 的编译器，将 LESS 文件编译成为 CSS 文件，在 HTML 文章中引入使用。这里要强调的一点，LESS 是完全兼容 CSS 语法的，也就是说，我们可以将标准的 CSS 文件直接改成 .less 格式，LESS 编译器可以完全识别。

koala

koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译，帮助 web 开发者更高效地使用 less 、 sass 、 coffeescript 开发。
项目地址： http://koala-app.com/index-zh.html

Koala 特性：

多语言支持 ：支持 less 、 sass 、 coffeescript 和 compass framework 。
实时编译： 监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。
编译选项： 支持自定义编译选项。
代码压缩： less

注意：网站不要直接引用less 因为浏览器光是用less.js解析less文件就很耗性能一般都是依靠nodejs或者其他编译器把less转换成本地css再去引用该css

优劣势

优势：

1. 代码量少，可读性强，模块化，加快工作效率,
2. 变量和运算，实用工具

劣势：

1. less的层级嵌套设计，层次嵌套太长降低可读性，对性能影响
2. 麻烦，预先编译，比sass好在可以通过引入.js测试,但开发中如果客户端引入less.js明显会导致网页变慢。

笔记

继承 .extent

less笔记-继承

.parentClass{ 

      color:red; 

  } 

  .subClassOne{ 

      &:extend(.parentClass); 

  } 

  .subClassTwo:extend(.parentClass){ 

  }

编译效果：

 

  .parentClass, 

  .subClassOne, 

  .subClassTwo { 

    color: red; 

  } 

关键字extend里面的选择器必须与已定义的样式选择器严格一致，如div .a{}样式只能通过extend（div .a）继承，而不能是extend（.a），尽管这两者在CSS中并没太多区别。