CSS“反转”为LESS
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这个里面同时也介绍了 Css2Sass, Js2Coffee和Html2Haml,相信想用的人必然会对它们爱不释手的。
CSS“反转”为LESS的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 用CSS画小猪佩奇,你就是下一个社会人! js将“I am a coder”反转成 “coder a am I”,不许用split,join,subString,reverse;求解方法三
用CSS画小猪佩奇,你就是下一个社会人! 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯 ...
- javascript 字符串反转 strip_tags 字符串常用的自定义函数,加载css etc.
字符串反转 String.prototype.reverse = function() { var a = this.split(''); for (var i = 0, j = a.length-1 ...
- 支持多浏览器的镜像反转css效果
今天接到一个需求,通过一张图片得到其镜像对称的图片.本来说是后台处理的,但这样除了技术上难实现之外,还带来了资源消耗的问题,相当于每张图都要存储一个副本了. 只记得以前用过css的滤镜可以实现这个,但 ...
- css字符串转换为类map对象及反转
存储对象为啥是类map(即:{key:val,...}格式),因为Map对象的val为字符时,无法存储 '('.')' 左右括号,我也很无奈╮(╯▽╰)╭ 解析脚本: <!DOCTYPE htm ...
- css中常见的属性-----在路上(14)
一.css文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; /*文字大小*/ ...
- 前端知识杂烩(HTML[5]?+CSS篇)
1. CSS 优先级算法如何计算?2.如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?3.用纯CSS创建一个三角形的原理是什么?4. 如何解决inline-block元素的空白间距( ...
- js动态给当前点击元素添加css类
1.页面:
- 使用HTML5里的classList操作CSS类
在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...
随机推荐
- java连接mysql(一)
import java.sql.*; public class MysqlTest { public static void main(String[] args) throws SQLExcepti ...
- Android学习笔记02-Mac下编译java代码
在Mac OS上配置JDK 1.7. 一 下载 Mac版本的JDK1.7 从以下下载地址,下载Mac版本的JDk1.7 安装文件 jdk-7u79-macosx-x64.dmg. http://www ...
- Java中各种(类、方法、属性)访问修饰符与修饰符的说明
类: 访问修饰符 修饰符 class 类名称 extends 父类名称 implement 接口名称 (访问修饰符与修饰符的位置可以互换) 访问修饰符 名称 说明 备注 public 可以被本项目的所 ...
- 初学Hibernate持久化
hibernate三种持久化对象状态:(持久化对象:Persistent Object=POJO + hbm映射) 1.瞬时状态(临时状态或自由态):PO对象刚创建(即new)开始进入瞬时状态,此时对 ...
- css3应用之自定义选中文字的背景颜色
在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...
- iphone6 wifi自动断开 tplink
这样设置就好了,不会自动断开 了
- Yii2事件
namespace app\components; use yii\base\Component; use yii\base\Event; class MessageEvent extends Eve ...
- Android手机 Fildder真机抓包
Fiddler是一个http调试代理,它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddle 所有的“进出”的数据(指co ...
- fp = fopen(s, "at") 中at 是啥意思,a 是append 追加的意思
打开一个s的stream, a表示append,就是说写入处理的时候是接着原来文件已有内容写入,不是从头写入覆盖掉, t表示打开文件的类型是文本文件, "+号表示对文件既可以读也可以写.&q ...
- jQuery特效
基础特效 方法 描述 hide() 立即隐藏jQuery对象内的所有元素 hide(time).hide(time, easing) 在指定的时间内以动画方式隐藏jQuery对象内的所有元素,并可选一 ...