Mac版Webstrom  less环境的搭建

1.less简介:Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充,Less 可以运行在 Node、浏览器和 Rhino 平台上。这篇文章介绍less运行在浏览器平台上。

2.是否有必要使用less:首先说less是一种提高开发效率的工具,当你界面非常少的时候用不用都影响不大,如果你界面比较多的时候,有公用的组件,样式,这些的时候使用less来整合嵌套css可以节省不少时间。总的来说:不论项目大小都有必要去尝试,毕竟喊的这么火,肯定是有它的好处的。

3.首先安装node环境(因为less需要node环境),在nodejs官网http://nodejs.org/下载对应的node版本安装,安装完成之后终端中运行node -v,npm -v命令分别查看,如果出现版本号,就说明node安装成功,npm是和nodejs一起安装的node官方的包管理工具,npm是一个汇聚各种前端组件模块的公共仓库.类似于java的maven仓库。

4.node安装成功之后输入npm install less -g命令,npm就会自动下载并安装less,安装完成less之后,打开webstrom,开始配置webstrom。

5.打开webstrom,找到Preferences→tools→File Watchers,点击左下角的+号,找到less,less配置如下:


6.配置完成之后,点击OK,再点击Apply,点击OK,完成。现在我们本地搭建好了node环境,可以直接新建demo.less文件,会被自动在当前位置编译成demo.css文件,我们可以在html文件中引入demo.css文件,这样比较合适,现在的less是运行在node环境中,当然了,你也可以直接在html文件中引入demo.less文件,这样html文件中还必须要引入一个less.js,这样less文件通过less.js文件的解析就运行在浏览器环境中了。

7.html直接引入less文件的话需要引入<link rel='stylesheet/less' href='demo.less'>,然后还需要引入<script src='less.js'></script>,less.js可以在less官网下载。

8.建议:less还是用在开发环境中程序员自己撸代码提高效率比较好,生产环境也就是上线的正式代码最好不要直接引用less文件和less.js,less还是更适合开发环境,不太适合生产环境(也就是正式代码),生产环境直接引用less编译好的css文件就可以。

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

推荐阅读更多精彩内容

  • [目录] Less为什么会出现? 学习Less的网站 Less的安装环境离线的安装方式在线的安装方式 less转化...
    顽皮的雪狐七七阅读 15,483评论 5 42
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,213评论 40 247
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,721评论 7 110
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,504评论 1 32
  • 你被什麼保護,就被什麼限制,能為你遮風擋雨的,也同樣能讓你不見天日。 因为无能为力而顺其自然,因为心无所属而随遇而...
    苏妲小姐阅读 149评论 0 0