CODEWITHSUNDEEP
csssass
Ghost1
Ghost1

Reputation: 320

SCSS - best way to organize

Im working with SCSS and I want to structure the code proberly.. In LESS it wasnt a problem, but would you say it is okay to structure the code like below..

imagine that button has its own file.

@mixin button-basic {
    .button {
        font-size: 14px;
    }
}

@mixin button-max-480 {
    .button {
        color: red;
    }
}


@mixin button-max-767 {
    .button {
        color: green;
    }
}

@mixin button-max-959 {
    .button {
        color: blue;
    }
}

@mixin button-min-960 {
    .button {
        font-size: 34px;
        color: purple;
    }
}


@media print, screen {
    @include button-basic();
}

in my media-query file.. (imagine having multiple includes within each media Query type.) 

@media (min-width: 960px) {
    @include button-min-960();
}

@media (max-width: 959px) {
    @include button-max-959();
}

@media (max-width: 767px) {
    @include button-max-767();
}

@media only screen and (max-width:480px) {
    @include button-max-480();
}

Upvotes: 0

Views: 398

Answers (1)

marcobiedermann
marcobiedermann

Reputation: 4915

You could work with @mixins but I would not recommend this approach because this gets really confusing.

I suggest using modifier classes for each variation and use your media-query inside your declaration.

.button {

    &--red {
        color: red;
    }

    &--green {
        color: green;
    }

    &--blue {
        color: blue;
    }

    @media (min-width: 768px) {
        font-size: 1.125rem;
    }

    @media (min-width: 960px) {
        font-size: 1.25rem;
    }

}

This way you have a really clean code base and can split up each component / module into it's own file.

Upvotes: 1

Related Questions