Is is possible in SaSS to only extend the css properties of a class, and avoid rendering a concatenated classname:
.class_A {
background-color: #f0f;
}
.class_B {
color:#555;
#extend class_A;
}
desired result:
.class_B {
color:#555;
background-color: #f0f;
}
If you still need .class_A then you can do this
%bg-color {
background-color: #f0f;
}
.class_A {
#extend %bg-color;
}
.class_B {
color:#555;
#extend %bg-color;
}
Output CSS:
.class_A, .class_B {
background-color: #f0f;
}
.class_B {
color: #555;
}
If you don't need .class_A just use a variable:
$bg-color: #f0f;
.class_B {
color:#555;
background-color: $bg-color;
}
Related
How to apply the same focus state to multiple different classes?
Problem:
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&:focus {
border-color: blue;
// this is not applied but i don't want to
// declare the same style to both classes
}
}
I understand this would be one option, but it is also not the prettiest option as i need to list them separately here
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary:focus, &.error:focus {
border-color: blue;
}
}
Are there any better ways?
Using & again in the nested rule is a good way for your purpose.
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary, &.error {
&:focus{
border-color: blue;
}
}
}
I have code like this:
.outer1 {
&.same-inner {
background-color: white;
}
}
.outer2 {
&.same-inner {
background-color: white;
}
}
.outer3 {
&.same-inner {
background-color: white;
}
}
How do I reuse .same-inner selector?
.outer1, .outer2, .outer3 {
&.same-inner {
background-color: white;
}
}
Translates to CSS:
.outer1.same-inner, .outer2.same-inner, .outer3.same-inner {
background-color: white;
}
Or if you wanted to give each of the outer's there own properties, but also inherit same-inner
.same-inner {
background-color: white;
}
.outer1 {
width:10px;
#extend .same-inner
}
.outer2 {
width:20px;
#extend .same-inner
}
.outer3 {
width:30px;
#extend .same-inner
}
Translates to CSS:
.same-inner, .outer1, .outer2, .outer3 {
background-color: white;
}
.outer1 {
width: 10px;
}
.outer2 {
width: 20px;
}
.outer3 {
width: 30px;
}
Or maybe what you want is:
.same-inner {
background-color: white;
&.outer1 {
width:10px;
#extend .same-inner
}
&.outer2 {
width:20px;
#extend .same-inner
}
&.outer3 {
width:30px;
#extend .same-inner
}
}
Which churns out CSS:
.same-inner, .same-inner.outer1, .same-inner.outer2, .same-inner.outer3 {
background-color: white;
}
.outer1.same-inner {
width: 10px;
}
.outer2.same-inner {
width: 20px;
}
.outer3.same-inner {
width: 30px;
}
You can reuse a selector by #extend.
follow this sass documentation about #extend.
& is parent's name so I tried
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected&--unAllocated {
background: yellow;
}
}
but it is not work
I had to do this.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected.assigItem--unAllocated {
background: yellow;
}
}
Let me know if there's a better way
You should use scss interpolation.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected#{&}--unAllocated {
background: yellow;
}
}
Tested on sassmeister, libsass v3.5.4 — demo.
I was wondering whether there is a certain way to use variables that affect the style in SCSS.
I'm looking for something like:
var x = 1
.class1 {
if (x==1) {
background-color: red;
} else {
background-color: blue;
}
}
.class2 {
if (x==1) {
background-color: blue;
} else {
background-color: red;
}
}
You can use #if and #else
$x:1;
.class1 {
#if $x == 1 {
background-color: red;
} #else {
background-color: blue;
}
}
.class2 {
#if $x == 1 {
background-color: blue;
} #else {
background-color: red;
}
}
I write CSS in BEM style and have this code:
.nav {
&__list {
&__item {
}
}
&__link {
&--active {
}
}
}
How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance the specificity by this method?
There is no magic method for this. Store the desired selector as a variable and nest like normal.
.nav {
$sel: &;
&__list {
&__item {
color: red;
#{$sel} & {
border: 1px solid;
}
}
}
&__link {
&--active {
color: blue;
#{$sel} & {
border: 1px dashed;
}
}
}
}