在编写css代码时,使用less能提高我们编程得效率。
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
那么如何在webstorm上使用less且能够自动生成更新css代码呢?我记录一下
第一步:安装koala软件
koala这个由国人编写的,用于编译sass、less、coffee利器,在最近的短短几个月曝光率不亚 于任何其他的技术。
webstorm运行less文件
网盘链接:https://pan.baidu.com/s/1kEzI7DtO1JbK4JEdD2RYdw
提取码:cnbn
安装:

一直next就好了
第二步:新建一个less文件,写入代码
webstorm运行less文件
webstorm运行less文件
webstorm运行less文件

第三步,打开koala,点击+号,选择less所在文件目录
webstorm运行less文件
点击想要转换得less文件,注:右边要勾选autoprefix选项,不然css文件无法与less文件自动同步
webstorm运行less文件
如果有css文件夹,less转化时css文件的位置默认在css目录下,没有的话跟less文件同一目录
webstorm运行less文件
最后,在HTML代码里导入less转换得css文件,再运行

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

工作到这里就完成了。

相关文章:

  • 2021-10-06
  • 2021-12-17
  • 2022-12-23
  • 2022-12-23
  • 2021-08-18
  • 2021-05-07
  • 2021-09-03
  • 2021-05-12
猜你喜欢
  • 2021-07-02
  • 2022-01-13
  • 2022-12-23
  • 2021-12-12
  • 2021-09-23
  • 2021-04-09
  • 2021-09-15
相关资源
相似解决方案