Less基础整理

最新推荐文章于 2024-05-16 22:33:44 发布
最新推荐文章于 2024-05-16 22:33:44 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38958284/article/details/121525597
版权

vs code 安装easy-less插件：
VScode安装easy less 插件并配置_MpChan228的博客-CSDN博客

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性。Less 可以运行在 Node 或浏览器端。

在安装好Less的插件后，通过编写.less文件，可生成对应的css样式文件。

1、变量

1.1变量的声明：

Less使用@声明变量，

语法：@变量名:变量的值;

@zero:0;

1.2变量的使用

第一种方式——

将变量作为属性值来使用时，只需要写 @变量名

@zero:0;
@bg:sky
*{
    margin: @zero;
    padding: @zero;
}
.box{
    width: 200px;
    height: 200px;
    background:@bg;
    position:absolute;
    top:@zero;
    bottom:@zero;
    right:@zero;
    left:@zero;
    margin:auto;
}

第二种方式——

当变量作为属性名来使用时，语法为@{变量名}

下面的代码中，@w 变量在使用时为@{w}

@zero:0;
@w:width;
@h:height;

*{
    margin: @zero;
    padding: @zero;
}
.box{
    @{w}: 200px;
    @h: 200px;
    background:#000;
    position:absolute;
    top:@zero;
    bottom:@zero;
    right:@zero;
    left:@zero;
    margin:auto;
}

第三种方式——

将变量作为选择器来使用时

语法：选择器@{变量名}  或 @{选择器变量名}

@b:box;

.@{b}{
    width:200px;
}

或者

@b:box;

@{.b}{
    width:200px;
}

上面的代码相当于：

.box{
    width:200px;
}

2、变量的延迟加载

less格式代码如下：下面的代码中，three的值和one的值分别是多少？

@var:0;

.wrap{
    @var:1;
    .box{
        @var:2;
        three:@var;
        @var:3;
        @var:5;
    }
    @var:4;
    one: @var;
    @var:6;
}

编译后的css文件如下：

.wrap {
  one: 6;
}
.wrap .box {
  three: 5;
}

总结：当查找变量时，如果当前大括号内存在该变量，直接使用最后一个，不分远近；

如果自身不存在，则向上一个大括号查找，与第一种情况同理，直接使用上级大括号的最后一个，不分远近。

3、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>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <ul class="list">
        <li>111
            <a href="">123</a>
        </li>
        <li>222</li>
        <li>333</li>
        <a href="">456</a>
        <a href="">789</a>
    </ul>
</body>
</html>

对应的less文件：

@zero:0
@l:list;

*{
    margin: @zero; //0
    padding: @zero; //0
}

// 在less当中，常规嵌套写法，编译后使用的是后代选择器
.@{l}{  //.list
    list-style: none;
    li{ //这里相当于.list .li{...}
        width: 200px;
        // 在less中，如果需要使用伪类 伪元素 结构类等（所有带冒号的），都可以使用&,&代表当前大括号这个元素本身，或者说&是前边所有选择器的集合——即 .list li：hover
        &:hover{
            background: pink;
        }
        // .list li 中，鼠标移到第二个li时，背景色为blue
        &:nth-child(2):hover{
            background: blue;
        }
    }
    // 如果想要操作直接子元素，则在前边添加一个>即可，和css语法一致
    >a{
        color: red;
    }
}

编译后的css文件：

* {
  margin: 0;
  padding: 0;
}
.list {
  list-style: none;
}
.list li {
  width: 200px;
}
.list li:hover {
  background: pink;
}
.list li:nth-child(2):hover {
  background: blue;
}
.list > a {
  color: red;
}

最终效果：

4、混合（Mixin）

混合是less中的重点，先来看看html+css实现下面基础的效果：

<!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="./css/index2.css">
</head>
<body>
    <div class="wrap">
        <div class="box">
            <div class="inner"></div>
        </div>

    </div>
