webstorm运行less文件
在编写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文件的更多相关文章
- WEBSTORM中html文件运行之后出现乱码的问题解决
出现如下问题: 解决方案: 1.点击"文件编码" 2.选择GBK 3.点击Reload. 4.此时,源代码中的中文字体会变成乱码,把这些乱码重新输入成原先的中文.然后运行html文 ...
- 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 ...
- 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 ...
- 如何使用命令行编译以及运行java文件
要想编译和运行java文件,很简单,只需要两个命令: (1) javac:作用:编译java文件:使用方法: javac Hello.java ,如果不出错的话,在与Hello.java 同一目录下会 ...
- 【java】 linux下利用nohup后台运行jar文件包程序
Linux 运行jar包命令如下: 方式一: java -jar XXX.jar 特点:当前ssh窗口被锁定,可按CTRL + C打断程序运行,或直接关闭窗口,程序退出 那如何让窗口不锁定? 方式二 ...
- 如何在Sublime text中运行PHP文件
如何在Sublime text中运行PHP文件 2014-06-14 17:17 3709人阅读 评论(1) 收藏 举报 phpSublime Text 一.将PHP安装目录放如环境变量PATH 二. ...
- cmd下运行java文件时,找不到或无法加载主类的解决方法
最近再看java,却被一个看似很基础的hellorworld头疼了十几分钟,百度了一下,若你在cmd下编辑及运行.java文件时报错,解决方案如下,如图所示:
- Linux下面如何运行.sh文件
Linux下面如何运行.sh文件 本文介绍Linux下面用命令如何运行.sh文件的方法,有两种方法: 一.直接./加上文件名.sh,如运行hello.sh为./hello.sh[hello.sh必 ...
- 【ant项目构建学习点滴】--(3)打包及运行jar文件
<?xml version="1.0" encoding="UTF-8"?> <project default="compile&q ...
随机推荐
- $.ajax()方法详解(转)
以下内容转自:http://www.cnblogs.com/tylerdonet/p/3520862.html 尊重原创,请访问原创文章 jquery中的ajax方法参数总是记不住,这里记录一下. ...
- codeforces 631A A. Interview
A. Interview time limit per test 1 second memory limit per test 256 megabytes input standard input o ...
- Android学习路线01
part1:Java 1.Java基础 2.Java面向对象 3.数组与集合,异常,常用类 4.Io流 5.多线程socket编程 6.数据库,网络传输,数据解析 part2:Android 1.An ...
- OpenCV-Python 霍夫直线检测-HoughLinesP函数参数
cv2.HoughLines()函数是在二值图像中查找直线,cv2.HoughLinesP()函数可以查找直线段. cv2.HoughLinesP()函数原型: HoughLinesP(image, ...
- AngularJS方法 —— angular.copy
描述: 复制一个对象或者一个数组(好吧,万物皆对象,数组也是一个对象). 如果省略了destination,一个新的对象或数组将会被创建出来: 如果提供了destination,则source对象中的 ...
- BZOJ3039:玉蟾宫
浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php?id ...
- Linux不停往外发包
一台Linux这两天不停往外发包,造成外部无法访问. [root@ct-nat ~]# watch ifconfig-------------查看数据包新增情况 Every 2.0s: ifconfi ...
- 文件异步上传,多文件上传插件uploadify
本文中使用java作为例子 uploadify下载 http://files.cnblogs.com/chyg/uploadify.zip jsp页面中需要引入: <script type=&q ...
- Spring boot 学习一:认识Spring boot
什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...
- 【jQuery】jquery.metadata.js验证失效
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...