I know I can #extend .foo:hover, but is there a way to #extend the .foobar base/default properties without also extending the definitions for pseudo-classes like :hover, :active, etc?
For example, how would I change the following such that .foobar extends only .foo's default state?
.foo {
& {
color:blue;
}
&:hover {
background-color: black;
}
}
.foobar {
#extend .foo;
&:hover {
//As is, I have to override. Any better way?
background-color: transparent;
}
}
(If there is no way to do this with Sass, is there a preferred way to achieve the same effect?)
You have to rewrite your selectors in such a way that you only extend exactly the part you want:
%foo {
color:blue;
}
.foo {
#extend %foo;
&:hover {
background-color: black;
}
}
.foobar {
#extend %foo;
&:hover {
background-color: transparent;
}
}
However, depending on how you are going to be extending/reusing your .foo class, the new #content directive might be the better way to go.
#mixin foo {
color: blue;
&:hover {
#content;
}
}
.foo {
#include foo {
background-color: black;
}
}
.foobar {
#include foo {
background-color: transparent;
}
}
Related
When I do a yarn build of the scss below I can only see the .select-list__item:hover in the compiled css, I am not seeing anything else from the class such as .select-list__item--selected I am not sure what the issue here is.
%select-list__item {
&:hover {
background: red;
}
&--selected,
&--selected:nth-child(2n),
&--selected:hover {
background: #00FF00;
}}
.select-list__item {
#extend %select-list__item;}
I believe it is to do with how placeholders (ie: %chosen-name) are meant to be used.
Although this is not explicitly pointed out in the documentation they are meant to be small bits that are reusable.
At my company, we use one for our generic button styles (margin, padding, font) and we extend that into all of our buttons (primary, secondary, tertiary).
A potential solution for your use case:
%select-list__item {
&:hover {
background: red;
}
&:focus{
background: blue;
}
}
.select-list__item {
#extend %select-list__item;
&--selected,
&--selected:nth-child(2n),
&--selected:hover {
background: #00FF00;
}
}
Or here's another - bit of an OTT solution for the example but you get the idea:
%select-list__item {
&:hover {
background: red;
}
&:focus{
background: blue;
}
}
%selected-list__item {
background: #00FF00;
&:nth-child(2n),
&:hover {
background: #00FF00;
}
}
.select-list__item {
#extend %select-list__item;
&--selected {
#extend %selected-list__item
}
}
The nested ampersand prefix doesn't get expanded with #extend
.firstClass{
color: green;
&-a{
color: red;
}
}
.secondClass{
#extend .firstClass;
}
The expected output would be
.firstClass, .secondClass{
color: green;
}
.firstClass-a, .secondClass-a{
color: red;
}
But the actual output doesn't have the .secondClass-a at all.
.firstClass, .secondClass{
color: green;
}
.firstClass-a{
color: red;
}
I found this is an intended behavior to use #extend https://github.com/sass/sass/issues/2154
But is there a workaround that can extend nested ampersand prefix?
Maybe the versions I worked on were older but I don't believe it was possible. You could change your properties to a mixin as such:
#mixin classStyle {
color: green;
&-a{
color: red;
}
}
.firstClass {
#include classStyle;
}
.secondClass {
#include classStyle;
}
Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
Just wanted to know if there exist any way to extend just first two of separated Class like in example, or either exist any other option like creating a specific Class
.background{background:red} and use it as extension instead of a separated Class (but i don't wanted to output in CSS a class .background).
EXAMPLES:
SASS:
.foo {
background:red
}
.foo {
color:red
}
.bar {
#extend .foo;
}
.foo {
font-size: 16px
}
LESS:
.foo {
background:red
}
.foo {
color:red
}
.bar {
&:extend(.foo);
}
.foo {
font-size: 16px
}
The output in CSS will be:
.foo, .bar {
background: red;
}
.foo, .bar {
color: red;
}
.foo, .bar {
font-size: 16px;
}
But I want to be like this:
.foo, .bar {
background: red;
}
.foo, .bar {
color: red;
}
// No .bar class here
.foo {
font-size: 16px;
}
What way should i follow to make this happened?
You've got your inheritance backwards. bar does not extend foo, foo extends bar:
LESS:
.bar {
background-color: red;
}
.bar {
color: red;
}
.foo {
&:extend(.bar);
font-size: 16px;
}
Produces
CSS:
.bar,
.foo {
background-color: red;
}
.bar,
.foo {
color: red;
}
.foo {
font-size: 16px;
}
I try to understand BEVM+SCSS philosophy.
I don't know how to extend V from BE in this case.
What I want to achieve:
.block {
&__element {
background-color: black;
&--variation-a {
#extend &__element; //won't work
color: red;
}
&--variation-b {
#extend &__element; //won't work
color: green;
}
}
}
What I want to avoid:
.block {
&__element {
background-color: black;
&--variation-a {
#extend .block__element; //work but ugly
color: red;
}
&--variation-b {
#extend .block__element; //work but ugly
color: green;
}
}
}
The only way I've found it's to have a kind of %element { ... } aside and extends from it, but it's not exactly what I want.
You can use variables. $b to store block name and $e to store element name.
Sassmeister demo.
.block {
$b: &;
&__element {
$e: #{$b}__element;
background-color: black;
&--variation-a {
#extend #{$e};
color: red;
}
&--variation-b {
#extend #{$e};
color: green;
}
}
}
But it's bad practice to nest element styles by modifier. Modifier must only override styles.