web前端开发html5+css3（学习笔记）（day19）less的简介，语法（less中的变量、父元素与扩展、混合函数、将一个less引到另一个less）less在vscode里的安装及相应配置

已于 2023-01-13 14:27:02 修改
阅读量164 收藏 1
点赞数 1
文章标签： 前端 css3 html5
于 2023-01-13 14:05:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44647089/article/details/128672586
版权

.less的简介

<!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>less的简介</title>
    <style>
        html{
            /* css支持变量的设置 */
            --color:red;
            --length:100px;
        }
        .box1{
            /* calc()计算函数 */
            width: calc(50px*2);
            height: var(--length);
            background-color: var(--color);
        }
        .box2{
            width: var(--length);
            height:var(--length);
            color:var(--color);
        }
        .box3{
            width: var(--length);
            height:var(--length);
            border: 10px solid var(--color);
        }
    </style>
</head>
<body>
        <!--
            less是一门CSS的预处理语言
                less是一个css的增强版，通过less可
            以编写更少的代码实现更强大的样式
                在less中添加许多新特性，像对变量的
            支持，对mixin的支持···
                less
        -->
        <div class="box1">qqq</div>
        <div class="box2">qqq</div>
        <div class="box3">qqq</div>


</body>
</html>

使用less前，需要给vscode安装EasyLESS插件，并做相应配置

配置步骤如下：

vscode里安装Easy LESS插件，然后设置，搜索Easy less，找到easy less configuration，打开settings.json，将以下配置代码复制到"explorer.confirmDelete": false,后边，最终配置结果如图。

配置后，编写***.less即可自动生成***.css文件，在**.html文件中链接一下即可。

"less.compile": {
    "compress": false, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)
  }

        

 less的语法（1）

<!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>less的语法</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box1"></div>
</body>
</html>

 style.less文件

body{
    width: 100px;
    height: 100px;
    div{
        height: 100px;
        background-color: red;
    }
}

 自动生成的style.css文件

body {
  width: 100px;
  height: 100px;
}
body div {
  height: 100px;
  background-color: red;
}
/*# sourceMappingURL=./style.css.map */

 

less语法2

<!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>less的语法2</title>
    <link rel="stylesheet" href="css/syntax.css">
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box4"></div>
        </div>
        <div class="box3"></div>
    </div>
</body>
</html>

syntax.less

body {
    background-color: red;
}
//less中的单行注释，注释中的内容不会被解析到css中
/*css中的注释，内容会被解析到css文件中*/
.box1 {
    width: 100px;
    height: 100px;
    background-color: green;

    .box2 {
        width: 50px;
        height: 50px;
        background-color: blue;

        .box4 {
            width: 40px;
            height: 40px;
            background-color: yellow;
        }
    }

    .box3 {
        background-color: aqua;
    }
}
//变量，在变量中可以存储一个任意值
//并且可以在需要时，任意修改变量中的值
//变量的语法：@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    //使用变量时，若是直接使用则以@变量名的形式使用
    width: @a;
    color: @b;
}
//作为类名，或者一部分值使用时必须以@{变量名}的形式使用
.@{c}{
    width: @a;
    background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div{
    //变量发生重名时，会优先使用靠近的变量
    @d:115px;
    width: @d;
    height: @e;

}
//可以在变量声明前使用变量
@e:335px;
div{
    width: 100px;
    height:$width;
}

自动生成的syntax.css

body {
  background-color: red;
}
/*css中的注释，内容会被解析到css文件中*/
.box1 {
  width: 100px;
  height: 100px;
  background-color: green;
}
.box1 .box2 {
  width: 50px;
  height: 50px;
  background-color: blue;
}
.box1 .box2 .box4 {
  width: 40px;
  height: 40px;
  background-color: yellow;
}
.box1 .box3 {
  background-color: aqua;
}
.box5 {
  width: 100px;
  color: #bfa;
}
.box6 {
  width: 100px;
  background-image: url("box6/1.png");
}
div {
  width: 115px;
  height: 335px;
}
div {
  width: 100px;
  height: 100px;
}
/*# sourceMappingURL=./syntax.css.map */

 

 less语法3

syntax2.less

.box1 {
    .box2 {
        color: #000;
    }

    >.box3 {
        color: red;

        &:hover {
            color: aquamarine;
        }
    }

    //为box1设置hover
    //&表示外层的父元素
    &:hover {
        color: green;
    }

    div & {
        width: 100px;
    }
}
.p1{
    width: 100px;
    height: 200px;
}
.p2{
    width: 100px;
    height: 200px;
    color: red;
}
//extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p2:exend(.p1){
    color: red;
}
.p3{
    //直接对指定的样式进行引用，相当于将p1的样式复制到这里
    //称之为mixin 混合
    .p1();
}
//使用类选择器时可以在选择器后加一个括号，实际就是创建了一个mixins
.p4(){
    width: 100px;
    height: 100px;
    background-color: #bfa;
}
.p5{
    .p4;
}
//混合函数:在混合函数中可以直接设置变量
.test(@w:100px,@h:200px,@bg-color:red){
    width: @w;
    height: @h;
    border: 1px solid @bg-color;
}
div{
    //调用混合函数，按顺序传递参数
    // .test(200px,300px,#bfa);
    .test(200px,300px,#bfa);
    .test( @bg-color:#bfa,@h:300px,@w:200px);
}
span{
    color: average(red,blue);
}
html{
    width: 100%;
    height: 100%;
}
body{
    width: 100%;
    height: 100%;
    background-color: #bfa;
}
body:hover{
    background-color: darken(#bfa,10%);
}

自动生成syntax2.css

.box1 .box2 {
  color: #000;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: aquamarine;
}
.box1:hover {
  color: green;
}
div .box1 {
  width: 100px;
}
.p1 {
  width: 100px;
  height: 200px;
}
.p2 {
  width: 100px;
  height: 200px;
  color: red;
}
.p2:exend(.p1) {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
.p5 {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}
div {
  width: 200px;
  height: 300px;
  border: 1px solid #bfa;
}
span {
  color: #800080;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover {
  background-color: #92ff77;
}
/*# sourceMappingURL=./syntax2.css.map */

 less语法4

<!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>less的语法4</title>
    <link rel="stylesheet" href="css/other.css">
</head>
<body>
    <div class="box1">
        <div class="box2">
            <div class="box4"></div>
        </div>
        <div class="box3"></div>
    </div>
</body>
</html>

 other.less

//通过import将其他less引入到less中
@import (less) "syntax2.less";
.box1{
    //在less中所有的数值都可以直接进行运算
    width: 50px;
    height: (100px/2);
    background-color: red;
}

 自动生成的other.css文件（合并了other.less与syntax2.less中的样式）

.box1 .box2 {
  color: #000;
}
.box1 > .box3 {
  color: red;
}
.box1 > .box3:hover {
  color: aquamarine;
}
.box1:hover {
  color: green;
}
div .box1 {
  width: 100px;
}
.p1 {
  width: 100px;
  height: 200px;
}
.p2 {
  width: 100px;
  height: 200px;
  color: red;
}
.p2:exend(.p1) {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
.p5 {
  width: 100px;
  height: 100px;
  background-color: #bfa;
}
div {
  width: 200px;
  height: 300px;
  border: 1px solid #bfa;
}
span {
  color: #800080;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background-color: #bfa;
}
body:hover {
  background-color: #92ff77;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: red;
}
/*# sourceMappingURL=./other.css.map */

涛008
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值