Adding new scss files

sage
1

Hi, I’m trying to create extra scss files, i’ve included the @import in the main.css file but I’m still not able to get it working whenever I add any css to my new file i’ve added.

Also, i’m trying to add a mixins.scss file to keep my mixins there. Not sure if that makes a difference but thought it’d be important to mention.

2

Whereabouts are you adding them @earthjibber? The way I add new files and reference them in main.scss is by:

_mixins.scss
_config.scss
main.scss

main.scss:

@import 'mixins';
@import 'config';
3

Yeah if you’re adding them to the main.css file, that’s the issue.

If you’re using SCSS, you shouldn’t touch the main.css file directly. Like @nathanielks said, import it into the main.scss file instead.

4

@nathanielks I created my own _mixins.scss file then added the @import “components/mixins”; declaration

tried my transition mixin and isn’t working:

@mixin transition($transition...) {
  // defining prefixes so we can use them in mixins below
  $prefixes:      ("-webkit-", "-moz-", "-o-" );
  @each $prefix in $prefixes {
    #{$prefix}transition: $transition;
  }
  transition: $transition;
}
5

what’s your file structure look like? Can we also see what main.scss looks like?

6

Also, postcss’ autoprefixr is perfect for this particular use-case. Depending on your version of Sage, it should be automatically included.

7

@nathanielks my main.css :

@import "common/variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/bootstrap/scss/bootstrap.scss";
// endbower

@import "common/global";
@import "components/buttons";
@import "components/comments";
@import "components/forms";
@import "components/grid";
@import "components/wp-classes";
@import "components/mixins";
@import "layouts/header";
@import "layouts/sidebar";
@import "layouts/footer";
@import "layouts/pages";
@import "layouts/posts";
@import "layouts/tinymce";

Then all i’ve done to my file structure is add _mixins.scss to the components folder.

d)

and i’m on Sage 8.5.0

8

Sweet! Sage 8.5 has autoprefixer built in, so no need for that particular mixin.

Now, this is rather curious as everything you have “looks good.” Is it just the mixins file that’s not being processed or are any of the other scss files not being processed?

9

The other scss files are working fine just wasn’t seeing my mixins file getting rendered so I assumed that the mixins.scss file wasn’t getting included.

I just tried it as transition: all 2s ease-in-out; and it worked! Thank You!

I do see the -webkit prefix but not any others, do I need to worry about the others?

Also, what about other mixins? I have some setup for transforms and positioning etc.

i’m just getting started with sage so I wasn’t aware of the autoprefixer. Are there other tools and fun things like that I should know about that would be related to css?

10

Just answered my own questions thanks for the help @nathanielks!

11

Sure thing @earthjibber!