I have a root element div.container at my page, there is div.block.scarlet inside with red color for text.
But we also have body is a parent for div.container element. And when body has class .landing I need to make pink color instead of red.
I don't understand how write it correctly. Help with a syntax please!
/* how I do it now */
.container {
.block {
&.scarlet {
color: red;
}
}
}
body.landing .container {
.block {
&.scarlet {
color: pink;
}
}
}
Tooooo much extra copy-paste code! Is it possible to write in one line? Maybe a trick or smth like sass &. What I want:
.container {
.block {
&.scarlet {
color: red;
#if(body.landing || container.landing) { color: pink }
}
}
}
This is short rule that recolor my text if the root nesting element changed.
You need to use parent selector reference to construct complete selector from current context:
.container {
.block {
&.scarlet {
color: red;
body.landing & {
color: pink;
}
}
}
}
Related
I am looking for some way to not repeat a class name within css. For example if I have
.class1 div { color: red }
.class1 h2 { color: blue }
.class1 p { color: yellow }
is there some way I can group the 3 rules under the one class, something like
.class1 {
div { color: red }
h2 { color: blue }
p { color: yellow }
}
With SASS (or SCSS), you can write :
.class1 {
& div { color: red }
& h2 { color: blue }
& p { color: yellow }
}
Where the '&' sign means 'write what you are actually in' (here, it means 'write .class1'). With an SASS or SCSS compiler, this will output :
.class1 div {
color: red;
}
.class1 h2 {
color: blue;
}
.class1 p {
color: yellow;
}
You can start using Online SCSS compiler to start learning it without installing it. You can use the the official Documentation , which is pretty good, or browse Youtube to find some good tutorials.
Hope it helped !
Rule nesting is not possible in CSS. You've to use SASS for this.
Consider the following scss:
.link {
....
span {
....
&:after {
....
.link.active & {
background-color: red;
}
.link:hover & {
background-color: red;
}
I want to change the background-color for the span :after pseudo-element when link is either being hovered or has the .active class.
What I've tried ( the code posted above ) doesnt seem to work.
Is there anything I'm missing ?
you should try it like this scheme :
.link {
span {
&:after {
...
}
}
&.active,
&:hover {
span:after {
background-color: red;
}
}
}
Working example : http://jsfiddle.net/92gqap5y/
This question seems to be asked often, as mentioned in this thread.
They increase the size of the link element to be as large as the span. Though I would recommend moving the :hover selector and .active class to the span element directly.
In LESS, you can reference a child selector as follows:
<div class="button">
<div class="button-text"> Text </div>
</div>
.button {
&-text {
color:red;
}
}
This will output:
.button .button-text { color:red; }
This is neat and ideal, however, when using a hover, is there a way to maintain the same / similar syntax for the child element? Currently, this wouldn't naturally work:
.button {
&:hover {
&-text {
color:red;
}
}
}
This won't work and as expected, outputs something along the lines of
.button:hover .hover-text { }
Is there a way to get the expected hover result without defining the full class name, in this instance ".button-text"?
Any help would be greatly appreciated.
Because the parents selector & represents all parent selectors (not just the nearest ancestor), nesting under hover, will always include the :hover text.
This rule:
.button {
&:hover &-text {
color:red;
}
}
Will provide the result (lessismore playgroud):
.button:hover .button-text {
color: red;
}
Targeting children in LESS is easy such as:
header {
a { color: white; }
}
But what I'm asking is how to assign color: white; to both the parent and the child? I can do:
header {
color: white;
a { color: white; }
}
But that is adding the same thing twice and I'm sure there's a better way in LESS.
If you really want nesting there, then:
header {
&, a {color: white}
}
For more details see Parent Selectors.
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}