【前端框架学习笔记】LessCSS(1):基本安装与使用

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

*Less的作者把原生CSS称为“vanilla CSS”。


我认为Less最大的优点就是减少了许多重复的css代码。


专门的编译工具:http://koala-app.com/index-zh.html(可通过该工具自行创建less文件(后缀名为 .less),无需安装node.js。教程:http://blog.csdn.net/u011250873/article/details/45917519)


通过终端安装(for Mac):


安装过node.js后,打开终端,输入以下命令进行下载&安装:

npm install -g less

(如果有安装国内的cnpm的话,可以把npm改为cnpm。下载安装的速度更快。虽然不知道会有什么风险就是了)

安装完毕后,输入以下代码调用less编译器,并输出编译之后的 CSS 代码到名为mystyles的css文件(没有的话就会创建)

lessc styles.less > /项目路径/mystyles.css

(Mac可以直接将项目文件夹拖到终端,终端会显示该文件夹的具体路径)


开始使用(也就是coding部分):


在head标签内依次加入以下2个标签:

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

2. 下载less.js并解压,在dist找到less.js,复制粘贴到项目文件夹下,并在script标签内引入:

<script src="less.js" type="text/javascript"></script>




接着就是根据less的语法正常书写代码了。待续。


--------

Ref:

http://less.bootcss.com/

http://www.imooc.com/video/4825

http://www.imooc.com/video/4827


免责声明://www.greatytc.com/p/cd9793098eea

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前些日子从@张鑫旭微博处得一份推荐(Front-end-tutorial),号称最全的资源教程-前端涉及的所有知识...
    谷子多阅读 4,286评论 0 44
  • 需要记住的实在太多了,书籍、手册、指南上都是需要记忆的,尤其是其中很多对个人而言是相当陌生的时候,记忆能力却很是有...
    五点砍柴阅读 233评论 0 0
  • 为什么需要刻意练习:练习的目的是将动作变得熟练,自信。 例如:我们打篮球、打字、说话。都是需要刻意练习去将我们的动...
    邱凯阅读 414评论 0 0
  • 床上,背靠填充木板,再后是简易窗帘。左臂倚枕,右手持风。窗外有雨,四周漆黑。 许是天气的缘故,近日冲动、易怒。新...
    是春山阅读 236评论 0 0
  • 为了让归档的文件更好地发挥作用,在归档的目录上,应该包括复盘的时间、事件、参与人员、得出的规律等基本信息。如果进一...
    再见彼岸花阅读 141评论 0 0