问题描述
我下载了一个项目，并在其中使用less编写样式表。
脚本代码中有name: own-space，less代码中有&-btn-box、&-tra和&-input-identifycode-con选择器。
我有两个问题：
我不知道Less中的
.own-space和name: own-space的关系。那里的
&-btn-box、&-tra和&-input-identifycode-con是什么意思？它们有什么功能？
我的代码如下：
<template>
<div>
.....
</div>
</template>
<script>
export default {
components: {
},
name: 'own-space',
data () {
...
};
},
methods: {
...
}
};
</script>
<style lang="less" rel="stylesheet/less">
...
.own-space {
&-btn-box {
margin-bottom: 10px;
button {
padding-left: 0;
span {
color: #2D8CF0;
transition: all .2s;
}
span:hover {
color: #0C25F1;
transition: all .2s;
}
}
}
&-tra {
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
top: 50%;
margin-top: -6px;
left: -3px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
background-color: white;
z-index: 100;
}
&-input-identifycode-con {
position: absolute;
width: 200px;
height: 100px;
right: -220px;
top: 50%;
margin-top: -50px;
border-radius: 4px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
}
}
</style>
Css
Less/Sass和其他预处理程序允许您使用嵌套规则(除了变量、混合等其他内容之外)编写推荐答案代码。因此，您不必像在CSS中那样编写完整路径。您可以直接嵌套样式。
例如，您可以具有如下结构：
<parent>
<child>
<grandchild>
</grandchild>
</child>
</parent>
在纯CSS中，要设置您要编写的每个元素的样式：
parent { styles }
parent child { styles }
parent child grandchild { styles }
使用LESS(以及SCSS等其他预处理器)可以执行以下操作
parent {
some parent styles
& child {
some child styles
& grandchild {
some grandchild styles
}
}
&:hover { hover styles on parent }
&:before { pseudo element styles }
}
等
因此，使用&可以为与父元素(在您的情况下为.own-space)建立关系的元素启用样式编写。
btn-box、-tra、-input-identifycode-con是own-space元素的直接子元素，button 是btn-box的子元素，span是button的孙子元素，btn-box的孙子元素是own-pace的孙子元素(：))。无论如何，您将获得Ideea：)
对于特定问题 .own-space { &-btn-box { ... } }意味着存在一个类为own-space-btn-box的元素，该元素很可能是own-space的子元素，但不一定是(请参阅答案末尾)。HTML的结构似乎是BEM style，但不是根据文档和规则。在使用预处理器设置样式时，强烈建议使用BEM命名策略。请看一下。
例如，当前结构可能如下所示：
堆栈代码段不接受SCSS。您可以查看工作示例here.own-space {
&-btn-box {
margin-bottom: 10px;
button {
padding-left: 0;
span {
color: #2D8CF0;
transition: all .2s;
}
span:hover {
color: #0C25F1;
transition: all .2s;
}
}
}
&-tra {
width: 10px;
height: 10px;
transform: rotate(45deg);
position: absolute;
top: 50%;
margin-top: -6px;
left: -3px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
background-color: white;
z-index: 100;
}
&-input-identifycode-con {
position: absolute;
width: 200px;
height: 100px;
right: -220px;
top: 50%;
margin-top: -50px;
border-radius: 4px;
box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
}
}
<div class="own-space">
The SO snippet doesn't support CSS preprocessors.
Example purposes only
<div class="own-space-btn-box">
<button>Button</button>
<span>Some span</span>
</div>
<div class="own-space-tra">
Tra tra
</div>
<div class="own-space-input-identifycode-con">
identifycode
</div>
</div>
重要信息大多数情况下，当您看到这样的样式时，元素是相关的，但是在调试其他人的代码时请记住，情况并不总是如此。它们可以无关，例如
<element class="element"> .... </element>
<element2 class="element-element2"> .... </element2>
SCSS仍然可以看起来像这样并具有相同的效果
.element {
styles
&-element2 {
styles
}
}
参见示例->；not related
&的另一个用法示例是在您有两个元素具有公共类和特定类的情况下，例如
<element class="element specific1">....</element>
<element class="element specific2">....</element>
您可以同时添加常用样式和特定样式，如
.element {
/* common styles */
&.specific1 {
/* specific 1 styles */
}
&.specific2 {
/* specific 2 styles */
}
}
&有很多不同的用途。阅读更多信息：
- the-sass-ampersand
- Sass parent selector
- LESS
- BEM naming
这篇关于在较少的选择符中，“与”符号是什么意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！