node/npm/less

最新推荐文章于 2022-05-19 07:00:00 发布

weixin_34321977

最新推荐文章于 2022-05-19 07:00:00 发布

阅读量133

点赞数

文章标签：前端 python markdown ViewUI

原文链接：https://my.oschina.net/swmhxhs/blog/1502951

版权

2019独角兽企业重金招聘Python工程师标准>>>

之前一直听说sass和less写样式相当好用.做为一个传统的后台转前端的程序猿.这边其实我不是不关注的.
直到最近,美工们写重复的样式已经写的叫苦连天的时候. 我就想着.替美工们调研一下比较火的css预处理语言.
不学不知道.一学吓一跳.less的语法真心简单好上手.但是作用还挺大.
分享一下上手过程.

1.less简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
可以简单理解为,less是css的一些模板的宏定义.通过编译等方式,可以让这些宏替换等,形成最终的css文件.

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
要运行在浏览器端.可以直接引入你写的 ".less"后缀的文件.然后再引入less.js.帮助你完成解析.如下:

<!--引入你自己编写的style.less-->
  <link rel="stylesheet/less" type="text/css" href="styles.less" />
   <!--引入less.js解析js,即可实现不编译解析less内容.-->
  <script src="less.js" type="text/javascript"></script>

当然,这种方式不推荐使用在生成环境.生成环境最好还是编译成具体的css文件后引入.

2.less的安装

less安装需要依赖nodejs 和 npm.
如果没有nodejs基础,也不用担心.其实并没有用到nodejs做开发.只是使用了node自带npm. npm是一个汇聚各种前端组件模块的公共仓库.类似于java的maven仓库. 从官网下载node的msi或者exe安装程序,傻瓜式的安装即可.

需要注意的是.安装好node后. 需要设置一下全局安装目录.否则npm全局安装的c盘下.. 配置安装目录如下.
在cmd命令行执行即可.

npm config set prefix "D:\node\node-global"<!--配置全局安装目录-->
npm config set cache "D:\node\node-cache"<!--配置缓存目录-->

在系统环境配置环境变量path添加 node.exe 的目录文件夹路径和 D:\node\node-global （npm设置的全局安装的目录文件夹路径）
配置环境变量NODE_PATH 设置为node_modules的文件夹路径 D:\node\node-global\node_modules

然后使用npm安装less
在命令行执行如下命令.把less主程序安装到npm全局

npm install less -g

安装好后就能在 npm的全局安装路径中看到less的应用命令文件.
1240

Paste_Image.png

命令就可以把你写的less文件编译成对应的css文件

lessc styles.less styles.css

3设置webstrom的less 监听

less写的代码一般都是通过 lessc程序进行编译的. 但是感谢现在市场上丰富的ide. 帮我们考虑了那么多.
webstorm就可以直接设置file watch来监听你的文件变化,帮你调命令完成编译.
按如下方法设置

选择file->setting ->tool 选项.
Paste_Image.png

选择tool -> file watchers. 选择右上角的添加按钮添加一个 less的监听
Paste_Image.png

在设置命令的窗口设置 watch监听到文件变化后执行的命令.program设置项.

1240

Paste_Image.png

另外需要注意的是,arguments设置项可以增执行lessc时同时执行的别的指令.比如压缩css的 less-plugin-clean-css
不过需要提前用npm安装less的压缩css插件

npm install -g less-plugin-clean-css

设置好后. 创建一个 test.less的文件.随便写点less代码.就能看到马上会在less文件下挂了一个编译好的css文件.
假如没有编译,请先随便修改一下文件. file watch 必须监听到文件修改才会执行编译.

4 less的基本语法

因为我也是今天刚学.所以这里举例一些基本语法.直接上代码.
主要包含了
变量,变量计算 ; 混合体(方法) ; 嵌套规则(生成层级选择器)
尤其嵌套规则这个要好用了.简直是css开发者的福音. 不说了上代码.
简书的markdown code段十分蛋疼.没法换行. 所以大家凑合看. demo来源自bootcss中文网less专栏

// LESS//变量名 变量值      
@color: #4D926F;             
@width:300px;
#header {
  //引入变量. 编译后会替换  color: @color;
}
h2 {  //我擦 还可以乘!
  color: @color  *  3;
  width: @width  *  2;
}
//混合体 可以理解为函数
//定义了一个混合体 rounded-corners 可以传入一个参数 @radius 默认值 5px.
//编译好后.会把混合体中的部分整个替换. 并且混合体内的变量@radius 全部用传入的值替换
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#header {
  //没传参数. 用的默认值. 回头会把混合体内的代码引入进来.混合体内部的变量全用默认值替换
  .rounded-corners;
}#footer {  //传参数10px. 回头会把混合体内的代码引入进来.混合体内部的变量全用10px值替换
  .rounded-corners(10px);
}
// 嵌套. 会把层级下的内容 展开形成多层级选择器
#header {    
  h1 {

font-size: 26px;

font-weight: bold;

a{
  font-size: 10px;

  .spa{

     color: #ccc;

  }

}
  }
  h2 {
font-size: 13px;

font-weight: bold;
  }  p { font-size: 12px;
a { text-decoration: none;

  :hover { border-width: 1px }

}
  }
}

编译好效果如下.
1240