Hi everyone,
I have the following piece of SCSS code that I am trying to refactor.
$nav-breakpoints: '', '-xs', '-sm', '-md', '-lg';
.component.carousel {
@each $breakpoint in $nav-breakpoints {
@if $breakpoint == '' {
&.nav#{$breakpoint}-position-top {
&-left,
&-center,
&-right {
.tns-outer {
display: flex;
position: relative;
flex-direction: column;
}
}
&-left {
.tns-nav {
text-align: left;
}
}
&-center {
.tns-nav {
text-align: center;
}
}
&-right {
.tns-nav {
text-align: right;
}
}
&-overlay-left,
&-overlay-center,
&-overlay-right {
.tns-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
&-overlay-left {
.tns-nav {
text-align: left;
}
}
&-overlay-center {
.tns-nav {
text-align: center;
}
}
&-overlay-right {
.tns-nav {
text-align: right;
}
}
}
}
@else if $breakpoint == '-xs' {
&.nav#{$breakpoint}-position-top {
@media only screen and (max-width: 500px) {
// large piece of repeated code
}
}
}
@else if $breakpoint == '-sm' {
&.nav#{$breakpoint}-position-top {
@media only screen and (max-width: 500px) {
// large piece of repeated code
}
}
}
@else if $breakpoint == '-md' {
&.nav#{$breakpoint}-position-top {
@media only screen and (max-width: 500px) {
// large piece of repeated code
}
}
}
}
}
The SCSS loop is working correctly. The last hurdle I have ran into is that I have a section of SCSS I will be repeating in every if / else statement. This is what I mean:
&-left,
&-center,
&-right {
.tns-outer {
display: flex;
position: relative;
flex-direction: column;
}
}
&-left {
.tns-nav {
text-align: left;
}
}
&-center {
.tns-nav {
text-align: center;
}
}
&-right {
.tns-nav {
text-align: right;
}
}
&-overlay-left,
&-overlay-center,
&-overlay-right {
.tns-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
&-overlay-left {
.tns-nav {
text-align: left;
}
}
&-overlay-center {
.tns-nav {
text-align: center;
}
}
&-overlay-right {
.tns-nav {
text-align: right;
}
}
}
Ideally I would add this section of code into a mixin but I am new to SCSS and I’m not sure how this would work.
Any advice help is much appreciated!