Less(一) —— 概述和配置安装

顽皮的雪狐七七
598 阅读6分钟

目录

  • Less为什么会出现？
  • Less的环境安装
    • 全局安装Less
      • 离线的安装方式
      • 在线的安装方式
    • 项目依赖的Less
  • Less编译
      1. 新建一个less文件
      1. 编译的几种方式
      • 2.1 GUI编译工具
      • 2.2 node.js
      • 2.3 使用 clean-css 插件
      • 2.4 浏览器端不经编译直接使用(不建议直接在生产环境中使用)
  • Webstorm 中的less的使用
    • 如何让less文件直接编译成css文件
    • 如何在Webstorm中配置less文件的模板
  • Bootstrap中less的定制
    • 了解Bootstrap中less模块机制
    • 如何定制Bootstrap
      • 线下定制
      • 线上定制
  • 现代化项目中Less的使用(之后补充)
    • Gulp
    • Webpack
    • Vue
  • 学习Less的网站

Less为什么会出现？

CSS(层叠样式表)是一门标记性语言，html和css不是编程语言，没有变量，函数，作用域等概念。语法简单，但是看起来非常的繁琐没有逻辑，而且很多样式都大量冗余。

很多后台的人员写出来的css代码，没有规范就非常的凌乱。不方便维护和扩展。

Less、Sass和Stylus是css的预编译语言，是一种编程语言，是后台人员开发出来的，是在css的语法基础之上，引入了变量，Mixin，运算以及函数等功能，降低了维护成本，预编译语言的意思就是其不能直接在浏览器等环境运行，需要提前编译成css才能在浏览器环境运行。这里着重讲解Less语言。

以后缀名为.less的称之为less文件。

Less的环境安装

全局安装Less

如何证明你有没有全局安装less？要安装less首先要安装nodejs

win+R --> cmd --> node -v(如果安装了node就会显示版本号) -->npm -v(检测一下npm是否自带，如果有会显示版本号)

# 如果安装了less也会显示版本号
lessc -v 
# lessc 3.12.2 (Less Compiler) [JavaScript]

离线的安装方式

C： --> 用户/user --> 打开自己的用户 -->AppData（因为它是隐藏文件，所以要先显示隐藏文件）-->Roaming --> npm -->如果已经安装了less就会有两个文件（less和less.cmd）、如果没有东西就把之前提前下载的文件进行复制，如图：

file.png

在线的安装方式

npm install less -g

项目依赖的Less

npm install less -save-dev

Less编译

less是没有办法直接使用在浏览器上面的，只有css才能直接使用到浏览器的上面。所以我们要把less编译成css。

1. 新建一个less文件

先新建一个less文件，保存到桌面

@color:red;
a{
    color:@color;
}

2. 编译的几种方式

2.1 GUI编译工具

初学者建议使用GUI编译工具来编译less文件，下面是推荐的几个编译工具

2.2 node.js

安装了node之后就可以直接用node.js来编译了。 在桌面目录中打开cmd，然后执行命令dir（获取当前目录的所有文件） --> 在当前目录上面写命令

lessc less.less less.css

就可以看到在桌面上同时生成了一个less.css的文件 打开之后里面的内容是：

a{
    color:red;
}

这样就可以在html中引用了。（在编译的过程中，同时会进行检查，如果语法有错就会报错）

2.3 使用 clean-css 插件

安装了这个插件之后，输出的时候就可以转化成压缩过的css

# 安装clean-css插件
npm i -g less-plugin-clean-css
# 编译的时候使用插件
lessc --clean-css styles.less styles.min.css

2.4 浏览器端不经编译直接使用(不建议直接在生产环境中使用)

  • 在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
<!--注意这里rel里面的值是stylesheet/less，不是stylesheet-->

<script src="lesscss-1.4.0.min.js"></script>

特别注意：

这里浏览器使用的是ajax来拉取.less文件，所以如果文件是file://开头和跨域CORS的情况，就无法拉取less文件，还有部分服务器（IIS居多）会对未知的后缀名的文件返回404

解决方案就是为.less文件配置MIME值为text/css，或者直接将.less文件改名为.css文件即可

Webstorm 中的less的使用

如何让less文件直接编译成css文件

每次要修改less，都要修改编译一下less，比较麻烦。所以在webstorm中进行自动化编译。

打开webstorm --> 新建一个less文件夹 --> 新建一个文件File --> 名称是test.less --> 此时在屏幕上会出现一句话

less1.png

这句话的意思是，要不要监听less，让其自动化编译生成css文件，点击Add watcher，会弹出一个对话框：

lesswatch.png

这个对话框中的东西我们只关心画框的部分就可以了，这个地址是我们刚才进行离线安装的地址，如果是空的的话就把地址进行手动的复制。点击ok就可以自动的进行编译了。

在less中写语法之后，可以看到右边的目录中，less文件有一个箭头，点开其目录下自动生成了一个css文件。

那如果没有出现Add watcher那句话，怎么配置？

文件 --> 设置 --> 工具 --> File Watchers --> 点击最右边拦的 "+" 号 --> 有一个less --> 也会弹出刚才的对话框 --> 配置完点击确定就可以了。

如何在Webstorm中配置less文件的模板

在文件夹中新建 --> 新建 --> 编辑文件模板 --> 点击上面的 "+" 号 --> 名称 less file / 扩展（后缀名） less --> 内容写 @charset "utf-8"; --> 确定

这样就在新建的文件中配置好了less的文件。

Bootstrap中less的定制

了解Bootstrap中less模块机制

  • 在Bootstrap的less文件夹中有一个总文件是bootstrap.less
    • 里面有导入的变量、函数、基础样式（初始化文件、图标）、核心样式、组件、javascript组件等
  • 在函数mixins.less中引用了很多的模块的函数
    • 里面有弹出框、有按钮、有面板等很多的模块

如何定制Bootstrap

线下定制

找到bootstrap的源码 --> less文件夹 --> 修改源码 --> bootstrap.less

比如： Bootstrap默认的栅格系统有12列，间距15px，如果需要改的时候，修改变量Grid system中的
@grid-columns 12改成18
@grid-gutter-width 15px改成12px

类似于这样修改完毕之后进行编译，shift+鼠标右键 --> 此处打开命令窗口 --> lessc bootstrap.less bootstrap.css --> 回车

线上定制

定制并下载 --> 不要哪个就把勾去掉 --> 修改哪个就修改 --> 点击编译并下载

现代化项目中Less的使用(之后补充)

Gulp

使用gulp-less

Webpack

使用less-loader

Vue

vue-cli中选项选择支持less

学习Less的网站

avatar
文章
阅读
粉丝