LESS 的介绍

学习网站：快速入门 | Less.js 中文文档
LESS « 一种动态样式语言

image.png
image.png

Less的安装

参考链接：http://less.bootcss.com/#using-less

image.png
image.png

  1. //全局安装 less
  2. cnpm install -g less

image.png

  1. //查看 less 命令是否可用--查看所有的命令
  2. less --help
  3. //之后退出
  4. q

image.png

image.png
image.png
image.png

Less的应用

image.png

Example1

在桌面新建一个 test.less 文件并进行编辑

  1. @color: #4D926F;
  3. #header {
  4.   color: @color;
  5. }
  6. h2 {
  7.   color: @color;
  8. }

在命令行中进入该目录下进行编译

image.png

  1. cd Desktop
  2. //这个命令是将 less 文件的源码进行编译，之后输出到命令行中  下图1
  3. lessc test.less
  4. //这个命令是将 less 文件的源码进行编译后在桌面生成一个 ok.css 的文件 下图2 & 3
  5. lessc test.less > ok.css

image.png
image.png
image.png
image.png

Example2

  1. 桌面新建一个 lesstest 的文件夹，将之前下载的 less.min.js 文件复制到该文件夹下

image.png

  1. 将该文件夹拖拽至编辑器 sublime 中，新建一个 index.html 和 index.less 文件

image.png

  1. 编辑文件
  • index.html ```
    Hello Less
  2. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-c1526f7b1bc3dc09.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Hello Less
  2. - index.less

@color: #4D926F;

.test { color: @color; }

  2. 4. 鼠标在 index.html 文件中右键选择 在浏览器中打开
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-dd09632124c42d5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. - 
  8. 需要注意的是这里直接运行的时候并没有任何的效果
  11. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-bfad1a62418a67e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  15. - 而且在控制台也爆出了错误：
  18. > Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.<br />
  19. 跨源请求只支持协议方案：HTTP、数据、Chrome、Chrome扩展、HTTPS、Chrome扩展资源。
  23. - 报错原因：
  26. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-9d2e411b58acaa48.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  31. - 
  32. 修复上面的报错：将桌面的整个 lesstest 文件夹复制到了 xampp 软件的 \htdocs 文件夹下
  35. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-a3e3a59a81491062.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  39. - 之后启动 Apache
  42. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-f55231a60fe835ef.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  46. - 再在浏览器中访问 lesstest 目录这一次成功了，页面中的文字也有了颜色的变化
  49. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-525c10da196260f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  55. ####上面只是非常简单的示例，接下来深入了解<br />#####混合
  57. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-cd6abdcc2898115c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  60. 1. 接下来还是在 sublime 中编辑桌面上的 lesstest 文件夹中的文件，把文件中之前写的代码都给注释掉
  61. - 编辑 index.less 文件

.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }

header {

.rounded-corners; }

footer {

.rounded-corners(10px); } div{ width: 100px; height: 100px; background-color: orange; margin: 20px; }

  2. - 编辑 index.html 文件

Hello Less
  2. 2. 之后这里不再将文件夹放置到 htdocs 文件夹中，这次选择直接在命令行中将 index.less 文件编译成 css 文件

ls lessc index.less > index.css

  2. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-84faa1601439cd4b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. 3. 然后再编辑 index.html

Hello Less
  2. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-282f519654e82fe9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  5. 4. 之后再在浏览器中打开页面
  7. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-4ba9cd5abdaf058e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  10. #####嵌套规则
  12. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-b45c4d4fcbea2465.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  15. 1. 编辑文件，把文件中之前写的代码都给注释掉
  16. - index.less

header {

h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }

  2. - index.html

  2. 2. 之后再在命令行中编译 index.less 文件

lessc index.less > index.css

  2. - 查看 index.css 文件
  4. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-83af685a332a1387.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  7. 3. 刷新浏览器页面
  9. > ![image.png](http://upload-images.jianshu.io/upload_images/9064013-125510cf8ba34d18.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<br />
  10. #####函数 & 运算<br />
  11. ![image.png](http://upload-images.jianshu.io/upload_images/9064013-d7a2ffcc4be269d0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  14. 1. 编辑文件<br />
  15. index.less

@the-border: 1px; @base-color: #111; @red: #842210;

header {

color: @base-color 3; border-left: @the-border; border-right: @the-border 2; }

footer {

color: @base-color + #003300; border-color: desaturate(@red, 10%); } div{ width: 100px; height: 100px; background: orange; margin: 20px; border: 1px solid red; }

  2. - index.html  这里使用第二次的示例代码，将其解注释，将第三次修改的给注释掉

Hello Less
  2. 2. 在控制台中编译 index.less 文件

lessc index.less > index.css

```

  1. 之后再刷新浏览器页面

image.png

监视模式

image.png
image.png

other

image.png
image.png
image.png
image.png

http://www.bootcss.com/p/lesscss/#docs LESS 详细语法