Less 中的嵌套规则与 & 符号的使用

最新推荐文章于 2024-09-11 20:56:23 发布

X W F

最新推荐文章于 2024-09-11 20:56:23 发布

阅读量353

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_46399258/article/details/108417768

版权

本文介绍了Less语言中的嵌套规则，通过嵌套可以使得CSS代码更直观，便于维护。同时，详细讲解了&符号的使用，包括如何表示父选择器引用、改变选择器顺序以及重复引用父选择器等应用场景。

摘要由CSDN通过智能技术生成

.xkd{
   
  font-size: 14px;
}
.xkd p{
   
  line-height: 25px;
}
.xkd p span{
   
  color: #ccc;
}

这样写虽然也好理解，但是没有那么直观，维护起来也不方便。
而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在一个选择器中嵌套另一个选择器，这样可以使得代码看起来一目了然，后期维护也方便。
嵌套的使用
例如上面的 css 代码使用 Less 语言来写：

.xkd{
   
   font-size: 14px;
   p{
   
      line-height: 25px;
      span{
   
         color: #ccc;
      }
   }
}

这样整体看起来是不是更直观一些，一层套一层。但是注意哟，一般我们不会嵌

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

X W F

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Less 嵌套

ivenqin的博客

07-15

696

本节我们学习 Less 中的嵌套，嵌套应该很容易理解，HTML 语言中就支持标签的嵌套。我们在使用 CSS 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如： .xkd{ font-size: 14px; } .xkd p{ line-height: 25px; } .xkd p span{ color: #ccc; } 这样写虽然也好理解，但是没有那么直观，维护起来也不方便。而 Less 中的嵌套规则正好可以解决这样问题，嵌套规则允许在

less学习-嵌套规则

付博瀚

08-16

2568

LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS: #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 在 ...

参与评论您还未登录，请先登录后发表或查看评论

less 的 & 详解

最新发布

Python老吕的博客

09-11

962

CSS预处理器，如Less，正是在这样的背景下应运而生，它们为开发者提供了编写更高效、更可维护的CSS代码的能力。无论你是刚刚接触Less的新手，还是已经有一定经验想要进一步挖掘Less潜力的开发者，本专栏都将为你提供全面、系统的学习和实践指导。本专栏的每一章节都配有实际的代码示例和详细的解释，确保读者能够理解并掌握Less的每一个概念和技巧。本书由资深全栈工程师👨‍💻博主。精心撰写，通过丰富的实例和深入浅出的讲解，引导读者逐步深入Less的世界，探索其在现代Web开发中的应用和优势。

less中 & 的作用

丁七岁的博客

09-25

2832

1.&可以当做父类级比如看这个代码：里面的类名我随便写的，你自己写项目的时候可不要像我一样 .ding{ .qi{ width: 100px; height: 200px; background-color: #1bc4fb; } .sui{ width: 300px; height: 200px; color: red; &.xi{

LESS详解之嵌套(&)

梦龙小站

11-07

1万+

LESS是一种动态语言，属于CSS预处理语言的一种。LESS和其他预处理语言一样也支持嵌套的写法。下面就为大家通过小例子来介绍LESS中的嵌套书写方式。

Less 预处理笔记

CoderZ's blog

04-06

379

1. less 简介 less是CSS的预编译器，可以扩展CSS语言（当然也兼容CSS），可以定义变量、混合、函数等等，让CSS代码更易维护和扩展 less与传统写法相比： less后缀为" .less " less中的注释有两种 // 这种注释不会编译到CSS文件 /* 这种注释会编译到CSS文件*/ div { font-size: 14px; } less需要编译成css...

Less.js中文文档：CSS扩展与变量、混合与嵌套教程

Less.js中文文档提供了对变量、混合和嵌套规则的深入讲解，旨在帮助开发者更好地理解和利用这一强大的CSS扩展工具，提升CSS代码的组织和维护能力。通过阅读这份文档，用户能够快速掌握Less的核心语法，并在实际项目...

解决Vue2.0中使用less给元素添加背景图片出现的问题

11-30

首先，我们需要理解Less是一种预处理器，它允许我们使用变量、嵌套规则、运算符等特性来编写CSS。在尝试将Less与Vue.js结合使用时，可能会遇到以下几种错误的背景图片URL引用方式： 1. `background-image: url('../...

Less使用语法（详细）

weixin_44646763的博客

02-27

9509

一、变量 1、使用@符号声明变量例子： less内容 @width:100px;//变量 @height:100px; @fsize:20px; .less{ width: @width;//变量作为css属性的值 height: @height; background-color: red; font-size: @fsize; } css效果： .less { width: 100px; height: 100px; bac

less中部分语法详解

weixin_42331327的博客

07-17

3003

less中的语法详解，主要是介绍一些平时常用的语法。一、变量。　　变量是识别符号是@，在less中以@开头的则是变量，关于变量名的命名方法，大家可以参考js中命名的规则，毕竟是做前端的，有着统一的习惯有助于我们统一风格。个人推荐变量名的命名规则使用驼峰命名法。第一个单词首写字母小写，从第二个开始，单词首写字母大写。如boxAaa,boxBbbb,boxContainer,……，当然也是...

样式穿透，有三种写法

m0_60695310的博客

08-27

246

1. >>> 在less中使用 2. /deep/ 在less中使用 3. ::v-deep 在scss中使用

Less的入门及使用—变量、嵌套规则、混合、运算、避免编译、继承(附代码演示)

王春燕的博客

04-15

2914

一、less简介 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 less的中文官网：

Less和Sass中的&

sinat_38728634的博客

07-15

1076

&能实现类似BEM这样的命名规则 .button { &-ok { background-image: url("ok.png"); } &-cancel { background-image: url("cancel.png"); } &-custom { background-image: url("custom....

LESS中&符号

qq_45716607的博客

04-16

246

LESS中&符号

Less中&符号

weixin_44090040的博客

06-12

780

.export_box{ background: #fff; .export_box_header{ color:red; &:hover { color: #235FB8; } } .export_box_main &{ border-color: #235FB8; } } 转化为CSS效果： .export_box{ background: #fff; } .ex

Less 语法简述

杏子

03-04

6283

一、Less特征 Less是CSS预处理器，是对CSS的一种拓展；同时具备动态语言的特点，如变量、运算、函数等，故也是一门动态语言。二、Less使用环境 Less既可以在客户端使用（浏览器），也可以在服务端使用（Node.js）；客户端使用： <link rel="stylesheet/less" href="style.less"> <script src="le...

less中文示例教程

我是新手F1的专栏

01-27

1445

1.变量 1.1.value变量示例1 input： // Variables @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); // 用法 a, .link { color: @link-color; } a:hover { color: @link-c