UL嵌套列表的SCSS混合函数
UL嵌套列表的SCSS混合函数
提问于 2022-10-06 07:02:24
我有树的UL嵌套结构，我想用SCSS编写动态代码，左值可以相应更新。这是我的密码
<ul>
<li><span>Level 1: Item 1</span>
<ul>
<li><span>Level 2: Item 1</span></li>
<li><span>Level 2: Item 2</span>
<ul>
<li><span>Level 3: Item 1</span></li>
<li><span>Level 3: Item 2</span></li>
<li><span>Level 3: Item 3</span></li>
</ul>
</li>
<li><span>Level 2: Item 3</span></li>
</ul>
</li>
<li><span>Level 1: Item 2</span></li>
<li><span>Level 1: Item 3</span></li>
</ul>
ul{
list-style:none;
}
ul li{
position:relative;
margin:4px 0;
}
ul li span{
display:block;
}
ul li span:before{
content: "";
height: 100%;
z-index: 0;
position: absolute;
left:0;
right:0;
background:blue;
z-index:-1;
}
ul li span{
position:relative;
color:white;
}
ul li span::before {
left: -8px;
}
ul li li span::before {
left: -48px;
}
ul li li li span::before {
left: -88px;
}
ul li li li li span::before {
left: -128px;
}
ul li li li li li span::before {
left: -168px;
}
ul li li li li li li span::before {
left: -208px;
}请您帮助我添加动态左值使用SCSS Mixin，以使左值将更新为按数量的水平。谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-10-06 09:00:49
下面是一个简单的混合：
@mixin leftPosition($startingValue: 0, $increment: 40, $max: 10) {
$selector: '';
@for $i from 0 through $max - 1 {
$selector: $selector + ' li';
#{$selector} span::before {
left: #{$startingValue - $i * $increment}px;
}
}
}它所需的参数很少：
$startingValue是left属性的第一个值。它默认为0，但在您的示例中，您需要-8。$increment是您想要的增量值，她是您想要的40。$max是你将得到的li的号码。
你可以这样使用它：
ul {
@include leftPosition($startingValue: -8)
}它将输出：
ul li span::before {
left: -8px;
}
ul li li span::before {
left: -48px;
}
ul li li li span::before {
left: -88px;
}
ul li li li li span::before {
left: -128px;
}
ul li li li li li span::before {
left: -168px;
}
ul li li li li li li span::before {
left: -208px;
}
ul li li li li li li li span::before {
left: -248px;
}
ul li li li li li li li li span::before {
left: -288px;
}
ul li li li li li li li li li span::before {
left: -328px;
}
ul li li li li li li li li li li span::before {
left: -368px;
}当然，您不能从HTML中获得$max的值。这是一个你必须定义自己的价值。
Stack Overflow用户
发布于 2022-10-06 07:43:32
使用这个
li:nth-child(2) {
padding-left: 48px;
}使用括号中的值，您可以选择li和填充-左侧，您可以设置li的左空间，而不需要span。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73969762
复制相关文章
相似问题
腾讯云开发者
