rem布局之less的基本使用
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的基本使用方法,更详细的使用方法可以参考官方文档: