Steps to reproduce:
.root {
.parent {
color: red;
&:hover & {
&__child {
background-color: blue;
}
}
}
}
What is actually happening:
.root .parent {
color: red;
}
.root .parent:hover .root .parent__child {
background-color: blue;
}
What is expected：
.root .parent {
color: red;
}
.root .parent:hover .parent__child {
background-color: blue;
}
So, the & in &:hover is not parent selector anymore. How can I get parent selector ?
& is for concatenating selectors together when nesting so you need it only on hover. You don't need the extra &
Try:
/* hover concatenated to 'parent' and the 'parent__child' is nested to hover */
.root {
.parent {
color: red;
&:hover {
.parent__child{
background-color: blue;
}
}
}
}
Related
How could I disable background-color in .button.search so it would fallback to $red value? I can't remove it; I can only overwrite it.
I have
.button {
background-color: {$red};
}
and
.button.search {
background-color: #000;
}
Don't need for any additional setting in search.
.button {
background-color: $red;
}
.button.search {
/* no background-color setting would fallback to $red*/
}
I would do it like this so you can extend the style from .search and it will always fallback with whatever you define and incase you want to have new value for the .active class you can just write background-color: green; after #extend .search;
.search {
background-color: red;
&.active {
#extend .search;
// background-color: green;
}
}
result will be like that
.search, .search.active {
background-color: red;
}
and if you will do that
.search {
background-color: red;
&.active {
#extend .search;
background-color: green;
}
}
and result will be like that
.search, .search.active {
background-color: red;
}
.search.active {
background-color: green;
}
Given this scss
.root {
color: red;
&-child {
color: blue;
small & {
font-size: 80%;
}
}
}
This is the CSS I get:
.root {
color: red;
}
.root-child {
color: blue;
}
small .root-child {
font-size: 80%;
}
I want to style .root-child on small differently so the rule I need is:
small.root-child {
font-size: 80%;
}
(Notice no whitespace after small)
How can I do that?
You need to use #at-root and that will remove the white space in your selector, as well as it will be a valid syntax so no issues while you try to compile.
.root {
color: red;
&-child {
color: blue;
#at-root small#{&} {
font-size: 80%;
}
}
}
You can use #at-root like this:
SCSS
.root {
color: red;
&-child {
color: blue;
#at-root {
small#{&} {
font-size: 80%;
}
}
}
}
Compiled:
.root {
color: red;
}
.root-child {
color: blue;
}
small.root-child {
font-size: 80%;
}
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 8 years ago.
My current SASS looks like this:
.container {
width: 200px;
.element {
color: red;
}
}
I want to achieve that ONLY containers that have the class .small have elements with color:blue. I have tried the following, but this does not work:
.container {
width: 200px;
.element {
color: red;
.small& {
color: blue
}
}
}
My desired compilation is: .small.container .element { color: blue }
How can I achieve that?
You should consider rearranging your scss like this:
.container {
width: 200px;
.element
{
color: red;
}
&.small .element
{
color: blue;
}
}
This will output follwing css:
.container {
width: 200px;
}
.container .element {
color: red;
}
.container.small .element {
color: blue;
}
Read here about the parent referencing selector of sass
If I undestood correctly....This Sass:
.container {
width: 200px;
.element {
color: blue;
}
&.small .element{
color: red;
}
}
compiles to:
.container {
width: 200px;
}
.container .element {
color: blue;
}
.container.small .element {
color: red;
}
Hopes this helps
Is there a way we can check the parent element class & change child element class properties?
Something like:
if parentClass {
h1{color: red;}
} else if parentClass2 {
h1{color: blue;}
}
Want CSS to be like:
.parentClass h1 {
color: red;
}
.parentClass h2 {
color: blue;
}
So, if the name of the parent class changes the child class properties also changes.
Thanks in advance :)
You can't use #if statement in that case but you could do something like this
h1 {
color: red;
.parent-1 & {
color: blue;
}
.parent-2 & {
color: yellow;
}
}
The output will be
h1 {
color: red;
}
.parent-1 h1 {
color: blue;
}
.parent-2 h1 {
color: yellow;
}