less是css的预处理语言,它拓展了css功能,使我们在编写样式时更加方便,通常和rem配合使用,下面看一下它的基本使用:
1.安装.
首先需要安装nodejs,这里可以自行百度,不再赘述.
然后通过npm install -g less命令安装less,我在mac上安装时遇到报错Error: EACCES: permission denied, access '/usr/local/lib/node_modules',查了查是由于没有权限造成的,在前面加上sudo然后输入密码即可: sudo npm install -g less.
安装成功通过 lessc -v查看版本.
2.Easy LESS的安装.
在vscode上可以安装插件Easy LESS,可以帮我们自动编译less文件为css.
新建一个study文件夹,在里面新建index.html,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>less</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <nav> less </nav> </body> </html>然后新建styleLess.less文件,在里面编写我们的less代码:
@height100: 100px; @font50: 50px; @gray: #ccc; nav { width: 100%; height: @height100; background-color: @gray; text-align: center; line-height: @height100; font-size: @font50; }当我们安装了Easy LESS后,Command+s保存less文件时会自动为我们编译出相同名称的css文件:
nav { width: 100%; height: 100px; background-color: #ccc; text-align: center; line-height: 100px; font-size: 50px; }这时只要在html中引入styleLess.css即可:
<link rel="stylesheet" href="styleLess.css">效果如下:
3.变量.
通过上面的小案例,可以看到在less中,我们可以使用变量来定义一些经常使用的值,变量的定义需要使用符号@,名称中不能含有特殊字符,也不能使用数字开头,上面的:
@height100: 100px; @font50: 50px; @gray: #ccc;都是变量的定义,使用的时候直接输入@+变量名即可.
4.嵌套.
(1).后代选择器.
less中的子类选择器可以通过嵌套的方式来写,比如在nav标签中加一个span标签,把它的字体颜色改为红色:
<nav> less <span> ls</span> </nav>less:
@height100: 100px; @font50: 50px; @gray: #ccc; nav { width: 100%; height: @height100; background-color: @gray; text-align: center; line-height: @height100; font-size: @font50; span { color: red; } }可以看到编译成css时,嵌套的代码会自动转为后代选择器:
nav { width: 100%; height: 100px; background-color: #ccc; text-align: center; line-height: 100px; font-size: 50px; } nav span { color: red; }(2).伪类|伪元素|交集选择器
写这几个样式时,在嵌套的时候要在选择器前面添加&符号,这样编译时会把他们加到本身选择器的后面,我们改一下代码:
<body> <nav> less <span> ls</span> </nav> <nav class="green"> less <span> ls</span> </nav> </body>实现下面几个样式:
把nav.green字体设置为green.
当hover nav标签时,nav字体颜色改为pink.
为nav添加伪元素before,内容为233.
less代码如下:
@height100: 100px; @font50: 50px; @gray: #ccc; nav { width: 100%; height: @height100; background-color: @gray; text-align: center; line-height: @height100; font-size: @font50; span { color: red; } &.green { color: green; } &:hover { color: pink; } &::before { content: '233'; } }这样在前面添加&符号时,编译时会自动生成以上3种选择器:
nav { width: 100%; height: 100px; background-color: #ccc; text-align: center; line-height: 100px; font-size: 50px; } nav span { color: red; } nav.green { color: green; } nav:hover { color: pink; } nav::before { content: '233'; }效果如下:
hover:
5.计算.
在less中,我们可以直接进行加减乘除的计算,比如我们把上面nav中的字体大小放大指定的倍数:
@height100: 100px; @font50: 50px; @gray: #ccc; @scale: 2; nav { width: 100%; height: @height100; background-color: @gray; text-align: center; line-height: @height100; font-size: @font50 * @scale; span { color: red; } &.green { color: green; } &:hover { color: pink; } &::before { content: '233'; } }首先声明变量@scale,然后设置nav中的font-size在原有的基础上乘以@scale,生成的css如下:
nav { width: 100%; height: 100px; background-color: #ccc; text-align: center; line-height: 100px; font-size: 100px; } nav span { color: red; } nav.green { color: green; } nav:hover { color: pink; } nav::before { content: '233'; }这里需要注意的是:
+-*/符号两边要留空格.
如果两个操作数有单位,会以前面的单位为准.
以上是less的基本使用方法,更详细的使用方法可以参考官方文档:
https://less.bootcss.com/
