rem布局之less的基本使用

最新推荐文章于 2024-04-13 21:21:47 发布

WLY_Unity_Unreal

最新推荐文章于 2024-04-13 21:21:47 发布

阅读量512

点赞数

分类专栏： web前端文章标签： html css css3

本文链接：https://blog.csdn.net/Wenliuyong/article/details/107083902

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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/

WLY_Unity_Unreal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 np
复制链接

扫一扫