├── .gitignore ├── LICENSE.txt ├── bower.json ├── jacket.gemspec ├── lib └── jacket.rb ├── readme.md ├── sache.json ├── stylesheets └── _jacket.scss └── test ├── config.rb ├── css └── style.css └── scss └── style.scss /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore for Sass and Compass extensions 2 | 3 | # Ignore hidden folders # 4 | # This takes care of .tmp, .sass-cache, and many others # 5 | .*/ 6 | 7 | # Ignore OS generated files # 8 | .DS_Store* 9 | ehthumbs.db 10 | Icon? 11 | Thumbs.db 12 | 13 | # Always-ignore files and folders # 14 | *.diff 15 | *.err 16 | *.log 17 | *.orig 18 | *.rej 19 | *.swn 20 | *.swo 21 | *.swp 22 | ._* 23 | *~ 24 | 25 | # Ignore packages # 26 | *.7z 27 | *.dmg 28 | *.gz 29 | *.iso 30 | *.jar 31 | *.rar 32 | *.tar 33 | *.zip 34 | 35 | # Ignore dependencies and compiled gems # 36 | components/ 37 | *.gem 38 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013, Robert Wierzbowski 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above copyright 9 | notice, this list of conditions and the following disclaimer in the 10 | documentation and/or other materials provided with the distribution. 11 | * Neither the name of the nor the 12 | names of its contributors may be used to endorse or promote products 13 | derived from this software without specific prior written permission. 14 | 15 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 16 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 17 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 18 | DISCLAIMED. IN NO EVENT SHALL BE LIABLE FOR ANY 19 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 20 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 21 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 22 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 23 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 24 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jacket", 3 | "version": "1.1.1", 4 | "main": "stylesheets/_jacket.scss", 5 | "ignore": [ 6 | "node_modules", 7 | "components", 8 | "test" 9 | ] 10 | } -------------------------------------------------------------------------------- /jacket.gemspec: -------------------------------------------------------------------------------- 1 | require './lib/jacket' 2 | 3 | Gem::Specification.new do |s| 4 | 5 | # Project Information 6 | s.name = "jacket" 7 | s.version = Jacket::VERSION 8 | s.date = Jacket::DATE 9 | s.rubyforge_project = "jacket" 10 | s.rubygems_version = "1.7.2" 11 | s.required_rubygems_version = Gem::Requirement.new(">= 1.2") 12 | 13 | # Author Information 14 | s.authors = ["Rob Wierzbowski"] 15 | s.email = ["hello@robwierzbowski.com"] 16 | s.homepage = "http://github.com/robwierzbowski/jacket" 17 | 18 | # Project Description 19 | s.description = "Manage multiple css builds from a single stylesheet" 20 | s.summary = "Jacket helps orgainze your stylesheets for a multi-context build 21 | process. Write and maintain a master stylesheet, then output custom tailored 22 | stylesheets for specific browsers, mobile/desktop sites, and app builds." 23 | 24 | # Gem Files 25 | s.files = ["readme.md"] 26 | # s.files += ["changelog.md"] 27 | s.files += Dir.glob("lib/**/*.*") 28 | s.files += Dir.glob("stylesheets/**/*.*") 29 | 30 | # Dependencies 31 | s.add_dependency 'sass', '~> 3.3.0.rc.2' 32 | s.add_dependency 'compass', "~> 1.0.0.alpha.17" 33 | end 34 | -------------------------------------------------------------------------------- /lib/jacket.rb: -------------------------------------------------------------------------------- 1 | # TODO: Remove lib/ when Sass 3.3 is released 2 | require 'compass' 3 | extension_path = File.expand_path(File.join(File.dirname(__FILE__), "..")) 4 | Compass::Frameworks.register('jacket', :path => extension_path) 5 | 6 | module Jacket 7 | VERSION = "1.1.1" 8 | DATE = "2013-07-07" 9 | end 10 | 11 | module Sass::Script::Functions 12 | 13 | # Add the Sass list_separator() function until it lands in Sass 3.3 14 | # Code fixes from https://github.com/nex3/sass/pull/689#issuecomment-16711829 15 | # included. 16 | 17 | # Returns the separator of the given list. 18 | # If not a list, returns false. 19 | # 20 | # @example 21 | # list-separator(1px 2px 3px) => 'space' 22 | # list-separator(1px, 2px, 3px) => 'comma' 23 | # list-separator('foo') => 'space' 24 | def list_separator(list) 25 | if list.class == Sass::Script::List or list.class == Sass::Script::ArgList 26 | Sass::Script::String.new(list.separator.to_s) 27 | else 28 | Sass::Script::String.new('space') 29 | end 30 | end 31 | declare :separator, [:list] 32 | 33 | end 34 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Jacket 2 | 3 | **Conditional Styles with Sass. Dress your CSS appropriately.** 4 | 5 | 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. 6 | 7 | ## Installation 8 | 9 | Until Sass 3.3 is released Jacket requires Compass. 10 | 11 | **With Ruby** 12 | 13 | 1. In Terminal: `gem install jacket` 14 | 2. Require the gem in your config.rb 15 | 3. Import 'jacket' in your stylesheet. 16 | 17 | **With Bower** 18 | 19 | 1. In Terminal: `bower install jacket` 20 | 2. Add `extensions_dir = "[your Bower component directory]"` to config.rb 21 | 3. Import 'jacket' in your stylesheet. 22 | 23 | ## Basic Usage 24 | 25 | ### The jacket() mixin 26 | 27 | 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. 28 | 29 | ```scss 30 | jacket($contexts...) { 31 | // Conditional code 32 | } 33 | ``` 34 | 35 | ### The jacket() function 36 | 37 | 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. 38 | 39 | ```scss 40 | property: jacket($value, $contexts...); 41 | ``` 42 | 43 | ### The $jacket variable 44 | 45 | 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. 46 | 47 | ``` 48 | $jacket: context, context '.wrapping-selector', context; 49 | ``` 50 | 51 | 52 | ### Examples 53 | 54 | Write your code in a master stylesheet. 55 | 56 | **style.scss** 57 | 58 | ```scss 59 | .example { 60 | // Universal rules 61 | font-size: 1rem; 62 | padding:0 20px; 63 | } 64 | ``` 65 | 66 | Wrap context specific code in the jacket mixin or the jacket function. 67 | 68 | ```scss 69 | .example { 70 | // Universal rules 71 | font-size: 1rem; 72 | padding:0 20px; 73 | 74 | // Conditional styles for an ie8 stylesheet 75 | @include jacket(ie8) { 76 | float: left; 77 | } 78 | 79 | // Conditional styles for an iOS and android app build of the stylesheet 80 | @include jacket(ios, android) { 81 | background-color: #c0ffee; 82 | } 83 | 84 | line-height: jacket(1.5, ios, site) jacket(1.3, android); 85 | } 86 | ``` 87 | 88 | Then create a stylesheet for each build context, and tell Jacket what the weather is. 89 | 90 | **style.ios.scss** 91 | 92 | ```scss 93 | $jacket: ios; 94 | @import 'style'; 95 | 96 | // Compiles to 97 | .example { 98 | font-size: 1rem; 99 | padding: 0 20px; 100 | background-color: #c0ffee; 101 | line-height: 1.5; 102 | } 103 | ``` 104 | 105 | **style.android.scss** 106 | 107 | ```scss 108 | // Set the weather 109 | $jacket: android; 110 | @import 'style'; 111 | 112 | // Compiles to 113 | .example { 114 | font-size: 1rem; 115 | padding: 0 20px; 116 | background-color: #c0ffee; 117 | line-height: 1.3; 118 | } 119 | ``` 120 | 121 | **style.ie8.scss** 122 | 123 | ```scss 124 | $jacket: legacy, ie8 '.ie8'; 125 | @import 'style'; 126 | 127 | //Compiles to: 128 | .example { 129 | font-size: 1rem; 130 | padding: 0 20px; 131 | } 132 | .ie8 .example { 133 | float: left; 134 | } 135 | ``` 136 | 137 | 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. 138 | 139 | ## Advanced Usage 140 | 141 | Check out the [tests](https://github.com/Team-Sass/jacket/tree/master/test) for more examples, including condtional logic with nested jackets and a simple media query fallback mixin. 142 | 143 | ## Contribute 144 | 145 | Report bugs and feature proposals in the [Github issue tracker](https://github.com/Team-Sass/jacket/issues). In lieu of a formal styleguide, take care to maintain the existing coding style. 146 | 147 | ## Release History 148 | 149 | 0.1.4, July 7, 2013: Add jacket() function, rewrite docs and tests. 150 | 0.1.0, April 21, 2013: Initial release. 151 | 152 | ## License 153 | 154 | [BSD-NEW](http://en.wikipedia.org/wiki/BSD_License) 155 | 156 | *Thanks to [Breakpoint](https://github.com/Team-Sass/breakpoint), who's no-query functionality inspired this project.* 157 | -------------------------------------------------------------------------------- /sache.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Jacket", 3 | "description": "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.", 4 | "tags": ["conditional-styles", "code-quality", "performance", "progressive-enhancement"] 5 | } 6 | -------------------------------------------------------------------------------- /stylesheets/_jacket.scss: -------------------------------------------------------------------------------- 1 | /////////////////////////////////////////////////////////// 2 | // Jacket 3 | // Conditional Styles with Sass. Dress you CSS appropriately. 4 | /////////////////////////////////////////////////////////// 5 | 6 | // Jacket is a Compass component that prints and hides styles based on 7 | // context variables you set in your stylesheet. Write and maintain a master 8 | // stylesheet, then output custom tailored stylesheets for modern and legacy 9 | // browsers, site and app builds, or any other context you can think of. 10 | 11 | /////////////////////////////////////////////////////////// 12 | // Settings variables 13 | /////////////////////////////////////////////////////////// 14 | 15 | // Default list of jacket contexts. 16 | $jacket: null !default; 17 | 18 | // Private variable used by jacket-context(). 19 | $jckt-context: null; 20 | 21 | /////////////////////////////////////////////////////////// 22 | // Jacket mixin 23 | // Takes a list of jacket contexts. 24 | // Outputs a block of styles if a context is set. 25 | /////////////////////////////////////////////////////////// 26 | @mixin jacket($contexts...) { 27 | 28 | $naked: false; 29 | $selectors: (); 30 | $filtered: (); 31 | $selector-string: ''; 32 | 33 | // Set the global context variable. 34 | $jckt-context: $contexts !global; 35 | 36 | // If jacket is a single context and selector list, encapsulate. 37 | @if list-separator($jacket) == 'space' { 38 | $jacket: $jacket, null !global; 39 | } 40 | 41 | // Test if a jacket context and jacket value match. 42 | @each $item in $jacket { 43 | @each $context in $contexts { 44 | @if index($context, nth($item, 1)) { 45 | 46 | // Gather wrapping selectors. 47 | @if length($item) == 1 { 48 | $naked: true; 49 | } 50 | @if length($item) == 2 { 51 | $selectors: append($selectors, nth($item, 2) + ' &'); 52 | } 53 | } 54 | } 55 | } 56 | 57 | // Filter out duplicate selectors. 58 | // If reject() is added to Sass we can remove the $filtered holder variable. 59 | @each $selector in $selectors { 60 | @if index($filtered, $selector) == false { 61 | $filtered: append($filtered, $selector); 62 | } 63 | } 64 | 65 | // Build the selector string. 66 | @each $selector in $filtered { 67 | @if $selector-string != '' { 68 | $selector-string: $selector-string + ", "; 69 | } 70 | $selector-string: $selector-string + $selector; 71 | } 72 | 73 | // If the weather is right, output that jacketed code! 74 | @if $naked { 75 | @content; 76 | } 77 | @if $selector-string != '' { 78 | #{$selector-string} { 79 | @content; 80 | } 81 | } 82 | } 83 | 84 | /////////////////////////////////////////////////////////// 85 | // Jacket function 86 | // Takes a list of jacket contexts. 87 | // Outputs a value if a context is set. 88 | /////////////////////////////////////////////////////////// 89 | @function jacket($value, $contexts...) { 90 | 91 | @each $item in $jacket { 92 | @each $context in $contexts { 93 | @if index($context, nth($item, 1)) { 94 | // If the weather is right, return the value! 95 | @return $value; 96 | } 97 | } 98 | } 99 | 100 | // Else return null. If null is the only value for a selector, the selector 101 | // will not be printed. 102 | @return null; 103 | } 104 | 105 | /////////////////////////////////////////////////////////// 106 | // Jacket Context function 107 | // Takes a jacket context value. Use when code inside a jacket 108 | // needs to know if a specific jacket context is set. 109 | /////////////////////////////////////////////////////////// 110 | @function jacket-context($context) { 111 | @return if(index($jckt-context, $context), true, false); 112 | } 113 | -------------------------------------------------------------------------------- /test/config.rb: -------------------------------------------------------------------------------- 1 | # File system locations 2 | sass_dir = 'scss' 3 | css_dir = 'css' 4 | 5 | # Debugging 6 | output_style = :expanded 7 | line_comments = false 8 | relative_assets = true 9 | 10 | # Include ruby lib for local extension testing 11 | module Sass::Script::Functions 12 | 13 | def list_separator(list) 14 | if list.class == Sass::Script::List or list.class == Sass::Script::ArgList 15 | Sass::Script::String.new(list.separator.to_s) 16 | else 17 | Sass::Script::String.new('space') 18 | end 19 | end 20 | declare :separator, [:list] 21 | 22 | end 23 | 24 | -------------------------------------------------------------------------------- /test/css/style.css: -------------------------------------------------------------------------------- 1 | /* Jacket Tests 2 | * Take a look around and see what Jacket can do. */ 3 | /* Single jacket context. 4 | The matching jacket will be output. 5 | $jacket: ios; */ 6 | .misty { 7 | /* Universal */ 8 | font-size: 1rem; 9 | /* jacket(ios) */ 10 | top: 30px; 11 | /* jacket(android-2x) */ 12 | } 13 | 14 | /* Single jacket context, with selector. 15 | The matching jacket will be output wrapped in the selector. 16 | $jacket: anorak ".freezing"; */ 17 | .blizzard { 18 | /* Universal */ 19 | font-size: 1rem; 20 | /* jacket(anorak) */ 21 | /* jacket(windbreaker) */ 22 | } 23 | .freezing .blizzard { 24 | max-width: 90%; 25 | } 26 | 27 | /* Multiple jacket contexts. 28 | If any jacket context matches a value the jacket will be output. 29 | $jacket: ie7, ie8; */ 30 | .drizzle { 31 | /* Universal */ 32 | font-size: 1rem; 33 | /* jacket(ie7) */ 34 | width: 100%; 35 | /* jacket(ie8) */ 36 | content: 'My will also be output.'; 37 | background: none; 38 | } 39 | 40 | /* Multiple values in a single jacket. 41 | If a jacket context matches any of the values the jacket will be output. 42 | $jacket: main-site; */ 43 | .sunny { 44 | /* Universal */ 45 | font-size: 1rem; 46 | /* jacket(main-site, sub-site) */ 47 | margin: 1.618rem 0; 48 | /* jacket(sub-site) */ 49 | } 50 | 51 | /* Multiple contexts and multiple values in a single jacket. 52 | If a jacket context matches any of the values the jacket will be output. 53 | $jacket: track, overcoat, mod ".triumph"; */ 54 | .cafe-race { 55 | /* Universal */ 56 | font-size: 1rem; 57 | /* jacket(track, tie, suit) */ 58 | position: absolute; 59 | /* jacket(suit, mod, overcoat) */ 60 | top: 3em; 61 | /* jacket(leather) */ 62 | } 63 | .triumph .cafe-race { 64 | top: 3em; 65 | } 66 | 67 | /* Conditional logic with nested jackets. 68 | You can create 'and' logic by nesting jackets. 69 | $jacket: build-1, build-1-a; */ 70 | .soire { 71 | font-size: 1rem; 72 | /* jacket(build-1) { jacket(build-1-a) {} } */ 73 | background-image: url(titans.gif); 74 | /* jacket(build-1) { jacket(build-1-b) {} } */ 75 | } 76 | 77 | /* A simple media query fallback mixin built with jacket. */ 78 | /* Output media queries 79 | $jacket: standards, queries; */ 80 | @media (min-width: 30em) and (orientation: portrait) { 81 | .casual { 82 | color: green; 83 | height: 0.5vh; 84 | } 85 | } 86 | 87 | /* Output rules without queries (probably in their own stylesheet) 88 | $jacket: old-ie, noqueries; */ 89 | .casual { 90 | color: green; 91 | height: 0.5vh; 92 | } 93 | 94 | /* Output media queries and wrapped rules without queries in the same stylesheet 95 | $jacket: main-site, queries, noqueries ".lt-ie9"; */ 96 | @media (min-width: 30em) and (orientation: portrait) { 97 | .casual { 98 | color: green; 99 | height: 0.5vh; 100 | } 101 | } 102 | .lt-ie9 .casual { 103 | color: green; 104 | height: 0.5vh; 105 | } 106 | 107 | /* jacket() function. 108 | If a jacket context matches, the value will be output. 109 | $jacket: space-theme; */ 110 | .container { 111 | background-color: #222; 112 | /* background-image: jacket(url(../universe-bg.png), space-theme); */ 113 | background-image: url(../universe-bg.png); 114 | } 115 | 116 | /* $jacket: simple; */ 117 | .container { 118 | background-color: #222; 119 | /* background-image: jacket(url(../universe-bg.png), space-theme); */ 120 | } 121 | -------------------------------------------------------------------------------- /test/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import '../../stylesheets/jacket'; 2 | 3 | /* Jacket Tests 4 | * Take a look around and see what Jacket can do. */ 5 | 6 | $jacket: ios; 7 | /* Single jacket context. 8 | The matching jacket will be output. 9 | $jacket: #{$jacket}; */ 10 | 11 | .misty { 12 | /* Universal */ 13 | font-size: 1rem; 14 | 15 | /* jacket(ios) */ 16 | @include jacket(ios) { 17 | top: 30px; 18 | } 19 | /* jacket(android-2x) */ 20 | @include jacket(android-2x) { 21 | bottom: 30px; 22 | } 23 | } 24 | 25 | $jacket: anorak '.freezing'; 26 | /* Single jacket context, with selector. 27 | The matching jacket will be output wrapped in the selector. 28 | $jacket: #{$jacket}; */ 29 | 30 | .blizzard { 31 | /* Universal */ 32 | font-size: 1rem; 33 | 34 | /* jacket(anorak) */ 35 | @include jacket(anorak) { 36 | max-width: 90%; 37 | } 38 | /* jacket(windbreaker) */ 39 | @include jacket(windbreaker) { 40 | max-width: none; 41 | } 42 | } 43 | 44 | $jacket: ie7, ie8; 45 | /* Multiple jacket contexts. 46 | If any jacket context matches a value the jacket will be output. 47 | $jacket: #{$jacket}; */ 48 | 49 | .drizzle { 50 | /* Universal */ 51 | font-size: 1rem; 52 | 53 | /* jacket(ie7) */ 54 | @include jacket(ie7) { 55 | width: 100%; 56 | } 57 | /* jacket(ie8) */ 58 | @include jacket(ie8) { 59 | content: 'My will also be output.'; 60 | background: none; 61 | } 62 | } 63 | 64 | $jacket: main-site; 65 | /* Multiple values in a single jacket. 66 | If a jacket context matches any of the values the jacket will be output. 67 | $jacket: #{$jacket}; */ 68 | 69 | .sunny { 70 | /* Universal */ 71 | font-size: 1rem; 72 | 73 | /* jacket(main-site, sub-site) */ 74 | @include jacket(main-site, sub-site) { 75 | margin: 1.618rem 0; 76 | } 77 | 78 | /* jacket(sub-site) */ 79 | @include jacket(sub-site) { 80 | line-height: 1.444rem; 81 | } 82 | } 83 | 84 | $jacket: track, overcoat, mod ".triumph"; 85 | /* Multiple contexts and multiple values in a single jacket. 86 | If a jacket context matches any of the values the jacket will be output. 87 | $jacket: #{$jacket}; */ 88 | 89 | .cafe-race { 90 | /* Universal */ 91 | font-size: 1rem; 92 | 93 | /* jacket(track, tie, suit) */ 94 | @include jacket(track, tie, suit) { 95 | position: absolute; 96 | } 97 | /* jacket(suit, mod, overcoat) */ 98 | @include jacket(suit, mod, overcoat) { 99 | top: 3em; 100 | } 101 | /* jacket(leather) */ 102 | @include jacket(leather) { 103 | position: fixed; 104 | } 105 | } 106 | 107 | $jacket: build-1, build-1-a; 108 | /* Conditional logic with nested jackets. 109 | You can create 'and' logic by nesting jackets. 110 | $jacket: #{$jacket}; */ 111 | 112 | .soire { 113 | font-size: 1rem; 114 | 115 | /* jacket(build-1) { jacket(build-1-a) {} } */ 116 | @include jacket(build-1) { 117 | @include jacket(build-1-a) { 118 | background-image: url(titans.gif); 119 | } 120 | } 121 | /* jacket(build-1) { jacket(build-1-b) {} } */ 122 | @include jacket(build-1) { 123 | @include jacket(build-1-b) { 124 | background-image: url(zardoz.gif); 125 | } 126 | } 127 | } 128 | 129 | /* A simple media query fallback mixin built with jacket. */ 130 | @mixin jacket-mq($media-query) { 131 | @include jacket(queries) { 132 | @media #{$media-query} { 133 | @content; 134 | } 135 | } 136 | @include jacket(noqueries) { 137 | @content; 138 | } 139 | } 140 | 141 | $jacket: standards, queries; 142 | /* Output media queries 143 | $jacket: #{$jacket}; */ 144 | 145 | .casual { 146 | @include jacket-mq('(min-width: 30em) and (orientation: portrait)') { 147 | color: green; 148 | height: 0.5vh; 149 | } 150 | } 151 | 152 | $jacket: old-ie, noqueries; 153 | /* Output rules without queries (probably in their own stylesheet) 154 | $jacket: #{$jacket}; */ 155 | 156 | .casual { 157 | @include jacket-mq('(min-width: 30em) and (orientation: portrait)') { 158 | color: green; 159 | height: 0.5vh; 160 | } 161 | } 162 | 163 | $jacket: main-site, queries, noqueries ".lt-ie9"; 164 | /* Output media queries and wrapped rules without queries in the same stylesheet 165 | $jacket: #{$jacket}; */ 166 | 167 | .casual { 168 | @include jacket-mq('(min-width: 30em) and (orientation: portrait)') { 169 | color: green; 170 | height: 0.5vh; 171 | } 172 | } 173 | 174 | $jacket: space-theme; 175 | /* jacket() function. 176 | If a jacket context matches, the value will be output. 177 | $jacket: #{$jacket}; */ 178 | 179 | .container { 180 | background-color: #222; 181 | /* background-image: jacket(url(../universe-bg.png), space-theme); */ 182 | background-image: jacket(url(../universe-bg.png), space-theme); 183 | } 184 | 185 | $jacket: simple; 186 | /* $jacket: #{$jacket}; */ 187 | .container { 188 | background-color: #222; 189 | /* background-image: jacket(url(../universe-bg.png), space-theme); */ 190 | background-image: jacket(url(../universe-bg.png), space-theme); 191 | } 192 | --------------------------------------------------------------------------------