Jacket with Codekit about jacket HOT 12 CLOSED

To use extensions you have to tell Codekit to use the system Compass instead of its internal version.

If you install Compass extensions by adding a load/require statement to the beginning of your project's config.rb file, you must switch CodeKit to use an external Compass compiler in order for that extension to work correctly. Do this by installing Compass at the command line as normal (if you're using RVM, make SURE you switch it to the standard system location first!) and then go to the Languages pane of CodeKit's preferences window, select "Compass" and see the "Advanced Compiler Settings" area.

http://incident57.com/codekit/help.php#help-compass

I'm not sure if this is necessary for ad-hoc extensions, so you might want to check out the Bower instructions first. Let me know if this fixes your issue.

from jacket.

It seems I've gotten around my original problem of not being able to locate jacket by specifying the full path to Jacket in the require statement in config.rb, but now I'm getting:

error style.ios.scss (Line 43 of _jacket.scss: "ios" is not a list for `index')

from jacket.

Codekit is using an outdated version of Sass. You need to update Sass to at least 3.2.7 where index() was fixed to accept single item lists. You may be able to specify the system's Sass gem instead of Codekit's internal like with Compass above, not really sure as I don't use it.

FYI, to get the path to the system's version of Sass, type which sass on the command line. To update to the latest, type gem update sass, and if they're not installed you can type gem install sass. Same for Compass.

from jacket.

This article on Css Tricks has instructions on using the system's Sass and Compass, which you can keep updated.

from jacket.

Thanks, getting closer. Problem I'm having now is that rules that aren't including Jacket are being compiled too, e.g.

.test {
    color: #FFF;
    font-weight: bold
}

.rainy {
    font-size: 1rem;

    @include jacket(ios) {
        background-color: #c0ffee;
        content: 'Double ristretto cortado, stat.';
    }
}

is compiling to

.test {
  color: #FFF;
  font-weight: bold; }

.rainy {
  font-size: 1rem;
  background-color: #c0ffee;
  content: 'Double ristretto cortado, stat.'; }

in ios.css.

from jacket.

What is your jacket context variable?

from jacket.

ios.scss contains

$jacket: ios;
@import 'style';

Is that what you meant?

from jacket.

Yep.

Everything is working the way it should. Jacket lets you set conditional code blocks and then create stylesheets that contain all of your non-conditional styles and whichever of your conditional styles you choose (by setting the $jacket context). Then you serve those separate stylesheets to whatever you made them for (say the full stylesheet to modern browsers and an old ie stylesheet to ie8 and below, or stylesheets tailored to different platforms on an HTML5 app).

Unfortunately there's no way in Sass to print just the code inside a mixin, which sounds like what you were looking for.

from jacket.

Unfortunately there's no way in Sass to print just the code inside a mixin, which sounds like what you were looking for.

Ah, looks like I've misunderstood how to use it then.

I was hoping to use this with a mobile-first, responsive workflow where I'd have a baseline stylesheet that serves styles for everything and then just include breakpoint-specific code in the other stylesheets and use some detection to concatenate the different files as screen size increased.

At the moment, my master stylesheet is set up like this:

@import "baseline";

// 480px
@media only screen and (min-width: 30em) { @import "480"; }

// 600px
@media only screen and (min-width: 37.5em) { @import "600"; }

but doing it like that means I end up with one big stylesheet served to all devices whereas smaller devices don't need the breakpoint-specific code.

So it's not possible to work with a single SASS file and have it only split out the breakpoint-specific stuff into separate files?

from jacket.

Yep, not possible right now. You can only have conditional code, not extracted code.

from jacket.

Bummer. :( Do you have any suggestions for how to achieve the sort of set-up I'm after?

from jacket.

The current options are to manually write your media queries in blocks and import separately, or write nested media queries and forget about separate media query only stylesheets. I prefer the second.

The Sass issue queue has an issue about breaking media queries out into separate stylesheets IIRC. You might want to watch that issue for the future.

from jacket.