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;
}
Related
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 :)
I have this:
tr {
&.selected {
background-color: #424253;
}
td {
&.current-month {
background-color: #2c3645;
}
&.last {
background-color: #1e252f;
font-weight: bold;
}
}
}
The rule in tr:
&.selected {
background-color: #424253;
}
As expected, is being overridden by the td rules:
&.current-month {
background-color: #2c3645;
}
&.last {
background-color: #1e252f;
font-weight: bold;
}
How do I make it so the tr class selected always overrules any td class affecting background-color (without using !important)?
You can give same specificity as the current-month and last classes and writing selected at the end will take more precision and overrides others.
tr {
td {
&.current-month {
background-color: #2c3645;
}
&.last {
background-color: #1e252f;
font-weight: bold;
}
&.selected {
background-color: #424253;
}
}
}
You could override the background for all td elements that have a class assigned:
tr {
&.selected {
background-color: #424253;
&[class] {
background-color: #424253;
}
}
td {
&.current-month {
background-color: #2c3645;
}
&.last {
background-color: #1e252f;
font-weight: bold;
}
}
}
but i also think in this case it would be totally ok to use !important.
Another solution, if you would use classes for tr and td elements would be this:
.table-row {
.table-cell {
&.current-month {
background-color: #2c3645;
}
&.last {
background-color: #1e252f;
font-weight: bold;
}
#at-root .selected#{&} {
background-color: #424253;
}
}
}
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;
}
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) {}
}