在编写css代码时,使用less能提高我们编程得效率。

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

那么如何在webstorm上使用less且能够自动生成更新css代码呢?我记录一下

第一步:安装koala软件

koala这个由国人编写的,用于编译sass、less、coffee利器,在最近的短短几个月曝光率不亚 于任何其他的技术。



网盘链接:https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw

提取码:cnbn

安装:

一直next就好了

第二步:新建一个less文件,写入代码





第三步,打开koala,点击+号,选择less所在文件目录



点击想要转换得less文件,注:右边要勾选autoprefix选项,不然css文件无法与less文件自动同步



如果有css文件夹,less转化时css文件的位置默认在css目录下,没有的话跟less文件同一目录



最后,在HTML代码里导入less转换得css文件,再运行

<link href="css/first.css" rel="stylesheet">

工作到这里就完成了。

webstorm运行less文件的更多相关文章

  1. WEBSTORM中html文件运行之后出现乱码的问题解决

    出现如下问题: 解决方案: 1.点击"文件编码" 2.选择GBK 3.点击Reload. 4.此时,源代码中的中文字体会变成乱码,把这些乱码重新输入成原先的中文.然后运行html文 ...

  2. webstorm添加*.vue文件代码提醒支持webstorm支持es6vue里支持es6写法

    本文转自:http://www.lred.me/2016/01/07/webstorm%E6%B7%BB%E5%8A%A0-vue%E6%96%87%E4%BB%B6%E6%94%AF%E6%8C%8 ...

  3. Mysql运行SQL文件 错误Incorrect table definition;there can be only one TIMESTAMP column with CURRENT_TIMESTAMP in DEFAULT or ON UPDATE clause

    问题描述 想从服务器上DOWN下数据库.操作:先把数据库转存为SQL文件,然后在本地利用navicate运行SQL文件,出现错误信息: Incorrect table definition;there ...

  4. 如何使用命令行编译以及运行java文件

    要想编译和运行java文件,很简单,只需要两个命令: (1) javac:作用:编译java文件:使用方法: javac Hello.java ,如果不出错的话,在与Hello.java 同一目录下会 ...

  5. 【java】 linux下利用nohup后台运行jar文件包程序

    Linux 运行jar包命令如下: 方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 ...

  6. 如何在Sublime text中运行PHP文件

    如何在Sublime text中运行PHP文件 2014-06-14 17:17 3709人阅读 评论(1) 收藏 举报 phpSublime Text 一.将PHP安装目录放如环境变量PATH 二. ...

  7. cmd下运行java文件时,找不到或无法加载主类的解决方法

    最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:

  8. Linux下面如何运行.sh文件

    Linux下面如何运行.sh文件   本文介绍Linux下面用命令如何运行.sh文件的方法,有两种方法: 一.直接./加上文件名.sh,如运行hello.sh为./hello.sh[hello.sh必 ...

  9. 【ant项目构建学习点滴】--(3)打包及运行jar文件

    <?xml version="1.0" encoding="UTF-8"?> <project default="compile&q ...

随机推荐

  1. 3.3 CCSprite 精灵详解

    3.3.1 创建精灵常用的 4 种方式 (当然还有其他方式,只不过 这四种比较常用) //创建精灵常用的 4 种方式 CCSprite* spr1 = CCSprite::create(const c ...

  2. 【leetcode刷题笔记】LRU Cache

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  3. 洛谷 P1187 3D模型

    题目描述 一座城市建立在规则的n×m网格上,并且网格均由1×1正方形构成.在每个网格上都可以有一个建筑,建筑由若干个1×1×1的立方体搭建而成(也就是所有建筑的底部都在同一平面上的).几个典型的城市模 ...

  4. unity渲染层级关系小结

    http://blog.csdn.net/meegomeego/article/details/42060389 最近连续遇到了几个绘制图像之间相互遮挡关系不正确的问题,网上查找的信息比较凌乱,所以这 ...

  5. chrome中的content script脚本文件

    打开chrome的devtools工具,sources下有一个Content script: 1 chrome插件开发过程中难免会遇到使用content script来操作页面的dom,在chrome ...

  6. poj 2390 Bank Interest(计算本利和)

    一.Description Farmer John made a profit last year! He would like to invest it well but wonders how m ...

  7. 关于 vs 2012 键盘无法输入的问题

    使用vs2012 新建了一个类文件之后,vs2012的编辑界面突然出现奇怪的问题,键盘无法输入! 最后调查的结果是由于resharper插件导致的. 可以将插件禁用然后启用. 也可以删除resharp ...

  8. uboot和内核分区的修改

    随着内核的更新,内核越来越大,uboot给nand的kernel分区默认是2M的 device nand0 <nandflash0>, # parts = 4  #: name       ...

  9. JVM类加载(3)—初始化

    3.初始化 在准备阶段,变量已经赋过一次系统要求的初始值,而在初始化阶段,则根据程序员通过程序制定的主观计划去初始化类变量(静态变量)和其他资源,或者从另外一个角度表达:初始化过程是执行类构造器< ...

  10. 问题:MSChart.exe;结果:微软图表控件MsChart使用方法及各种插件下载地址

    微软图表控件MsChart使用方法及各种插件下载地址 (2012-08-10 17:32:33) 转载▼ 标签: 图表 控件 下载地址 kernel32 微软 it 分类: C# 昨天在网上看到了微软 ...