LESS(官网在此:http://lesscss.net/)的魅力相信大家都已明了,个人认为它最大的魅力在于能够清晰的展现嵌套关系。

针对现有的项目,它的应用难点主要在于——

  • 何时转换为css,即是否利于开发调试、是否利于一键部署
  • 现有项目是基于css的,如何很好的将css转换成less,进而以后维护less即可

第一个问题,我们借助winLess这样的转换工具即可(http://winless.org/),当然这样的工具还有其他很多(如koala,它还支持compass、coffeescript、sass的转换,官网在此koala),大家自己挑选喜欢的即可。

这里主要来解决第二个问题,我们知道了less的优势,想要完美的将css转换为less,达到过渡使用less进行编码的效果。

css2less使用

先来尝尝鲜,访问线上css2less转换工具网址:http://css2less.cc/——

下面,我们来搭建本地环境(等同于远程linux的css2less环境的搭建)的css2less。由于这个库是基于ruby去做的,因此,我们先安装ruby。其下载地址:https://www.ruby-lang.org/en/downloads/,安装完之后,配置环境变量

我的电脑->属性->高级->环境变量,新建RUBY_HOME,值为D:[Ruby Root]\ruby,然后在Path变量值最后追加;%RUBY_HOME%\bin,保存即可。

键入ruby -v,呈现——

键入gem -v,呈现——

Gem是一个管理Ruby库和程序的标准包,它通过Ruby Gem(如http://rubygems.org/)源来查找、安装、升级和卸载软件包,非常的便捷。 Ruby1.9.2版本默认已安装Ruby Gem,如果你使用其它发行版本,请参考“如何安装RubyGem

接下来,便是安装css2less了,运行——gem install css2less

所有的gem包,会被安装到/[Ruby root]/lib/ruby/gems/[ver]/目录下,这其中包括了Cache、doc、gems、specifications 4个目录,cache下放置下载的原生gem包,gems下则放置的是解压过的gem包。

OK,我们安装完了css2less了,马上就可以用它了。它的命令模板——

css2less src_file.css > desc_file.less

看到的效果——

总结

介绍完毕css2less的使用了,可惜的一点,它并不支持批量转换(和图片压缩工具jpegtran一样,仅仅支持单文件的处理)。

最后,链入css2less的github地址——https://github.com/thomaspierson/libcss2less

https://github.com/nicooprat/Css2Less这个里面同时也介绍了 Css2SassJs2CoffeeHtml2Haml,相信想用的人必然会对它们爱不释手的。

CSS“反转”为LESS的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. 用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三

    用CSS画小猪佩奇,你就是下一个社会人!   欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...

  3. javascript 字符串反转 strip_tags 字符串常用的自定义函数,加载css etc.

    字符串反转 String.prototype.reverse = function() { var a = this.split(''); for (var i = 0, j = a.length-1 ...

  4. 支持多浏览器的镜像反转css效果

    今天接到一个需求,通过一张图片得到其镜像对称的图片.本来说是后台处理的,但这样除了技术上难实现之外,还带来了资源消耗的问题,相当于每张图都要存储一个副本了. 只记得以前用过css的滤镜可以实现这个,但 ...

  5. css字符串转换为类map对象及反转

    存储对象为啥是类map(即:{key:val,...}格式),因为Map对象的val为字符时,无法存储 '('.')' 左右括号,我也很无奈╮(╯▽╰)╭ 解析脚本: <!DOCTYPE htm ...

  6. css中常见的属性-----在路上(14)

    一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...

  7. 前端知识杂烩(HTML[5]?+CSS篇)

    1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...

  8. js动态给当前点击元素添加css类

    1.页面:

  9. 使用HTML5里的classList操作CSS类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

随机推荐

  1. TCP/IP详解 学习四

    ARP地址解析协议 当一台主机把以太网数据帧发送到位于同一局域网上的另一台主机时,是根据 48 bit的以太网地址来确定目的接口的.设备驱动程序从不检查 I P数据报中的目的 I P地址. ARP的分 ...

  2. 大理石在哪?(Where is the Marble?,UVa 10474)

    参考:ACM紫书 第五章 P108 [排序与检索] 下面的代码中有些 提示性输出,想Ac 需删除提示性输出语句,读者自行修改. #include <cstdio> #include < ...

  3. Lua函数之一

    LUA函数之一 函数声明: function foo(arguments) statements end 1.函数调用 调用函数的时候,如果参数列表为空,必须使用()表明是函数调用,例如: os.da ...

  4. Starting zabbix_agentd: No such file or directory

    问题描述 [root@localhost admin]# service zabbix_agentd restart Shutting down zabbix_agentd: [FAILED] Sta ...

  5. logback 项目应用

    1.gradle引用: compile group: 'commons-logging', name: 'commons-logging', version: '1.1.3' compile grou ...

  6. 第三方平台正式支持接入微信公众平台JS-SDK

    之前微信公众平台面向开发者开放微信内网页开发工具包,现在第三方平台也能正式支持接入微信公众平台JS-SDK了,第三方平台可以在获得公众号的授权后,通过JS-SDK帮助公众号开发和实现网页业务. 公众号 ...

  7. PHP连接MySQL报错:SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket 'MySQL' (2)

    如下所示,PHP连接MySQL报错: SQLSTATE[HY000] [2002] Can't connect to local MySQL server through socket 'MySQL' ...

  8. [BZOJ3872][Poi2014]Ant colony

    [BZOJ3872][Poi2014]Ant colony 试题描述 There is an entrance to the ant hill in every chamber with only o ...

  9. phpcms某处储存型XSS(demo+本地演示)

    文章转载:http://www.myhack58.com/Article/html/3/7/2016/71726.htm 详细说明: demo+本地演示存在xss漏洞的地方在商务中心的商家资料的我的资 ...

  10. DCMTK3.6.0 (MT支持库)安装 完整说明

    环境WIN7 + VisualStudio2010 + dcmtk3.6.0 + Cmake2.8.6 准备工作: 从dcmtk官方网站下载源代码及支持库文件.分别名为:dcmtk-3.6.0 dcm ...