Question

I’m using a “mobile first” approach on my site, and I’m utilizing SCSS.

I have 3 SCSS stylesheets:

• base.scss (served to all)
• medium.scss (>= 768px window)
• large.scss (>= 1024px window)

They are served like this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />

In other words, large.scss has no knowledge of the css in base.scss, yet I need to extend a class that resides in base.css, when in large.scss.

How can I do this?

I tried separating the elements I need to extend, such as the buttons, into a separate stylesheet, and then use @import 'buttons.scss'; in medium.scss, but then all the css in buttons.scss will be rendered in that sheet as well.

Are there any way to make expose classes in base.scss to the SASS “rendering engine” when compiling the css so that they can be used in medium.scss?

Answer 1

I had similar issue recently. My solution: mixins.

_mixins.scss

@mixin someSpacing($base: 5px;){
    padding: $base;
    margin: $base;
}

Remember to use underscore as prefix, sass wont compile those files. So now you can simply import _mixins.scss to your files. Additionally you can extend your mixin with parameters to give you more flexibility.

e.g.
base.scss

    @import '_mixins.scss';

    .classA {
        @include someSpacing(3px);
    }

large.scss

    @import '_mixins.scss';

    .anotherClass {
        @include someSpacing(10px);
    }

more details in sass reference:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins