What is the meaning of an ampersand in Less selectors? - css

Question

I download a project, and in it there use less write the stylesheet.
And in the script code the name: own-space, and in the less code, there are &-btn-box, &-tra and &-input-identifycode-con selectors.
I have two questions:
I don't know the .own-space in less and the name: own-space's relationship.
and what's the meaning of &-btn-box, &-tra and &-input-identifycode-con there? what's the function of them?
My code is below:
<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>

Answer 1

Less/Sass and other pre-processors let you write the CSS code with nested rules (besides other things like variables, mixins, and so on). So you don't have to write the full path like you do in CSS. You can just nest the style.
For example, you could have a structure like:
<parent>
<child>
<grandchild>
</grandchild>
</child>
</parent>
In plain CSS, to style every element you would write:
parent { styles }
parent child { styles }
parent child grandchild { styles }
With Less (and other preprocessors like SCSS) you can do the following
parent {
some parent styles
& child {
some child styles
& grandchild {
some grandchild styles
}
}
&:hover { hover styles on parent }
&:before { pseudo element styles }
}
etc.
So, the use of & can be to enable style writing for elements that are in a relationship with the parent element ( in your case the .own-space ).
btn-box , -tra , -input-identifycode-con are direct children of the own-space element, and button is child of btn-box , span is child of button, grandchild of btn-box and , grandgrandchild ( :) ) of the own-pace. Anyway, you get the ideea :)
For the specific question .own-space { &-btn-box { ... } } would mean that there is an element with class own-space-btn-box which most probably is a child of own-space but NOT necessarily ( see end of answer ). The HTML seems to be structured in a BEM style but not according to the documentation and rules. When using preprocessors for styling it is highly recommended to use the BEM naming strategy. Take a look at it.
For example, the current structure COULD look like:
Stack Snippets do not accept SCSS. You can check out a working example 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>
IMPORTANT when you see styles like these in most cases the elements ARE related but keep in mind when debugging other people's code that it's not always the case. They can be unrelated, e.g.
<element class="element"> .... </element>
<element2 class="element-element2"> .... </element2>
The SCSS could still look like this and have the same effect
.element {
styles
&-element2 {
styles
}
}
See example -> not related
Another example use of & would be in the case you have two elements with a common class and a specific class, e.g.
<element class="element specific1">....</element>
<element class="element specific2">....</element>
You can add common styles and specific styles all together like
.element {
/* common styles */
&.specific1 {
/* specific 1 styles */
}
&.specific2 {
/* specific 2 styles */
}
}
There are a lot of different uses for &. Read more:
the-sass-ampersand
Sass parent selector
LESS
BEM naming