• 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]
    uby,然后在Path变量值最后追加;%RUBY_HOME%in,保存即可。

    键入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,相信想用的人必然会对它们爱不释手的。

  • 相关阅读:
    具体解释协方差与协方差矩阵
    百度地图SDK for Android v2.1.3全新发布
    奇妙的等式
    Canny边缘检测及C++实现
    移动火柴问题
    移动火柴问题
    奇妙的等式 && 精妙的证明(二)
    奇妙的等式 && 精妙的证明(二)
    拉马努金恒等式
    拉马努金恒等式
  • 原文地址:https://www.cnblogs.com/jinguangguo/p/4056150.html
Copyright © 2020-2023  润新知