jacket 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/jacket.rb +33 -0
- data/readme.md +140 -0
- data/stylesheets/_jacket.scss +84 -0
- metadata +82 -0
data/lib/jacket.rb
ADDED
@@ -0,0 +1,33 @@
|
|
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 = "0.1.0"
|
8
|
+
DATE = "2013-05-20"
|
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
|
data/readme.md
ADDED
@@ -0,0 +1,140 @@
|
|
1
|
+
## Jacket
|
2
|
+
### Dress appropriately
|
3
|
+
|
4
|
+
Jacket helps orgainze your stylesheets for a multi-context build process.
|
5
|
+
Write and maintain a master stylesheet, then output custom tailored
|
6
|
+
stylesheets for specific browsers, mobile/desktop sites, and app builds.
|
7
|
+
|
8
|
+
### Usage
|
9
|
+
|
10
|
+
Write all code in a canonical stylesheet.
|
11
|
+
|
12
|
+
**style.scss**
|
13
|
+
|
14
|
+
```scss
|
15
|
+
.rainy {
|
16
|
+
// Universal rules
|
17
|
+
font-size: 1rem;
|
18
|
+
width: 90%;
|
19
|
+
|
20
|
+
// Styles for iOS only
|
21
|
+
@include jacket(ios) {
|
22
|
+
background-color: #c0ffee;
|
23
|
+
content: 'Double ristretto cortado, stat.';
|
24
|
+
}
|
25
|
+
// Styles for Android 2.x only
|
26
|
+
@include jacket(andr-2x) {
|
27
|
+
background-color: #baddad;
|
28
|
+
content: 'I should get a new phone.';
|
29
|
+
}
|
30
|
+
// Styles for ie8 only
|
31
|
+
@include jacket(ie8) {
|
32
|
+
background-color: #000;
|
33
|
+
content: 'Round three. FIGHT!';
|
34
|
+
}
|
35
|
+
}
|
36
|
+
```
|
37
|
+
|
38
|
+
Then create stylesheets for each build, and tell Jacket what the weather is.
|
39
|
+
|
40
|
+
**style.ios.scss**
|
41
|
+
|
42
|
+
```scss
|
43
|
+
// Set the weather
|
44
|
+
$jacket: ios;
|
45
|
+
@import 'style';
|
46
|
+
|
47
|
+
// Compiled result
|
48
|
+
.rainy {
|
49
|
+
font-size: 1rem;
|
50
|
+
width: 90%;
|
51
|
+
background-color: #c0ffee;
|
52
|
+
content: 'Double ristretto cortado, stat.';
|
53
|
+
}
|
54
|
+
```
|
55
|
+
|
56
|
+
**style.android-2x.scss**
|
57
|
+
|
58
|
+
```scss
|
59
|
+
// Set the weather
|
60
|
+
$jacket: andr-2x;
|
61
|
+
@import 'style';
|
62
|
+
|
63
|
+
// Compiled result
|
64
|
+
.rainy {
|
65
|
+
font-size: 1rem;
|
66
|
+
width: 90%;
|
67
|
+
background-color: #baddad;
|
68
|
+
content: 'I should get a new phone.';
|
69
|
+
}
|
70
|
+
```
|
71
|
+
|
72
|
+
**style.ie.scss**
|
73
|
+
|
74
|
+
```scss
|
75
|
+
// Set the weather
|
76
|
+
$jacket: ie8;
|
77
|
+
@import 'style';
|
78
|
+
|
79
|
+
// Compiled result
|
80
|
+
.rainy {
|
81
|
+
font-size: 1rem;
|
82
|
+
width: 90%;
|
83
|
+
background-color: #000;
|
84
|
+
content: 'Round three. FIGHT!';
|
85
|
+
}
|
86
|
+
```
|
87
|
+
|
88
|
+
You can set multiple comma separated contexts in `$jacket`.
|
89
|
+
|
90
|
+
**style.scss**
|
91
|
+
|
92
|
+
```scss
|
93
|
+
// Set the weather
|
94
|
+
$jacket: ios, andr-2x;
|
95
|
+
@import 'style';
|
96
|
+
|
97
|
+
// Compiled result (bad example, but you get the idea)
|
98
|
+
.rainy {
|
99
|
+
font-size: 1rem;
|
100
|
+
width: 90%;
|
101
|
+
background-color: #c0ffee;
|
102
|
+
content: 'Double ristretto cortado, stat.';
|
103
|
+
background-color: #baddad;
|
104
|
+
content: 'I should get a new phone.';
|
105
|
+
}
|
106
|
+
```
|
107
|
+
|
108
|
+
Or output a context wrapped in selectors, if that's your thing.
|
109
|
+
|
110
|
+
**style.scss**
|
111
|
+
|
112
|
+
```scss
|
113
|
+
// Set the weather. Make sure to surround your selector with quotes.
|
114
|
+
$jacket: ie8 '.ltie9';
|
115
|
+
@import 'style';
|
116
|
+
|
117
|
+
// Compiled result
|
118
|
+
.rainy {
|
119
|
+
font-size: 1rem;
|
120
|
+
width: 90%;
|
121
|
+
}
|
122
|
+
|
123
|
+
.ltie9 .rainy {
|
124
|
+
background-color: #000;
|
125
|
+
content: 'Round three. FIGHT!';
|
126
|
+
}
|
127
|
+
```
|
128
|
+
|
129
|
+
Complex Jacket contexts like `$jacket: mdot, ie7 '.ltie9', ie8 'ltie9'` work just fine.
|
130
|
+
|
131
|
+
### Strut your stuff
|
132
|
+
|
133
|
+
Now use a build process, conditional comments, or some fancy scripting to give each of your chosen environments a stylesheet made just for them. Not too much, not too little. Those stylesheets are lookin' good.
|
134
|
+
|
135
|
+
### Todo
|
136
|
+
|
137
|
+
1. Better documentation, including `jacket-context()` function.
|
138
|
+
2. Remove `lib` and Compass dependencies when `list-separator()` lands in Sass.
|
139
|
+
|
140
|
+
<small>*Thanks to [Breakpoint](https://github.com/Team-Sass/breakpoint), who's no-query functionality inspired this project.*</small>
|
@@ -0,0 +1,84 @@
|
|
1
|
+
///////////////////////////////////////////////////////////
|
2
|
+
// Jacket
|
3
|
+
// Dress appropriately
|
4
|
+
///////////////////////////////////////////////////////////
|
5
|
+
|
6
|
+
// Jacket helps you orgainze stylesheets for a multi-context build process.
|
7
|
+
// Write and maintain a master stylesheet, then output custom tailored
|
8
|
+
// stylesheets for specific browsers, mobile/desktop sites, and app builds.
|
9
|
+
|
10
|
+
// A list of jackets to print in the stylesheet.
|
11
|
+
$jacket: null !default;
|
12
|
+
|
13
|
+
// A private variable used by jacket-context().
|
14
|
+
$jacket-context: null;
|
15
|
+
|
16
|
+
///////////////////////////////////////////////////////////
|
17
|
+
// Jacket mixin
|
18
|
+
// Takes a list of jacket values.
|
19
|
+
///////////////////////////////////////////////////////////
|
20
|
+
@mixin jacket($args...) {
|
21
|
+
|
22
|
+
$naked: false;
|
23
|
+
$selectors: ();
|
24
|
+
$filtered: ();
|
25
|
+
$selector-string: '';
|
26
|
+
|
27
|
+
// Set the global $jacket-context variable.
|
28
|
+
$jacket-context: $args;
|
29
|
+
|
30
|
+
// If jacket is a single jacket value and selector list, encapsulate so it's
|
31
|
+
// sent through the next function in one piece.
|
32
|
+
@if list-separator($jacket) == 'space' {
|
33
|
+
$jacket: $jacket, null;
|
34
|
+
}
|
35
|
+
|
36
|
+
// Test if the stylesheet's $jacket variable and jacket mixin arguments match.
|
37
|
+
@each $item in $jacket {
|
38
|
+
@if index($args, nth($item, 1)) {
|
39
|
+
|
40
|
+
// Gather wrapping selectors.
|
41
|
+
@if length($item) == 1 {
|
42
|
+
$naked: true;
|
43
|
+
}
|
44
|
+
@if length($item) == 2 {
|
45
|
+
$selectors: append($selectors, nth($item, 2) + ' &');
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
// Filter out duplicate selectors. We can simplify if reject() is added to
|
51
|
+
// Sass.
|
52
|
+
@each $selector in $selectors {
|
53
|
+
@if index($filtered, $selector) == false {
|
54
|
+
$filtered: append($filtered, $selector);
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
// Build the selector string and output.
|
59
|
+
@each $selector in $filtered {
|
60
|
+
@if $selector-string != '' {
|
61
|
+
$selector-string: $selector-string + ", ";
|
62
|
+
}
|
63
|
+
$selector-string: $selector-string + $selector;
|
64
|
+
}
|
65
|
+
|
66
|
+
// If the weather is right, output that jacketed code!
|
67
|
+
@if $naked {
|
68
|
+
@content;
|
69
|
+
}
|
70
|
+
@if $selector-string != '' {
|
71
|
+
#{$selector-string} {
|
72
|
+
@content;
|
73
|
+
}
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
///////////////////////////////////////////////////////////
|
78
|
+
// Jacket Context function
|
79
|
+
// Takes a jacket value. Use when code inside a jacket
|
80
|
+
// needs to know if a specific jacket value is set.
|
81
|
+
///////////////////////////////////////////////////////////
|
82
|
+
@function jacket-context($arg) {
|
83
|
+
@return if(index($jacket-context, $arg), true, false);
|
84
|
+
}
|
metadata
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jacket
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Rob Wierzbowski
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2013-05-20 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sass
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 3.2.0
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 3.2.0
|
30
|
+
- !ruby/object:Gem::Dependency
|
31
|
+
name: compass
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: 0.12.2
|
38
|
+
type: :runtime
|
39
|
+
prerelease: false
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: 0.12.2
|
46
|
+
description: Manage multiple css builds from a single stylesheet
|
47
|
+
email:
|
48
|
+
- hello@robwierzbowski.com
|
49
|
+
executables: []
|
50
|
+
extensions: []
|
51
|
+
extra_rdoc_files: []
|
52
|
+
files:
|
53
|
+
- readme.md
|
54
|
+
- lib/jacket.rb
|
55
|
+
- stylesheets/_jacket.scss
|
56
|
+
homepage: http://github.com/robwierzbowski/jacket
|
57
|
+
licenses: []
|
58
|
+
post_install_message:
|
59
|
+
rdoc_options: []
|
60
|
+
require_paths:
|
61
|
+
- lib
|
62
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
63
|
+
none: false
|
64
|
+
requirements:
|
65
|
+
- - ! '>='
|
66
|
+
- !ruby/object:Gem::Version
|
67
|
+
version: '0'
|
68
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
69
|
+
none: false
|
70
|
+
requirements:
|
71
|
+
- - ! '>='
|
72
|
+
- !ruby/object:Gem::Version
|
73
|
+
version: '1.2'
|
74
|
+
requirements: []
|
75
|
+
rubyforge_project: jacket
|
76
|
+
rubygems_version: 1.8.24
|
77
|
+
signing_key:
|
78
|
+
specification_version: 3
|
79
|
+
summary: Jacket helps orgainze your stylesheets for a multi-context build process.
|
80
|
+
Write and maintain a master stylesheet, then output custom tailored stylesheets
|
81
|
+
for specific browsers, mobile/desktop sites, and app builds.
|
82
|
+
test_files: []
|