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;
}
}
}
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 :)
Just when I thought Sass was the coolest thing since sliced bread, it had to go and let me down. I'm trying to use the ampersand to select a parent of a nested item. It's a complex selection and its returning some unexpected results...
My sass:
.page--about-us {
a {
text-decoration:none;
}
.fa-stack {
.fa {
color:pink;
}
a & {
&:hover {
.fa-circle-thin {
color:red;
}
.fa-twitter {
color:blue;
}
}
}
}
}
Outputted CSS:
.page--about-us a {
text-decoration: none;
}
.page--about-us .fa-stack .fa {
color: pink;
}
a .page--about-us .fa-stack:hover .fa-circle-thin {
color: red;
}
a .page--about-us .fa-stack:hover .fa-twitter {
color: blue;
}
Expected Output (Note the placement of the a tag):
.page--about-us a {
text-decoration: none;
}
.page--about-us .fa-stack .fa {
color: pink;
}
.page--about-us a .fa-stack:hover .fa-circle-thin {
color: red;
}
.page--about-us a .fa-stack:hover .fa-twitter {
color: blue;
}
Demo:
http://sassmeister.com/gist/8ed68bbe811bc9526f15
You can store the parent selector in a variable!
Take the following BEM-like SASS:
.content-block {
&__heading {
font-size: 2em;
}
&__body {
font-size: 1em;
}
&--featured {
&__heading {
font-size: 4em;
font-weight: bold;
}
}
}
The selector inside of .content-block--featured is going to be .content-block--featured .content-block--featured__heading which might not be what you're after.
It's not as elegant as the single ampersand but you can stash the parent selector into a variable! So to get what you might be after from the above example without hard-coding the parent selector:
.content-block {
$p: &; // store parent selector for nested use
&__heading {
font-size: 2em;
}
&__body {
font-size: 1em;
}
&--featured {
#{$p}__heading {
font-size: 4em;
font-weight: bold;
}
}
}
So, OP, in your case you might try something like this:
.page--about-us {
$about: &; // store about us selector
a {
text-decoration:none;
}
.fa-stack {
.fa {
color:pink;
}
#{$about} a & {
&:hover {
.fa-circle-thin {
color:red;
}
.fa-twitter {
color:blue;
}
}
}
}
}
This is the normal behavior, as described in Sass documentation (link):
& will be replaced with the parent selector as it appears in the CSS. This means that if you have a deeply nested rule, the parent selector will be fully resolved before the & is replaced.
Meaning:
.foo {
.bar {
.baz & {
color: red;
}
}
}
Will render as:
.baz .foo .bar {
color: red;
}
And not:
.baz .bar {
color: red;
}
The right way to get your expected result is this one:
.page--about-us {
a {
text-decoration:none;
.fa-stack:hover {
.fa-circle-thin {
color:red;
}
.fa-twitter {
color:blue;
}
}
}
.fa-stack {
.fa {
color:pink;
}
}
}
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;
}
}