This code:
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
outputs:
.first,
.second {
margin: 19px;
}
.first .nested {
color: white;
}
But if you wrap it in another block:
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
}
Outputs:
div .first {
margin: 19px;
}
div .first .nested {
color: white;
}
disregards extend? Is this a bug?
From the comment above by #seven-phases-max
No, it's not a bug. :extend is not relative to the selector it's used with; it always requires a complete ("absolute") selector "path". I.e. it should be .second:extend(div .first) no matter where the .second itself is located.
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(div .first) {}
}
Related
Hi can you check please following code? I want define some styles for class, and next apply same styles for another class. I've used inheritance for that but styles from parent aren't used:
.parent-item {
&:not(:last-child) {
margin-right: 20px;
}
}
.child-item {
&:extend(.parent-item);
//...
}
just add the word all next to the name of the class
.child-item {
&:extend(.parent-item all);
//...
}
for example
.parent-item {
color: green;
background: red;
&:not(:last-child) {
margin-right: 20px;
}
&:last-child {
color: red;
}
&:hover {
color: red;
}
}
.child-item {
&:extend(.parent-item all);
//...
}
result will be
.parent-item,
.child-item {
color: green;
background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
color: red;
}
.parent-item:hover,
.child-item:hover {
color: red;
}
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 :)
Is there a way to shorten the following code?
.outer-a {
.inner {
background-color: white;
}
}
.outer-b {
.inner {
background-color: white;
}
}
My expected output:
.outer-a .inner {
background-color: white;
}
.outer-b .inner {
background-color: white;
}
I can't find any functionality in Less documentation that provides this.
You can club the parents like
.outer-a,
.outer-b {
.inner {
background-color: white;
}
}
I guess you could try with commas. Something like this:
.outer-a, .outer-b {
.inner {
background-color: white;
}
}
This then compiles into this
.outer-a .inner,
.outer-b .inner {
background-color: white;
}
Say I've got:
.apple {
color: red;
}
Now, let's say I've also got:
.big {
.apple {
font-size: 1.25em;
}
}
Is there a way I can put the .big selector inside the rule for .apple? In psuedocode, something like:
.apple {
color: red;
&:[WHEN INSIDE `.big`] {
font-size: 1.25em;
}
}
You place the & at the end:
.apple {
color: red;
.big & {
font-size: 1.25em;
}
}