美文网首页
less在webstorm中的配置

less在webstorm中的配置

作者: 王童孟 | 来源:发表于2018-06-22 09:21 被阅读0次

css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等

Less是一种动态样式语言,属于css预处理语言的一种。它使用类似CSS的语法为CSS的赋予了动态的特性,如变量、继承、运算、函数等,更方便css的编写和维护实现css模块化。less 可以在多种语言,环境中使用,包括浏览器端、桌面客户端、服务端。

相比Sass而言,Less要简单易上手一些,但是编程性较Sass而言,略有不足。

1. 语法

语法主要包括以下方面,示例直接看文档即可less中文文档
变量、混用(直接混用、带参数混用、@arguments 变量)、模式匹配和导引表达式、嵌套规则、运算、Color 函数、Math 函数、命名空间、作用域、注释、Importing、字符串插值、避免编译、JavaScript 表达式、避免编译

2. 在webstorm中的配置(windows下,git bash)

命令行 npm install -g less , 安装完成后记下lessc路径


1.png

打开webstorm的file watchers, file->settings->Tools->file watchers
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择less,按照下图进行配置:


2.png
确定应用即可。这样我们创建less文件会自动生成css文件,修改less,css也会自动更新。
3.png

3. 参考链接

相关文章

  • less在webstorm中的配置

    css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和...

  • 二、less在webstorm中的配置

    第一步 命令行输入:npm install -g less安装成功后,记住less所在目录 第二步 进入 file...

  • less入门

    webstorm 与 less 环境配置 配置完成后可自动生成 css 注释 / 与 // 变量 变量定义:@变...

  • Webstorm2017中安装Less编译插件

    Webstorm2017中安装Less编译插件 “LESS CSS Compiler”JetBrains公司官方提...

  • 如何用webstorm创建Angular项目

    下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。 在webstorm下配置nod...

  • 如何用webstorm创建React项目

    下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了。 1:在webstorm下配置n...

  • vue小技巧

    vue-router的异步组件 webstorm的less适应 webstorm的js自动匹对

  • 在sublime中配置less

    编译less,大概有3种方法,分别是在Koala,node.js,浏览器中使用。这里我说一下怎么在sublimeT...

  • 在react中配置less

    1. 创建React 工程 2.添加less和less-loader 两个依赖库 注意: 如果步骤3 在步骤2前先...

  • 在react中配置less

    第一步:暴露出webpack配置文件 终端命令:npm run eject (此命令一旦运行不可逆) 第二步:安装...

网友评论

      本文标题:less在webstorm中的配置

      本文链接:https://www.haomeiwen.com/subject/qrghyftx.html