2

I am looking for a way to conditionally include content based on a context. The two output files will pull in the same sass files but just process them differently. I would imagine it to work similarly to the @content mixin just without pulling in all the other styles outside of the mixin at the same time. I just need the body of what is included in the mixin. Does anyone have any ideas how I can achieve this?

It is very similar to what https://github.com/at-import/jacket does but without the compass dependency. I have included an example so you can see what kind of thing I am after:

 // _styles.scss

 h1 {
     color: red;
 }

 h2 {
     color: green;
 }

 @include critical {
     .someModule {
         background-color: red;
         height: 50px;
     }
 }

These would then be imported into two separate stylesheets like so

 // output.scss
 @import "styles";

 // critical.scss
 @import "styles";

But when the SASS compiles you would end up with:

// output.css

h1 {
    color: red;
}

h2 {
    color: green;
}    

// critical.css

.someModule {
    background-color: red;
    height: 50px;
}

Instead of output.css and critical.css both including the content:

// output.css and critical.css

 h1 {
     color: red;
 }

 h2 {
     color: green;
 }

 .someModule {
     background-color: red;
     height: 50px;
 }
David Reid
  • 172
  • 7
  • **what's the goal here?** given the linked example, it seems that's it's perfectly viable to include two scss files, with the first including the common styles and the second the over-rides, without any need to mixins etc - I feel there may be a better way to achieve your goal – Toni Leigh Jul 22 '15 at 11:37
  • also, the linked GitHub example hasn't been updated in two years, that's a huge length of time in css-land :-) there are various ways of defining context in scss, with a goal we can advised of the best one for your use case, without necessarily squeezing it into the shape of something that might not be the best way :-) – Toni Leigh Jul 22 '15 at 11:41
  • The goal is to extract some critical CSS out of a set of scss files whilst maintaining the current file structure. This is why overriding is not really an option and I do need to be able to add a wrapper around some specific styles so that these can be pulled into their own isolated stylesheet, minified and put into the HTML. – David Reid Jul 22 '15 at 11:47
  • so, you have a current set of scss files, you'd like to include those files into a different file to compile but set it up so that that other compiled file only uses some of the definitions (I'm guessing, you want to include 'above the fold' styles in order to speed up site load?) – Toni Leigh Jul 22 '15 at 11:53
  • Possible duplicate: http://stackoverflow.com/questions/12135803/compiling-and-maintaining-ie-specific-stylesheets or http://stackoverflow.com/questions/19096303/how-do-i-stop-a-file-being-imported-more-than-once-with-sass-and-midscape – cimmanon Jul 22 '15 at 11:54
  • @cimmanon - it's a bit early to tell if this is duplicate, firstly the OP hasn't fully clarified their use case; secondly the answers linked are quite old, serving an ie stylesheet (over-rides) is a bit different from a critical css stylesheet (cherry-picked styles) so the answer itself could be different, considering there are a number of ways of doing things conditionally in sass and css – Toni Leigh Jul 22 '15 at 12:01
  • This is a bit different to that question @cimmanon. Put simply, I want to be able to use a mixin similar to the `@content` but do away with the universal styles and just keep the ones inside the mixin block. http://jsfiddle.net/6mtta5e0/ - maybe that makes it a bit clearer? – David Reid Jul 22 '15 at 13:12
  • No, the problem is the same, you just need to reverse your thinking. What you call the "universal" styles are not, in fact, universal. They are conditional. – cimmanon Jul 22 '15 at 13:51
  • But by that logic you would have to wrap every single element in some sort of mixin. `@critical` mixin and a `@not-critical` then wrap all the code in either based off of a variable right? Maybe I am not understanding correctly. – David Reid Jul 22 '15 at 13:56
  • if i understand you correctly you want to be able to define all styles for `.selector` in one place, but compile two files, with one file only using the styles that are required for 'above the fold' display? – Toni Leigh Jul 22 '15 at 17:07
  • 1
    Yes, I think you have it @ToniLeigh - any suggestions? – David Reid Jul 22 '15 at 20:53
  • @DavidReid I actually think you're in a good place with the first linked question above, though you will need to switch things around a bit ... that answers your question, but I don't know if it is the best way to achieve your goal – Toni Leigh Jul 23 '15 at 07:44
  • @DavidReid I wonder if there is a better way, whether the technique will be particularly maintainable. Above the fold styles are much more strongly grouped (i.e. all header styles, all master nav styles) as oppose to peppered throughout (like IE over-rides) - it might actually be better to just separate them out in source too and load them first – Toni Leigh Jul 23 '15 at 07:46

0 Answers0