介绍编译的less的两种IDE工具

现在css预编译越来越普及了,著名的有less、sass、stylus等等等等。功能上基本上都是大同小异。这些个玩意儿主要表达的意思就是:“像编程一样的编写你的css”。

我在群里面看到好多的网友都是用koala这个工具编译less,这个工具我也用过,但是我觉得他很麻烦。

下面我介绍两个IDE工具,它们都能解析less,关键是不用那么麻烦,废话不多说,下面开始介绍:

第一种:webstorm (强大前端开发IDE)

我在前面的博文介绍过webstorm 安装less解析成css的文章。

点击这里:webstorm9.3 安装less 编译css教程

本文就不在介绍了。

第二种:HBuilder  (自带less编译插件)

今天主要介绍这款工具的,

首先,你得下载这个工具,下载地址:http://www.dcloud.io/

下载完成后,打开软件。

选择,“工具” -> “插件安装”

找到“less sass编译插件”,如果默认没有安装 ,就点击安装,安装过的直接使用就可以了,安装都免了

好了,到这里基本上安装这一步就完成了,下面介绍如何使用HBulider编译less?

首先新建项目web项目。

文件 -> 新建 -> web项目

新建完成如下:

在css文件夹下面新建style.less文件

“ctrl + s”保存,会在同级文件下面生成style.css文件

打开style.css文件,如下:

好了,搞定了,直接引用解析的css就可以了

gif操作展示:

本教程到这里就结束了。so easy 吧(*^__^*)

介绍编译的less的两种IDE工具的更多相关文章

  1. 介绍编译的less的几种IDE工具

    介绍编译的less的两种IDE工具 现在css预编译越来越普及了,著名的有less.sass.stylus等等等等.功能上基本上都是大同小异.这些个玩意儿主要表达的意思就是:“像编程一样的编写你的cs ...

  2. JIT(Just in time,即时编译,边运行边编译)、AOT(Ahead Of Time,运行前编译),是两种程序的编译方式

    JIT(Just in time,即时编译,边运行边编译).AOT(Ahead Of Time,运行前编译),是两种程序的编译方式

  3. sitecore中的两种编辑工具介绍

    在Sitecore中,有两种编辑工具,您可以在其中创建和编辑网站上的内容: 内容编辑器 - 专为熟悉Sitecore及其包含的功能的经验丰富的内容作者而设计的应用程序. 体验编辑器 - 一种直观的编辑 ...

  4. Cognos两种建模工具对于复杂日期维度的处理比较(下)

    本文继Cognos两种建模工具对于复杂日期维度的处理比较(上)之后将介绍一下Cognos中建模工具Transform对复杂日期维度的处理. 二:Transform建模对于复杂日期维度的处理 为了书写效 ...

  5. JSON语言规范与Java中两种解析工具基本使用

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6652250.html  一:JSON语言规范 一言以蔽之:“一个 :一个键值对,一个{}一个对象,一个[]一个 ...

  6. Metasploit和python两种安全工具的学习笔记

    Metasploit是个好东西 主要参考了<Metasploit渗透测试魔鬼训练营>这本书. 一.先用自己的靶机感受一下该工具的强大 linux靶机的ip如图 按照书上写的配置,如图 然后 ...

  7. Cognos两种建模工具对于复杂日期维度的处理比较(上)

    众所周知,在数据仓库中,日期维度是相当重要的.对数据分析的过程中可以从不同的角度去分析,比如按照下面的日期层次去分析数据. 年-季度-月-日 年-月-日 年-周-日 本示例将利用简单的商品销售分析的d ...

  8. 在linux环境下编译运行OpenCV程序的两种方法

    原来以为在Ubuntu下安装好了OpenCV之后,自己写个简单的程序应该很容易吧,但是呢,就是为了编译一个简单的显示图片的程序我都快被弄崩溃了. 在谷歌和上StackOverFlow查看相关问题解答之 ...

  9. 跨平台C++开源代码的两种常用编译方式

    作者:朱金灿 来源:http://blog.csdn.net/clever101 跨平台C++开源代码为适应各种编译器的编译,采用了两种方式方面来适配.一种是makefile方式.以著名的空间数据格式 ...

随机推荐

  1. webForm(三)——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  2. linux c++编译问题和虚拟机网络通信

    1.gcc main.cpp -lstdc++ -o test5 2. service network stop service NetworkManager restart

  3. 【C++】输入多行数字到数组

    前天做某公司笔试题的时候,其输入格式是多行数字,每行以空格为分隔符,以换行符号为结束输入到多个数组.在JAVA中有相应的函数直接将一行拆成数组,感觉在C++中这中输入方式还是挺奇怪的,今天想出一种解决 ...

  4. 开发人员必读openstack网络基础

    云计算中的网络非常复杂,需要对网络的基础理论有一定的认识和了解,转载网上针对openstack中涉及到网络概念的文章 开发人员必读openstack网络基础1:什么是L2.L3 开发人员必读opens ...

  5. 安装 Visual Studio Web Tools 的奇怪问题

    安装Microsoft ASP.NET 5 RC 1 时提示 0x80070005 - 拒绝访问 日志文件为 [1968:3F64][2015-11-20T10:08:36]i010: Launchi ...

  6. 2016.10.30 NOIP模拟赛 day2 AM 整理

    题目+数据:链接:http://pan.baidu.com/s/1gfBg4h1 密码:ho7o 总共得了:130分, 1:100分  2:30分(只会这30分的暴力) 3:0(毫无思路) 虽然不高, ...

  7. ThreadLocal

    package cn.happy.util; import org.hibernate.Session;import org.hibernate.SessionFactory;import org.h ...

  8. JS中的“!!”

    var o={flag:true};  var test=!!o.flag;//等效于var test=o.flag||false;  alert(test); 由于对null与undefined用! ...

  9. 去除多余的cell 和最后一行cell显示顶头底线

    去除多余cell YourTableview.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero]; 最后一行cell底线顶头显示 s ...

  10. eclipse自动提示功能没了的解决办法(转载)

    eclipse自动提示功能没了的解决办法 标签: eclipse联想 2012-08-09 14:32 24687人阅读 评论(7) 收藏 举报  分类: Android(38)  版权声明:本文为博 ...