轻松学会less语言

最新推荐文章于 2023-03-19 17:44:53 发布

qq_41458167

最新推荐文章于 2023-03-19 17:44:53 发布

阅读量146

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_41458167/article/details/103763422

版权

文章目录

.less文件
.html文件
运行结果：
使用less
less文件转换为css文件

.less文件

// 一、变量
@color:blue;
//二、混合(Mixins)
.mixinsStyle{
    border:10px solid red;
}
//三、映射
.maps(){
    padd:20px;
    flower:pink;
}
//四、命名空间
.nameSpace(){
    .button{
        background:palevioletred;
    }
}
//五、嵌套
.wrap{
    color:@color;
    .title{
        background:yellow;
        .mixinsStyle();
    }
    //伪选择器（&代表当前选择器的父级）
    &:hover{
        // .nameSpace();//该命名空间将会失效
        .nameSpace.button();
        color:.maps[flower];
        padding:.maps[padd];
    }
}

//六、块注释以及行注释。
//七、scope作用域
/*
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。
@backGround:yellow;
.box{
    @backGround:red ;
    .title{
        background:@backGround ;
    }
}
与 CSS 自定义属性一样，混合（mixin）和变量的定义不必在引用之前事先定义。因此，下面的 Less 代码示例和上面的代码示例是相同的：*/
@backGround:yellow;
.box{
    .title{
        background:@backGround ;
    }
    @backGround:red ;
}

.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet/less" type="text/css" href="lessTest.less" />
    <title>Document</title>
</head>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js"></script>
<body>
    <div class="wrap">
        外部盒子1
        <h1 class="title">标题</h1>
    </div>
    <div class="box">
        外部盒子2
        <h1 class="title">作用域</h1>
    </div>
</body>
</html>

运行结果：

未滑动前：
在这里插入图片描述
滑动后：

使用less

1.在 Node.js 环境中使用 Less ：
npm install -g less

lessc styles.less styles.css

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：
在html文件中导入。
@import “library”; // library.less

2.在浏览器环境中使用 Less ：

less文件转换为css文件

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

本文主要介绍less文件如何转化为css文件。

首先，你要确认你的电脑已经安装了node。
使用 npm 安装 less，命令行：
npm install -g less
然后，进入需要转换的less文件的目标位置。
最后，你只需输入以下两条命令：
npm install -g less
lessc less文件名.less 生成的css文件名.css
此时再看你的文件夹，是不是已经有了对应的css文件了呢~

如有错误，请您指正！

具体参考：
https://less.bootcss.com/#-comments-

qq_41458167

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
轻松学会less语言

// 一、变量@color:blue;//二、混合(Mixins).mixinsStyle{ border:10px solid red;}//三、映射.maps(){ padd:20px; flower:pink;}//四、命名空间.nameSpace(){ .button{ background:palevioletred; ...
复制链接

扫一扫