• Stars
    star
    232
  • Rank 172,847 (Top 4 %)
  • Language
    CSS
  • License
    BSD 3-Clause "New...
  • Created over 11 years ago
  • Updated over 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Conditional Styles with Sass. Dress you CSS appropriately.

Jacket

Conditional Styles with Sass. Dress your CSS appropriately.

Jacket is a Compass component that prints or hides styles based on context variables you set in your stylesheet. Write and maintain a master stylesheet, then output custom tailored stylesheets for modern and legacy browsers, site and app builds, or any other context you can think of.

Installation

Until Sass 3.3 is released Jacket requires Compass.

With Ruby

  1. In Terminal: gem install jacket
  2. Require the gem in your config.rb
  3. Import 'jacket' in your stylesheet.

With Bower

  1. In Terminal: bower install jacket
  2. Add extensions_dir = "[your Bower component directory]" to config.rb
  3. Import 'jacket' in your stylesheet.

Basic Usage

The jacket() mixin

Use the jacket mixin to conditionally output blocks of code. If any context in the jacket mixin matches a context in the $jacket variable, your conditional code will be output. If the $jacket variable context has a wrapping selector associated with it, the code block will be wrapped in the wrapping selector.

jacket($contexts...) {
  // Conditional code
}

The jacket() function

Use the jacket function to conditionally output values. If any context in the jacket function matches a context in the $jacket variable, the value will be output.

property: jacket($value, $contexts...);

The $jacket variable

Use the $jacket variable to set a stylesheet's context. You can set multiple contexts in a comma separated list. Each context can have an optional wrapping selector associated with it.

$jacket: context, context '.wrapping-selector', context;

Examples

Write your code in a master stylesheet.

style.scss

.example {
  // Universal rules
  font-size: 1rem;
  padding:0 20px;
}

Wrap context specific code in the jacket mixin or the jacket function.

.example {
  // Universal rules
  font-size: 1rem;
  padding:0 20px;

  // Conditional styles for an ie8 stylesheet
  @include jacket(ie8) {
    float: left;
  }

  // Conditional styles for an iOS and android app build of the stylesheet
  @include jacket(ios, android) {
    background-color: #c0ffee;
  }

  line-height: jacket(1.5, ios, site) jacket(1.3, android);
}

Then create a stylesheet for each build context, and tell Jacket what the weather is.

style.ios.scss

$jacket: ios;
@import 'style';

// Compiles to
.example {
  font-size: 1rem;
  padding: 0 20px;
  background-color: #c0ffee;
  line-height: 1.5;
}

style.android.scss

// Set the weather 
$jacket: android;
@import 'style';

// Compiles to
.example {
  font-size: 1rem;
  padding: 0 20px;
  background-color: #c0ffee;
  line-height: 1.3;
}

style.ie8.scss

$jacket: legacy, ie8 '.ie8';
@import 'style';

//Compiles to:
.example {
  font-size: 1rem;
  padding: 0 20px;
}
.ie8 .example {
  float: left;
}

Now you can serve these custom tailored stylesheets to the correct context with conditional comments, an automated build process, or some javascript. Not too much, not too little. Your stylesheets are lookin' good.

Advanced Usage

Check out the tests for more examples, including condtional logic with nested jackets and a simple media query fallback mixin.

Contribute

Report bugs and feature proposals in the Github issue tracker. In lieu of a formal styleguide, take care to maintain the existing coding style.

Release History

0.1.4, July 7, 2013: Add jacket() function, rewrite docs and tests.
0.1.0, April 21, 2013: Initial release.

License

BSD-NEW

Thanks to Breakpoint, who's no-query functionality inspired this project.

More Repositories

1

breakpoint

Really simple media queries in Sass
CSS
2,091
star
2

Singularity

Grids without limits
CSS
1,504
star
3

toolkit

Toolkit for Responsive Web Design and Progressive Enhancement with Compass
CSS
912
star
4

color-schemer

A sassy way to build color schemes
CSS
376
star
5

SassyLists

SCSS
275
star
6

animation-studio

Compass extension for creating advanced animations in CSS
JavaScript
184
star
7

Sassy-math

Complex math functions for Sass
CSS
164
star
8

node-sass-import-once

Eyeglass style Import Once, but for all the things!
CSS
94
star
9

Sassy-Maps

Map helper functions for Sass 3.3 and up
CSS
66
star
10

sass-a11y

Accessibility helpers for Sass
CSS
56
star
11

Singularity-extras

singularity-extras
CSS
49
star
12

SUCKS

It's an idea, it's a way of working, it's full of stars. No really, it's about Sass'd Up Consistently Killer Styles. OOCSS, SMACSS and BEM only take you so far. Let's turn it up to 11 and change the world forever!
42
star
13

Sassy-Strings

Advanced string handling for Sass
Ruby
41
star
14

Compass-Extension-Template

A generic template for creating a Compass extension
Ruby
38
star
15

sassytextshadow

Sassy Text Shadow is a Sass mixin that calculates convoluted curvy shadows for css3 text-shadow. It can also be used for box-shadow if you're into that kind of thing.
Ruby
33
star
16

Style-Sites

A responsive style page for style tiles and generating a style guide
JavaScript
32
star
17

navigator

A Ruby testing framework for Sass with Compass
Ruby
12
star
18

generator-compass-extension

Yeoman Generator to create Compass Extensions
JavaScript
11
star
19

uikit

Beautiful and flexable UIs with Sass and Compass
Ruby
9
star
20

canisass

A website to show what features are available in each version of Sass
8
star
21

griddle

Simple set of abstractions for CSS Grid
CSS
6
star
22

try

Sass Mixins for designing in the browser
CSS
2
star
23

yolo

lulz
CSS
2
star
24

Compass-Test-Suite

A generic test suite for Compass extensions
Ruby
1
star