less的使用

最新推荐文章于 2024-04-28 21:56:39 发布

天怀

最新推荐文章于 2024-04-28 21:56:39 发布

阅读量346

点赞数

分类专栏：前端学习路线文章标签： less css html

本文链接：https://blog.csdn.net/qq_39165819/article/details/125346870

版权

前端学习路线专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1.less的方便性

less的出现是为了方便css的书写，例如美团，A，B，C字母的圈圈颜色，常规css 是给每个字母或者相似元素添加css样式，但less可以先设置一个圈圈背景是黄色，这样每个字母用到的时候引用即可，更改时也是更改该部分内容即可
在这里插入图片描述

2.less的使用

博主使用的是vscode，在此以vscode举例
node使用less

npm install -g less

扩展中搜索easy less点击安装
在这里插入图片描述
建立，html less css文件

html中使用引入编译后转换出来的css样式

 <link rel="stylesheet" href="/index.css">

完整代码 index.less

// less
@color:#999;
@bgColor:red;
@width: 200px;
@height:200px;

#wrap{
    color: @color;
    background-color: @bgColor;
    height: @height;
    width: @width;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/index.css">
</head>
<body>
    <div id="wrap">
            你好
    </div>
</body>
</html>

效果
在这里插入图片描述

3.less变量

less变量具有以下知识
在这里插入图片描述

3.1 选择器变量

使用@来声明一个变量；@pink:pink;
1.作为一个普通属性值来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载

//#wrap  id选择器
//mySelector是变量名
@mySelector:#wrap;
@wrap:wrap;
@m:margin;

// 选择器放在标签里作为选择器变量使用
@{mySelector}{
    color: chartreuse;
    width: 500px;
}
// 类名的使用
.@{wrap}{
    color: chartreuse;
    width: 500px;
}
// id选择器另一种写发
#@{wrap}{
    color: chartreuse;
    width: 500px;
}

// 属性变量
@borderStyle:border-style;
@soild:solid;

@{mySelector}{
    //border-style:solid;
    @{borderStyle}:@soild;
}

//url变量
@images:"../img";
body{
    background: url("@{images}/cat.png");
}

//声明变量
@background:{background: red;}
@Rules:{
    width: 200px;
    height: 200px;
    border:1px solid black;
}

#main{
    @background();
}
#wrap{
    // 使用rules
    @Rules();
}

变量运算
变量运算单位以第一个单位为准

//变量运算
//加减法以第一个单位为基准
//乘除法单位要统一
@width:300px;
@color:#222;
#wrap{
    width: @width - 20;
    height: @width - 20*5;
    margin: (@width - 20)*5;
    color: @color*2;
    background-color: @color + #111;
}

// 变量作用域 遵循就近原则
@var:@a;
@a:100%;
#wrap{
    width: @var;
    @a:9%;
}
//用变量去定义变量
@found:@var;
@var:'fond';
#wrap::after{
    content: @var;
}

less嵌套
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- / 指的是less预编译内层 -->
    <link rel="stylesheet" href="/less嵌套/index.css">
</head>
<body>
    <div class="nick">
        <div class="send">

        </div>
        <div class="send">

        </div>
        <div class="send">

        </div>
    </div>
</body>
</html>

less

.nick{
    display: inline-block;
    width: 900px;
    height: 600px;
    background-color: rgb(159, 212, 137);
    text-align: center;
    line-height: 600px;
    .send{
        width: 200px;
        height: 300px;
        border: 2px solid gray;
        background-color: aqua;
        border-radius: 20px;
       // float: left;
       display: inline-block;
      
        margin: 10% auto;
     
    }
}

效果
在这里插入图片描述
显示隐藏效果

.main{
    //此处 & 会找到main内一层
    &.show{
        display: block;
    }
}
.show{
    display: none;
}
// const main = document.getElementById("main");
// main.classList.add("show");

less导入
导入其他文件样式，写法：

@import "nav"//"nav.less"  less可以省略不写

在这里插入图片描述
导入但不编译
reference

/*less*/
@import(reference) "bootstrap.less"

默认导入一次,随后导入文件的重复代码都不会解析
once

import(once) "foo.less" //就是说后面又写了一次 import "foo.less"  foo.less的不会被导入多次

导入多次
multiple

@import(multiple) "foo.less";
@import(multiple) "foo.less";

天怀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
less的使用

less的出现是为了方便css的书写，例如美团，A，B，C字母的圈圈颜色，常规css 是给每个字母或者相似元素添加css样式，但less可以先设置一个圈圈背景是黄色，这样每个字母用到的时候引用即可，更改时也是更改该部分内容即可博主使用的是vscode，在此以vscode举例node使用less扩展中搜索easy less点击安装建立，html less css文件html中使用引入编译后转换出来的css样式完整代码 index.lessindex.html效果less变量具有以下知识
复制链接

扫一扫