</body>
</html>
* {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 400px;
  height: 400px;
  background: pink;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.box {
  width: 300px;
  height: 300px;
  background: yellowgreen;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.inner {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

实现效果：

 从上面的例子中可以看到，css文件里有很多重复的代码，我们可以将这些重复的代码统一交给混合来处理，见下图中的.allCenter(){...}

*{
    margin: 0;
    padding: 0;
}
// less的混合以点（.）开始，语法：.混合名(){}
.allCenter(){
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.wrap{
    width: 400px;
    height: 400px;
    background: pink;
    .allCenter();
}
.box{
    width: 300px;
    height: 300px;
    background: yellowgreen;
    .allCenter(); //调用混合 相当于在调用的位置写了混合里面的代码，调用混合时，就是使用.混合名(); 注意结尾必须加分号，不加会不稳定
}
.inner{
    width: 200px;
    height: 200px;
    background: blue;
    .allCenter();
}

实现效果：

混合的强大之处在于，它支持传递参数，语法和声明变量相同：

上面的代码中，我们对于每个div的类，里面的宽、高、背景颜色没有设定值，可以参考下面的代码进行传参：

less的混合以点（.）开始，

语法：.混合名(){}

*{
    margin: 0;
    padding: 0;
}
// less的混合以点（.）开始，语法：.混合名(){}
// 混合里的多个变量使用逗号分隔，混合参数没有设置默认值的情况下，调用混合参数的个数必须对等 定义3个就要传3个
.allCenter(@w,@h,@bg){
    width: @w;
    height: @h;
    background: @bg;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.wrap{
    .allCenter(@w:400px;@h:400px;@bg:pink);
}
.box{
    //调用混合 相当于在调用的位置写了混合里面的代码，调用混合时，就是使用.混合名(); 注意结尾必须加分号，不加会不稳定
    .allCenter(@w:300px;@h:300px;@bg:yellowgreen); 
}
.inner{
    .allCenter(@w:200px;@h:200px;@bg:blue);
}

注意：混合里的多个变量使用逗号分隔，混合参数没有设置默认值的情况下，调用混合参数的个数必须对等 定义3个就要传3个

4.1混合的默认参数设置

和调用混合一样，只需要在小括号中指定默认值即可。调用混合时，如果传递了参数，则按照传递的参数进行设置；如果没有传递参数，则按照默认值进行设置

.allCenter(@w:400px;@h:400px;@bg:pink){
    width: @w;
    height: @h;
    background: @bg;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

在实际开发中，存在混合的less文件一般会单独的存放在一个文件中，然后通过一个基本的css，使用下面的代码

@import 'minxins/mixin'

进行引入

合理的使用混合，可以处理类似塌陷等方面的问题，将处理塌陷的css代码单独的写在一个混合中，在需要处理的css代码结构处进行调用即可。

5、预编译器的缺点

less  sess 这种预编译器的语法可能会存在以下弊病：

当嵌套内容过多、样式过多时，less文件里面的各种嵌套关系，因为屏幕显示有限的原因，其展现的不是特别明显，当然这种方式也可以通过连写样式代码，不换行的方式去解决。

勇往直前^
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
less 直接子元素_前端开发：less-gulp如何使用？
weixin_31759829的博客
01-08 2023
大家好，我来了，本期为大家带来的前端入门知识是”前端开发：less-gulp如何使用？“，有兴趣做前端的朋友，和我一起来看看吧！主要内容lessgulpless和gulp学习目标第一节 less上1.less介绍是css的预处理语言。除了less，还有scss(sass)、stylus这些预处理语言。特点：LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既...
常见的CSS预处理器——Less
RouKou的博客
05-18 2586
目录 一.Less介绍 1. 官方介绍 2.自我理解 二.Less的使用 1.在VSCode上的安装使用 （1）插件安装 2.在HMTL上的引用 三.常见用法示例 1.从第一个Less变量开始 2.变量计算 3.变量混合 4.嵌套规则 5.函数的使用 6.条件判断 7.变量作用域 8.不得不说的import指令 9.综合实例 一.Less介绍 1. 官方介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CS
css选中父元素下的第一个子元素(:first-child)
11-19
前言
jquery 常用操作整理 基础入门篇
01-21
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。 　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 　　它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。 　　jQuery是一个快速的，简洁的jav
亚信java笔试题-react-study:前端知识整合以及react基础demo
06-03
亚信java笔试题 前端资料整理 ##HTML ##CANVAS ##H5 ##CSS ##LESS ##Autoprefixer ##CSS3 ##Font ##SASS ##Scope ##BEM ##JS ##swiper滑动插件 ##Ajax ##heatMap热力图 ##prototype原型链 ##JQuery ##语法高亮 ##ES6 ##正则 ##MD5 ##跨域 ##Md5 ##AMD ##emoji ##设计模式 ##HTTPS ##JS全栈 ##Underscore.js ##文件上传 ##SWFUpload ##柯里化 ##jqGrid ##localStorage/sessionStorage ##Cookie ##onunload/onbeforeunload ##模板引擎 ##达夫设备 ##Promise ##Hook ##函数式编程 ##ESLint ##PHP ##ASP.NET ##Ruby ##Python ##SVN ##GIT ##GitHub Pages ##Themes ##SERVER ##Tengine ##Nginx ##Vagran
附录9-less基础
potato123232的博客
07-19 863
less(LeanerStyleSheets)是CSS的扩展语言，也叫CSS预处理器，其余常见处理器还有Sass,Stylusless中文网址less语句在语句前面写//进行注释。
less中，如何选中第一个元素？
qq_33539246的博客
07-19 2069
只是，用css的语法，选中最后一个元素是可以实现的。如上面代码中，&：last-child是可以选中span的最后一个元素的。操作中，我尝试了 :first-child 和 :nth-child(1),无奈都无法实现。如果想要选中多个，就需要用到 :nth-child(1) 来实现。1、ul li:first-child{ /*这里是样式设置*/ }less中选择元素的第一个子元素：:nth-of-type(1)正确的写法是：:nth-of-type(1)那么，在less中，这样写还可以实现吗？
CSS学习笔记
xiyi's Blog
02-21 1886
CSS学习笔记一、CSS概念二、CSS样式表内联样式（行内样式）内部样式表外部样式表三、CSS语法1、选择器常用选择器元素选择器id选择器类选择器通配选择器复合选择器交集选择器并集选择器关系选择器子元素选择器后代元素选择器兄弟选择器属性选择器伪类选择器超链接a的伪类伪元素选择器2、继承3、选择器的权重4、一些单位长度单位颜色单位四、CSS盒子模型文档流 一、CSS概念 网页一共分成三个部分：结构（html）、表现（CSS）、行为（Javascript），css又称层叠样式表。网页实际上是一个多层的结构，通过
less基础及其用法
n_j_q的博客
03-12 1519
less是css的一种编译语言，可以更好的提高编码效率
Less混合结合:nth-child()选择器的高级玩法
heyYouU的博客
08-05 2648
Less混合Mixins结合:nth-child()选择器实现不一样的效果，带你了解:nth-child(n) 选择器的特殊用法。
CSS3:CSS3 知识点提炼整理
05-08
基础 能还原设计稿、兼容各种主流浏览器 盒子模型、浮动、定位 进阶 CSS 分层架构、CSS3 、响应式、预处理 圆角、动画、个性边框、媒体查询 固定布局、流式布局、响应式布局 适应移动设备的发展 Reset.css样式重置 ...
Webpack框架核心概念(知识点整理)
11-27
webpack是一个前端构建的打包工具（并不是什么库或框架）， 它能把各种资源，例如JS（含JSX）、coffee、css（含less/sass）、图片等都作为模块来处理和使用。 1.基础知识点 　1.1 webpack 是一个现代 JavaScript ...
rem 和 less基础
wutenghui的博客
10-30 530
文章目录一、rem 基础1、rem 单位2、媒体查询①、mediatype 媒体类型②、关键字③、媒体特性④、引入资源3、媒体查询 + rem4、rem 适配原理①、rem 适配方案 思考②、rem 实际开发适配方案Ⅰ、rem 实际开发适配方案二、less 基础1、维护 css 的弊端2、Less 介绍3、Less 安装4、Less 使用①、Less 变量Ⅰ、变量名命名规范Ⅱ、变量使用规范②、Less 编译③、Less 嵌套④、Less 运算 一、rem 基础 1、rem 单位 rem (root em)
CSS基础：伪类选择器
沉梦昂志
06-12 388
伪类 link 伪类是给页面中已经存在的元素添加一个类。 伪类用来描述一个元素的特殊状态，如：第一个子元素，鼠标点击的元素，鼠标移入的元素 常用伪类属性 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上方时，向元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被访问的链接添加样式 :first-child 向元素的第一个子元素添加样式 伪类选择器处理超链接 给超链接不同状态添加不同的颜色或样式 a:hove
less的一些用法整理
weixin_30894583的博客
08-22 210
前提理解：第一个，less是单独的一种文件，可以理解为css的升级版，完全按照css写也没问题，不过它提供了很多便利的东西，可以省好多代码量。第二个，html只认css,所以需要配套一些软件将less解析成css,引用时候，直接引用css就好。gulp,koala 都是常用的，Koala好像简单且方便一点。 嵌套 less的优势有很多，最常用也是最让人舒坦的应该就是它的嵌套规则。 我们写...
css less 不要作用到子对象_预处理器less，sass，stylus的变量声明有什么不同？带有限定符...
weixin_42361874的博客
12-25 124
是sass、less、stylus的特点分别是：变量Sass：使用「$」对变量进行声明，变量名和变量值使用冒号进行分割；Less：使用「@」对变量进行声明；Stylus：直接变量名和变量值之间对变量进行声明，『=』连接。1. sass：2.less ：3.stylus：可以没有冒号，没有分号，没有花括号，有点反人类.......以上三种写法都如同一下这种css：body { color: #09...
css的less预处理器学习小结
Laok0413的博客
04-27 1602
写在前面 由于时间原因，笔者在此仅整理一些最常见的less用法，并未涵盖所有的内容。以后如果在项目的过程中用到了其他的内容，还会再进行补充。 如果以下内容有疏漏错误的地方，还请各位读者指正。 1. 嵌套 nest 在原生的css中，如果我们要对父选择器下的子选择器进行单独的样式书写，必须要在父选择器的样式下，再把所有的类名全部重复一遍。 这样就会导致：代码冗杂，重复度高，可读性不强，层级关系不能很好的体现 所以less为我们提供了嵌套的写法，允许将子选择器的样式写在父选择器的花括号里，有了更强的可读性 下
在less中选择某个父元素的儿子的办法
weixin_58689699的博客
01-16 507
/deep/ .dialog-footer > .el-button
Less语言
最新发布
m0_51195865的博客
05-16 817
Less是一门预编译语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展 Less也扩充了CSS语言，增加了诸如变量、混合运算、函数等功能。Less既可以运行在服务端(Node.js和Rhino平台)也可以运行在客户端(浏览器)VSCODE可以使用Easy LESS插件（将less文件在编译后生成css文件） 使用Easy LESS的情况下，编译less文件会生成对应的.css文件，在普通html文件中引用时，引用生成的.css文件 跟js中变量的就近原则是一样的 L
less hover
09-14
The "less hover" refers to using the CSS pseudo-class ":hover" with the LESS preprocessor. In LESS, you can write dynamic and reusable CSS styles using variables, mixins, and other features. When it comes to applying styles specifically when hovering over an element, you can use the ":hover" pseudo-class. Here's an example of using ":hover" in LESS: ```less @color: #ff0000; .button { background-color: @color; transition: background-color 0.3s ease; &:hover { background-color: darken(@color, 10%); } } ``` In the example above, the ".button" class has its background color set to a variable "@color". When hovering over the button, the background color is darkened by 10% using the LESS function "darken()". The "transition" property is also used to create a smooth color transition when hovering. This is just a basic example, but you can apply the ":hover" pseudo-class to any selector or property within your LESS code to achieve different effects when hovering over elements.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值