compass-placeholders 1.0.0.rc.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +6 -0
- data/Gemfile +4 -0
- data/MIT-LICENSE.md +11 -0
- data/README.md +237 -0
- data/Rakefile +82 -0
- data/compass-placeholders.gemspec +22 -0
- data/lib/compass-placeholders.rb +9 -0
- data/lib/compass-placeholders/version.rb +3 -0
- data/stylesheets/_compass-placeholders.scss +4 -0
- data/stylesheets/compass-placeholders/_css3.scss +11 -0
- data/stylesheets/compass-placeholders/_typography.scss +5 -0
- data/stylesheets/compass-placeholders/_utilities.scss +4 -0
- data/stylesheets/compass-placeholders/css3/_appearance.scss +7 -0
- data/stylesheets/compass-placeholders/css3/_backface-visibility.scss +8 -0
- data/stylesheets/compass-placeholders/css3/_background-clip.scss +7 -0
- data/stylesheets/compass-placeholders/css3/_background-origin.scss +7 -0
- data/stylesheets/compass-placeholders/css3/_border-radius.scss +9 -0
- data/stylesheets/compass-placeholders/css3/_box-shadow.scss +4 -0
- data/stylesheets/compass-placeholders/css3/_box-sizing.scss +8 -0
- data/stylesheets/compass-placeholders/css3/_box.scss +45 -0
- data/stylesheets/compass-placeholders/css3/_opacity.scss +16 -0
- data/stylesheets/compass-placeholders/css3/_transform-style.scss +8 -0
- data/stylesheets/compass-placeholders/css3/_user-select.scss +10 -0
- data/stylesheets/compass-placeholders/typography/_base.scss +32 -0
- data/stylesheets/compass-placeholders/typography/_hover-link.scss +4 -0
- data/stylesheets/compass-placeholders/typography/_lists.scss +12 -0
- data/stylesheets/compass-placeholders/typography/_text.scss +20 -0
- data/stylesheets/compass-placeholders/typography/_unstyled-link.scss +4 -0
- data/stylesheets/compass-placeholders/utilities/_clearfix.scss +8 -0
- data/stylesheets/compass-placeholders/utilities/_cursor.scss +8 -0
- data/stylesheets/compass-placeholders/utilities/_display.scss +8 -0
- data/stylesheets/compass-placeholders/utilities/_resets.scss +16 -0
- data/test/integration/css3/appearance.scss.test +12 -0
- data/test/integration/css3/backface-visibility.scss +12 -0
- data/test/integration/css3/background-clip.scss.test +12 -0
- data/test/integration/css3/border-origin.scss.test +12 -0
- data/test/integration/css3/border-radius.scss.test +22 -0
- data/test/integration/css3/box-shadow.scss.test +12 -0
- data/test/integration/css3/box-sizing.scss.test +12 -0
- data/test/integration/css3/box.scss.test +37 -0
- data/test/integration/css3/opacity.scss.test +15 -0
- data/test/integration/css3/transform-style.scss.test +12 -0
- data/test/integration/css3/user-select.scss.test +12 -0
- data/test/integration/scss_test.rb +50 -0
- data/test/integration/typography/base.scss.test +27 -0
- data/test/integration/typography/hover-link.scss.test +15 -0
- data/test/integration/typography/lists.scss.test +4 -0
- data/test/integration/typography/text.scss.test +4 -0
- data/test/integration/typography/unstyled-link.scss.test +4 -0
- data/test/integration/utilities/clearfix.scss.test +13 -0
- data/test/integration/utilities/cursor.scss.test +12 -0
- data/test/integration/utilities/display.scss.test +12 -0
- data/test/integration/utilities/resets.scss.test +27 -0
- data/test/test_helper.rb +4 -0
- metadata +135 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: e314a755de76212de121bd8dc8b0d35382655aa0
|
4
|
+
data.tar.gz: 2ae6fbbe68518e1e39d610589dfe1fe0003f77e3
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 4579465f3e78702bd807329ee5b1ddb5c7564bb99b78605b5e88e53f9167defe44eeaa3e6214913e4e084b623c1911ce70343ee4d7acd2e093d8bd749671c45a
|
7
|
+
data.tar.gz: 25d45db2ebe6a5a700f687767219bc03b14fde2d2f3f0a9d6b66fbbe20ec6b38749081bab4bba820e5c717f338783f11bd03cfd9b841a699af5226c12645c5ef
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/MIT-LICENSE.md
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
Copyright (c) 2012 Nico Hagenburger
|
2
|
+
|
3
|
+
http://www.hagenburger.net
|
4
|
+
http://twitter.com/hagenburger
|
5
|
+
http://github.com/hagenburger
|
6
|
+
|
7
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
8
|
+
|
9
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
10
|
+
|
11
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,237 @@
|
|
1
|
+
Compass Placeholders
|
2
|
+
====================
|
3
|
+
|
4
|
+
@extendable %placeholders for common CSS3 code provided by Compass. For example use `@extend %hide-text;` instead of `@include hide-text;` this
|
5
|
+
|
6
|
+
* obiously reduces the file size of the CSS
|
7
|
+
* and speeds up rendering. Read [‘Different CSS techniques and their performance’](http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/) for details.
|
8
|
+
|
9
|
+
|
10
|
+
Example: hover-link
|
11
|
+
-------------------
|
12
|
+
|
13
|
+
Traditional way via [Compass](http://compass-style.org/):
|
14
|
+
|
15
|
+
a.first-link {
|
16
|
+
@include hover-link;
|
17
|
+
}
|
18
|
+
|
19
|
+
a.second-link {
|
20
|
+
@include hover-link;
|
21
|
+
}
|
22
|
+
|
23
|
+
Result:
|
24
|
+
|
25
|
+
a.first-link {
|
26
|
+
text-decoration: none;
|
27
|
+
}
|
28
|
+
|
29
|
+
a.first-link:hover {
|
30
|
+
text-decoration: underline;
|
31
|
+
}
|
32
|
+
|
33
|
+
a.second-link {
|
34
|
+
text-decoration: none;
|
35
|
+
}
|
36
|
+
|
37
|
+
a.second-link:hover {
|
38
|
+
text-decoration: underline;
|
39
|
+
}
|
40
|
+
|
41
|
+
----
|
42
|
+
|
43
|
+
Optimized way via **Compass Placeholders:**
|
44
|
+
|
45
|
+
a.first-link {
|
46
|
+
@extend %hover-link;
|
47
|
+
}
|
48
|
+
|
49
|
+
a.second-link {
|
50
|
+
@extend %hover-link;
|
51
|
+
}
|
52
|
+
|
53
|
+
Result (DRY – don’t repeat yourself):
|
54
|
+
|
55
|
+
a.first-link,
|
56
|
+
a.second-link {
|
57
|
+
text-decoration: none;
|
58
|
+
}
|
59
|
+
|
60
|
+
a.first-link:hover,
|
61
|
+
a.second-link:hover {
|
62
|
+
text-decoration: underline;
|
63
|
+
}
|
64
|
+
|
65
|
+
|
66
|
+
Compass CSS3 Placeholders
|
67
|
+
-------------------------
|
68
|
+
|
69
|
+
* **[Appearance](http://compass-style.org/reference/compass/css3/appearance/):**
|
70
|
+
* `@extend %appearance-none;`
|
71
|
+
* `@extend %appearance-normal;`
|
72
|
+
* `@extend %appearance-icon;`
|
73
|
+
* `@extend %appearance-window;`
|
74
|
+
* `@extend %appearance-button;`
|
75
|
+
* `@extend %appearance-menu;`
|
76
|
+
* `@extend %appearance-field;`
|
77
|
+
* Customize list by setting `$appearance-placeholders: none, normal;`
|
78
|
+
|
79
|
+
* **[Background clip](http://compass-style.org/reference/compass/css3/background_clip/):**
|
80
|
+
* `@extend %background-clip-padding-box;`
|
81
|
+
* `@extend %background-clip-border-box;`
|
82
|
+
* `@extend %background-clip-text;`
|
83
|
+
* Customize list by setting `$background-clip-placeholders: padding-box, border-box;`
|
84
|
+
|
85
|
+
* **[Background origin](http://compass-style.org/reference/compass/css3/background_origin/):**
|
86
|
+
* `@extend %background-origin-padding-box;`
|
87
|
+
* `@extend %background-origin-border-box;`
|
88
|
+
* `@extend %background-origin-content-box;`
|
89
|
+
|
90
|
+
* **[Border radius](http://compass-style.org/reference/compass/css3/border_radius/):**
|
91
|
+
* `@extend %no-border-radius;` (equals border-radius: 0)
|
92
|
+
* Create placeholders for `border-radius` by setting `$border-radius-placeholders: 0, 3px, 10px;` which results in:
|
93
|
+
* `@extend %border-radius-0;`
|
94
|
+
* `@extend %border-radius-3px;`
|
95
|
+
* `@extend %border-radius-10px;`
|
96
|
+
|
97
|
+
You should prefer to use custom names like `%small-border-radius` and `%big-border-radius` over those listed above.
|
98
|
+
|
99
|
+
* **[Box](http://compass-style.org/reference/compass/css3/box/):**
|
100
|
+
* `@extend %display-box;`
|
101
|
+
* `@extend %box-orient-horizontal;`
|
102
|
+
* `@extend %box-orient-vertical;`
|
103
|
+
* `@extend %box-orient-inline-axis;`
|
104
|
+
* `@extend %box-orient-block-axis;`
|
105
|
+
* `@extend %box-orient-inherit;`
|
106
|
+
* `@extend %box-align-start;`
|
107
|
+
* `@extend %box-align-end;`
|
108
|
+
* `@extend %box-align-center;`
|
109
|
+
* `@extend %box-align-baseline;`
|
110
|
+
* `@extend %box-align-stretch;`
|
111
|
+
* `@extend %box-direction-normal;`
|
112
|
+
* `@extend %box-direction-reverse;`
|
113
|
+
* `@extend %box-direction-inherit;`
|
114
|
+
* `@extend %box-lines-single;`
|
115
|
+
* `@extend %box-lines-multiple;`
|
116
|
+
* `@extend %box-pack-start;`
|
117
|
+
* `@extend %box-pack-end;`
|
118
|
+
* `@extend %box-pack-center;`
|
119
|
+
* `@extend %box-pack-justify;`
|
120
|
+
* Customize lists by setting `$box-orient-placeholders`, `$box-align-placeholders`, `$box-direction-placeholders`, `$box-lines-placeholders` and `$box-pack-placeholders`.
|
121
|
+
* Create placeholders for `box-flex` by setting `$box-flex-placeholders: 0, 1;` which results in:
|
122
|
+
* `@extend %box-flex-0;`
|
123
|
+
* `@extend %box-flex-1;`
|
124
|
+
* Create placeholders for `box-flex-group` by setting `$box-flex-group-placeholders: 1, 2;` which results in:
|
125
|
+
* `@extend %box-flex-1;`
|
126
|
+
* `@extend %box-flex-2;`
|
127
|
+
* Create placeholders for `box-ordinal-group` by setting `$box-ordinal-group-placeholders: 1, 2;` which results in:
|
128
|
+
* `@extend %box-flex-1;`
|
129
|
+
* `@extend %box-flex-2;`
|
130
|
+
|
131
|
+
* **[Box shadow](http://compass-style.org/reference/compass/css3/box_shadow/):**
|
132
|
+
* `@extend %no-box-shadow;`
|
133
|
+
|
134
|
+
* **[Box sizing](http://compass-style.org/reference/compass/css3/box_sizing/):**
|
135
|
+
* `@extend %box-sizing-content-box;`
|
136
|
+
* `@extend %box-sizing-border-box;`
|
137
|
+
* Customize list by setting `$box-sizing-placeholders: border-box;`
|
138
|
+
|
139
|
+
* **[Opacity](http://compass-style.org/reference/compass/css3/opacity/):**
|
140
|
+
* `@extend %transparent;`
|
141
|
+
* `@extend %opaque;`
|
142
|
+
* Create placeholders for `opacity` by setting `$opacity-placeholders: 0.25, 0.5;` which results in:
|
143
|
+
* `@extend %opacity-25;`
|
144
|
+
* `@extend %opacity-50;`
|
145
|
+
|
146
|
+
* **[Text shadow](http://compass-style.org/reference/compass/css3/text-shadow/):**
|
147
|
+
* `@extend %no-text-shadow;`
|
148
|
+
|
149
|
+
* **[Transform](http://compass-style.org/reference/compass/css3/transform/):**
|
150
|
+
* `@extend %transform-style-flat;`
|
151
|
+
* `@extend %transform-style-preserve-3d;`
|
152
|
+
* `@extend %backface-visibility-visible;`
|
153
|
+
* `@extend %backface-visibility-hidden;`
|
154
|
+
|
155
|
+
* **[User interface](http://compass-style.org/reference/compass/css3/user_interface/):**
|
156
|
+
* `@extend %user-select-none;`
|
157
|
+
* `@extend %user-select-text;`
|
158
|
+
* `@extend %user-select-toggle;`
|
159
|
+
* `@extend %user-select-element;`
|
160
|
+
* `@extend %user-select-elements;`
|
161
|
+
* `@extend %user-select-all;`
|
162
|
+
* `@extend %user-select-inherit;`
|
163
|
+
* Customize list by setting `$user-select-placeholders: none, text;`
|
164
|
+
|
165
|
+
|
166
|
+
Compass Typography Placeholders
|
167
|
+
-------------------------------
|
168
|
+
|
169
|
+
* **[Links](http://compass-style.org/reference/compass/typography/links/):**
|
170
|
+
* `@extend %hover-link;`
|
171
|
+
* `@extend %unstyled-link;`
|
172
|
+
|
173
|
+
* **[Lists](http://compass-style.org/reference/compass/typography/lists/):**
|
174
|
+
* `@extend %no-bullet;`
|
175
|
+
* `@extend %no-bullets;`
|
176
|
+
|
177
|
+
* **[Inline list](http://compass-style.org/reference/compass/typography/lists/inline_list/):**
|
178
|
+
* `@extend %inline-list;`
|
179
|
+
|
180
|
+
* **[Text](http://compass-style.org/reference/compass/typography/text/):**
|
181
|
+
* `@extend %ellipsis;`
|
182
|
+
* `@extend %no-ellipsis;`
|
183
|
+
* `@extend %force-wrap;`
|
184
|
+
* `@extend %nowrap;`
|
185
|
+
* `@extend %hide-text;`
|
186
|
+
* `@extend %squish-text;`
|
187
|
+
|
188
|
+
|
189
|
+
Compass Utilities Placeholders
|
190
|
+
-------------------------------
|
191
|
+
|
192
|
+
* **[Clearfix](http://compass-style.org/reference/compass/utilities/general/clearfix/):**
|
193
|
+
* `@extend %clearfix;`
|
194
|
+
* `@extend %pie-clearfix;`
|
195
|
+
|
196
|
+
|
197
|
+
Non Compass-related Placeholders
|
198
|
+
-------------------------------
|
199
|
+
|
200
|
+
* **Resets:**
|
201
|
+
* `@extend %no-background;` (equals background: transparent)
|
202
|
+
* `@extend %no-border;` (equals border: 0)
|
203
|
+
* `@extend %no-margin;` (equals margin: 0)
|
204
|
+
* `@extend %no-padding;` (equals padding: 0)
|
205
|
+
|
206
|
+
* **Display:**
|
207
|
+
* `@extend %display-none;`
|
208
|
+
* `@extend %display-block;`
|
209
|
+
* `@extend %display-inline-block;`
|
210
|
+
* `@extend %display-table;`
|
211
|
+
* `@extend %display-table-cell;`
|
212
|
+
* `@extend %display-table-row;`
|
213
|
+
* Customize list by setting `$display-placeholders: none, block;`
|
214
|
+
|
215
|
+
* **Typography:**
|
216
|
+
* `@extend %font-weight-bold;`
|
217
|
+
* `@extend %font-weight-normal;`
|
218
|
+
* `@extend %font-style-italic;`
|
219
|
+
* `@extend %font-style-normal;`
|
220
|
+
* `@extend %text-decoration-underline;`
|
221
|
+
* `@extend %text-decoration-none;`
|
222
|
+
* `@extend %text-align-left;`
|
223
|
+
* `@extend %text-align-center;`
|
224
|
+
* `@extend %text-align-right;`
|
225
|
+
* `@extend %text-align-justify;`
|
226
|
+
|
227
|
+
* **User interface:**
|
228
|
+
* `@extend %cursor-default;`
|
229
|
+
* `@extend %cursor-pointer;`
|
230
|
+
|
231
|
+
|
232
|
+
Copyright
|
233
|
+
---------
|
234
|
+
|
235
|
+
Copyright (c) 2012 – 2013 [Nico Hagenburger](http://www.hagenburger.net).
|
236
|
+
See blob/master/MIT-LICENSE.md for details.
|
237
|
+
[Follow me](http://twitter.com/hagenburger) on twitter.
|
data/Rakefile
ADDED
@@ -0,0 +1,82 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
2
|
+
require 'rake/testtask'
|
3
|
+
|
4
|
+
Rake::TestTask.new :test do |t|
|
5
|
+
t.libs << 'lib'
|
6
|
+
t.libs << 'test'
|
7
|
+
test_files = FileList['test/**/*_test.rb']
|
8
|
+
t.test_files = test_files
|
9
|
+
t.verbose = true
|
10
|
+
end
|
11
|
+
|
12
|
+
task :add do
|
13
|
+
puts 'module/name: '
|
14
|
+
path, name = STDIN.gets.chomp.split('/')
|
15
|
+
puts 'placeholders: '
|
16
|
+
placeholders = STDIN.gets.chomp.strip.split(/[ ,]+/)
|
17
|
+
|
18
|
+
File.open "stylesheets/compass-placeholders/#{path}/_#{name}.scss", 'w' do |f|
|
19
|
+
if placeholders.empty?
|
20
|
+
f << <<-SCSS
|
21
|
+
%#{name} {
|
22
|
+
@include #{name};
|
23
|
+
}
|
24
|
+
|
25
|
+
SCSS
|
26
|
+
else
|
27
|
+
f << <<-SCSS
|
28
|
+
$#{name}-placeholders: #{placeholders.join(', ')} !default;
|
29
|
+
|
30
|
+
@each $property in $#{name}-placeholders {
|
31
|
+
%#{name}-\#{$property} {
|
32
|
+
@include #{name}($property);
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
SCSS
|
37
|
+
end
|
38
|
+
end
|
39
|
+
|
40
|
+
File.open "stylesheets/compass-placeholders/_#{path}.scss", 'a' do |f|
|
41
|
+
f << %Q(@import "#{path}/#{name}";\n)
|
42
|
+
end
|
43
|
+
|
44
|
+
if test_value = placeholders.first
|
45
|
+
File.open "test/integration/#{path}/#{name}.scss.test", 'w' do |f|
|
46
|
+
f << <<-SCSS
|
47
|
+
@import "compass-placeholders";
|
48
|
+
|
49
|
+
#test {
|
50
|
+
@extend %#{name}-#{test_value};
|
51
|
+
}
|
52
|
+
|
53
|
+
===
|
54
|
+
|
55
|
+
#test {
|
56
|
+
#{name}: #{test_value};
|
57
|
+
}
|
58
|
+
|
59
|
+
SCSS
|
60
|
+
end
|
61
|
+
else
|
62
|
+
File.open "test/integration/#{path}/#{name}.scss.test", 'w' do |f|
|
63
|
+
f << <<-SCSS
|
64
|
+
@import "compass-placeholders";
|
65
|
+
|
66
|
+
#test {
|
67
|
+
@extend %#{name};
|
68
|
+
}
|
69
|
+
|
70
|
+
===
|
71
|
+
|
72
|
+
#test {
|
73
|
+
|
74
|
+
}
|
75
|
+
|
76
|
+
SCSS
|
77
|
+
end
|
78
|
+
end
|
79
|
+
end
|
80
|
+
|
81
|
+
task :default => [:test]
|
82
|
+
|
@@ -0,0 +1,22 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "compass-placeholders/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "compass-placeholders"
|
7
|
+
s.version = CompassPlaceholders::VERSION
|
8
|
+
s.authors = ["Nico Hagenburger"]
|
9
|
+
s.email = ["nico@hagenburger.net"]
|
10
|
+
s.homepage = ""
|
11
|
+
s.summary = %q{@extendable %placeholders for common CSS3 code.}
|
12
|
+
s.description = %q{@extendable %placeholders for common CSS3 code provided by Compass. For example use `@extend %hide-text;` instead of `@include hide-text;` to save file size and speed up rendering.}
|
13
|
+
|
14
|
+
s.rubyforge_project = "compass-placeholders"
|
15
|
+
|
16
|
+
s.files = `git ls-files`.split("\n")
|
17
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
18
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
19
|
+
s.require_paths = ["lib"]
|
20
|
+
|
21
|
+
s.add_runtime_dependency "compass"
|
22
|
+
end
|
@@ -0,0 +1,11 @@
|
|
1
|
+
@import "css3/appearance";
|
2
|
+
@import "css3/background-clip";
|
3
|
+
@import "css3/background-origin";
|
4
|
+
@import "css3/border-radius";
|
5
|
+
@import "css3/box-shadow";
|
6
|
+
@import "css3/box-sizing";
|
7
|
+
@import "css3/transform-style";
|
8
|
+
@import "css3/backface-visibility";
|
9
|
+
@import "css3/user-select";
|
10
|
+
@import "css3/opacity";
|
11
|
+
@import "css3/box";
|
@@ -0,0 +1,45 @@
|
|
1
|
+
%display-box {
|
2
|
+
@include display-box;
|
3
|
+
}
|
4
|
+
|
5
|
+
$box-orient-placeholders: horizontal, vertical, inline-axis, block-axis,
|
6
|
+
inherit !default;
|
7
|
+
|
8
|
+
@each $property in $box-orient-placeholders {
|
9
|
+
%box-orient-#{$property} {
|
10
|
+
@include box-orient($property);
|
11
|
+
}
|
12
|
+
}
|
13
|
+
|
14
|
+
$box-align-placeholders: start, end, center, baseline, stretch !default;
|
15
|
+
|
16
|
+
@each $property in $box-align-placeholders {
|
17
|
+
%box-align-#{$property} {
|
18
|
+
@include box-align($property);
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
$box-direction-placeholders: normal, reverse, inherit !default;
|
23
|
+
|
24
|
+
@each $property in $box-direction-placeholders {
|
25
|
+
%box-direction-#{$property} {
|
26
|
+
@include box-direction($property);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
$box-lines-placeholders: single, multiple !default;
|
31
|
+
|
32
|
+
@each $property in $box-lines-placeholders {
|
33
|
+
%box-lines-#{$property} {
|
34
|
+
@include box-lines($property);
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
$box-pack-placeholders: start, end, center, justify !default;
|
39
|
+
|
40
|
+
@each $property in $box-pack-placeholders {
|
41
|
+
%box-pack-#{$property} {
|
42
|
+
@include box-pack($property);
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
@@ -0,0 +1,16 @@
|
|
1
|
+
$opacity-placeholders: 0, 0.5, 1 !default;
|
2
|
+
|
3
|
+
@each $property in $opacity-placeholders {
|
4
|
+
%opacity-#{$property * 100} {
|
5
|
+
@include opacity($property);
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
%transparent {
|
10
|
+
@extend %opacity-0;
|
11
|
+
}
|
12
|
+
|
13
|
+
%opaque {
|
14
|
+
@extend %opacity-100;
|
15
|
+
}
|
16
|
+
|
@@ -0,0 +1,32 @@
|
|
1
|
+
$font-weight-placeholders: normal, bold;
|
2
|
+
|
3
|
+
@each $property in $font-weight-placeholders {
|
4
|
+
%font-weight-#{$property} {
|
5
|
+
font-weight: $property;
|
6
|
+
}
|
7
|
+
}
|
8
|
+
|
9
|
+
$font-style-placeholders: normal, italic;
|
10
|
+
|
11
|
+
@each $property in $font-style-placeholders {
|
12
|
+
%font-style-#{$property} {
|
13
|
+
font-style: $property;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
|
17
|
+
$text-decoration-placeholders: none, underline;
|
18
|
+
|
19
|
+
@each $property in $text-decoration-placeholders {
|
20
|
+
%text-decoration-#{$property} {
|
21
|
+
text-decoration: $property;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
$text-align-placeholders: left, center, right, justify;
|
26
|
+
|
27
|
+
@each $property in $text-align-placeholders {
|
28
|
+
%text-align-#{$property} {
|
29
|
+
text-align: $property;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
@@ -0,0 +1,22 @@
|
|
1
|
+
$border-radius-placeholders: none, 5px;
|
2
|
+
|
3
|
+
@import "compass-placeholders";
|
4
|
+
|
5
|
+
#test-none {
|
6
|
+
@extend %border-radius-none;
|
7
|
+
}
|
8
|
+
|
9
|
+
#test-5px {
|
10
|
+
@extend %border-radius-5px;
|
11
|
+
}
|
12
|
+
|
13
|
+
===
|
14
|
+
|
15
|
+
#test-none {
|
16
|
+
border-radius: none;
|
17
|
+
}
|
18
|
+
|
19
|
+
#test-5px {
|
20
|
+
border-radius: 5px;
|
21
|
+
}
|
22
|
+
|
@@ -0,0 +1,37 @@
|
|
1
|
+
@import "compass-placeholders";
|
2
|
+
|
3
|
+
#test {
|
4
|
+
@extend %display-box;
|
5
|
+
@extend %box-orient-horizontal;
|
6
|
+
@extend %box-align-start;
|
7
|
+
@extend %box-direction-normal;
|
8
|
+
@extend %box-lines-single;
|
9
|
+
@extend %box-pack-start;
|
10
|
+
}
|
11
|
+
|
12
|
+
===
|
13
|
+
|
14
|
+
#test {
|
15
|
+
display: box;
|
16
|
+
}
|
17
|
+
|
18
|
+
#test {
|
19
|
+
box-orient: horizontal;
|
20
|
+
}
|
21
|
+
|
22
|
+
#test {
|
23
|
+
box-align: start;
|
24
|
+
}
|
25
|
+
|
26
|
+
#test {
|
27
|
+
box-direction: normal;
|
28
|
+
}
|
29
|
+
|
30
|
+
#test {
|
31
|
+
box-lines: single;
|
32
|
+
}
|
33
|
+
|
34
|
+
#test {
|
35
|
+
box-pack: start;
|
36
|
+
}
|
37
|
+
|
@@ -0,0 +1,50 @@
|
|
1
|
+
require 'test_helper'
|
2
|
+
require 'fileutils'
|
3
|
+
require 'compass'
|
4
|
+
require 'compass/logger'
|
5
|
+
require 'sass/plugin'
|
6
|
+
|
7
|
+
class VariablesImporterTest < Test::Unit::TestCase
|
8
|
+
|
9
|
+
def setup
|
10
|
+
Compass.configure_sass_plugin!
|
11
|
+
end
|
12
|
+
|
13
|
+
def render(scss)
|
14
|
+
options = Compass.sass_engine_options
|
15
|
+
options[:line_comments] = false
|
16
|
+
options[:style] = :expanded
|
17
|
+
options[:syntax] = :scss
|
18
|
+
options[:compass] ||= {}
|
19
|
+
options[:compass][:logger] ||= Compass::NullLogger.new
|
20
|
+
Sass::Engine.new(scss, options).render.strip
|
21
|
+
end
|
22
|
+
|
23
|
+
def get_test(file)
|
24
|
+
content = File.read(file)
|
25
|
+
input, output = content.split(/===+/)
|
26
|
+
[input.strip, output.strip]
|
27
|
+
end
|
28
|
+
|
29
|
+
Dir.glob File.join(File.dirname(__FILE__), '**/*.scss.test') do |file|
|
30
|
+
basename = File.basename(file, '.scss.test')
|
31
|
+
self.class_eval <<-RUBY
|
32
|
+
def test_#{basename.gsub('-', '_')}
|
33
|
+
input, output = get_test("#{file}")
|
34
|
+
|
35
|
+
css = render <<-SCSS
|
36
|
+
$experimental-support-for-mozilla : false !default;
|
37
|
+
$experimental-support-for-webkit : false !default;
|
38
|
+
$experimental-support-for-opera : false !default;
|
39
|
+
$experimental-support-for-microsoft : false !default;
|
40
|
+
$experimental-support-for-khtml : false !default;
|
41
|
+
@import "compass";
|
42
|
+
\#{input}
|
43
|
+
SCSS
|
44
|
+
|
45
|
+
assert_equal output, css
|
46
|
+
end
|
47
|
+
RUBY
|
48
|
+
end
|
49
|
+
end
|
50
|
+
|
@@ -0,0 +1,27 @@
|
|
1
|
+
@import "compass-placeholders";
|
2
|
+
|
3
|
+
#test {
|
4
|
+
@extend %font-weight-bold;
|
5
|
+
@extend %font-style-italic;
|
6
|
+
@extend %text-decoration-underline;
|
7
|
+
@extend %text-align-right;
|
8
|
+
}
|
9
|
+
|
10
|
+
===
|
11
|
+
|
12
|
+
#test {
|
13
|
+
font-weight: bold;
|
14
|
+
}
|
15
|
+
|
16
|
+
#test {
|
17
|
+
font-style: italic;
|
18
|
+
}
|
19
|
+
|
20
|
+
#test {
|
21
|
+
text-decoration: underline;
|
22
|
+
}
|
23
|
+
|
24
|
+
#test {
|
25
|
+
text-align: right;
|
26
|
+
}
|
27
|
+
|
@@ -0,0 +1,27 @@
|
|
1
|
+
@import "compass-placeholders";
|
2
|
+
|
3
|
+
#test {
|
4
|
+
@extend %no-background;
|
5
|
+
@extend %no-border;
|
6
|
+
@extend %no-margin;
|
7
|
+
@extend %no-padding;
|
8
|
+
}
|
9
|
+
|
10
|
+
===
|
11
|
+
|
12
|
+
#test {
|
13
|
+
background: transparent;
|
14
|
+
}
|
15
|
+
|
16
|
+
#test {
|
17
|
+
border: 0;
|
18
|
+
}
|
19
|
+
|
20
|
+
#test {
|
21
|
+
margin: 0;
|
22
|
+
}
|
23
|
+
|
24
|
+
#test {
|
25
|
+
padding: 0;
|
26
|
+
}
|
27
|
+
|
data/test/test_helper.rb
ADDED
metadata
ADDED
@@ -0,0 +1,135 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: compass-placeholders
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0.rc.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Nico Hagenburger
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2013-10-13 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: compass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - '>='
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - '>='
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
27
|
+
description: '@extendable %placeholders for common CSS3 code provided by Compass.
|
28
|
+
For example use `@extend %hide-text;` instead of `@include hide-text;` to save file
|
29
|
+
size and speed up rendering.'
|
30
|
+
email:
|
31
|
+
- nico@hagenburger.net
|
32
|
+
executables: []
|
33
|
+
extensions: []
|
34
|
+
extra_rdoc_files: []
|
35
|
+
files:
|
36
|
+
- .gitignore
|
37
|
+
- Gemfile
|
38
|
+
- MIT-LICENSE.md
|
39
|
+
- README.md
|
40
|
+
- Rakefile
|
41
|
+
- compass-placeholders.gemspec
|
42
|
+
- lib/compass-placeholders.rb
|
43
|
+
- lib/compass-placeholders/version.rb
|
44
|
+
- stylesheets/_compass-placeholders.scss
|
45
|
+
- stylesheets/compass-placeholders/_css3.scss
|
46
|
+
- stylesheets/compass-placeholders/_typography.scss
|
47
|
+
- stylesheets/compass-placeholders/_utilities.scss
|
48
|
+
- stylesheets/compass-placeholders/css3/_appearance.scss
|
49
|
+
- stylesheets/compass-placeholders/css3/_backface-visibility.scss
|
50
|
+
- stylesheets/compass-placeholders/css3/_background-clip.scss
|
51
|
+
- stylesheets/compass-placeholders/css3/_background-origin.scss
|
52
|
+
- stylesheets/compass-placeholders/css3/_border-radius.scss
|
53
|
+
- stylesheets/compass-placeholders/css3/_box-shadow.scss
|
54
|
+
- stylesheets/compass-placeholders/css3/_box-sizing.scss
|
55
|
+
- stylesheets/compass-placeholders/css3/_box.scss
|
56
|
+
- stylesheets/compass-placeholders/css3/_opacity.scss
|
57
|
+
- stylesheets/compass-placeholders/css3/_transform-style.scss
|
58
|
+
- stylesheets/compass-placeholders/css3/_user-select.scss
|
59
|
+
- stylesheets/compass-placeholders/typography/_base.scss
|
60
|
+
- stylesheets/compass-placeholders/typography/_hover-link.scss
|
61
|
+
- stylesheets/compass-placeholders/typography/_lists.scss
|
62
|
+
- stylesheets/compass-placeholders/typography/_text.scss
|
63
|
+
- stylesheets/compass-placeholders/typography/_unstyled-link.scss
|
64
|
+
- stylesheets/compass-placeholders/utilities/_clearfix.scss
|
65
|
+
- stylesheets/compass-placeholders/utilities/_cursor.scss
|
66
|
+
- stylesheets/compass-placeholders/utilities/_display.scss
|
67
|
+
- stylesheets/compass-placeholders/utilities/_resets.scss
|
68
|
+
- test/integration/css3/appearance.scss.test
|
69
|
+
- test/integration/css3/backface-visibility.scss
|
70
|
+
- test/integration/css3/background-clip.scss.test
|
71
|
+
- test/integration/css3/border-origin.scss.test
|
72
|
+
- test/integration/css3/border-radius.scss.test
|
73
|
+
- test/integration/css3/box-shadow.scss.test
|
74
|
+
- test/integration/css3/box-sizing.scss.test
|
75
|
+
- test/integration/css3/box.scss.test
|
76
|
+
- test/integration/css3/opacity.scss.test
|
77
|
+
- test/integration/css3/transform-style.scss.test
|
78
|
+
- test/integration/css3/user-select.scss.test
|
79
|
+
- test/integration/scss_test.rb
|
80
|
+
- test/integration/typography/base.scss.test
|
81
|
+
- test/integration/typography/hover-link.scss.test
|
82
|
+
- test/integration/typography/lists.scss.test
|
83
|
+
- test/integration/typography/text.scss.test
|
84
|
+
- test/integration/typography/unstyled-link.scss.test
|
85
|
+
- test/integration/utilities/clearfix.scss.test
|
86
|
+
- test/integration/utilities/cursor.scss.test
|
87
|
+
- test/integration/utilities/display.scss.test
|
88
|
+
- test/integration/utilities/resets.scss.test
|
89
|
+
- test/test_helper.rb
|
90
|
+
homepage: ''
|
91
|
+
licenses: []
|
92
|
+
metadata: {}
|
93
|
+
post_install_message:
|
94
|
+
rdoc_options: []
|
95
|
+
require_paths:
|
96
|
+
- lib
|
97
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
98
|
+
requirements:
|
99
|
+
- - '>='
|
100
|
+
- !ruby/object:Gem::Version
|
101
|
+
version: '0'
|
102
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
103
|
+
requirements:
|
104
|
+
- - '>'
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
version: 1.3.1
|
107
|
+
requirements: []
|
108
|
+
rubyforge_project: compass-placeholders
|
109
|
+
rubygems_version: 2.0.6
|
110
|
+
signing_key:
|
111
|
+
specification_version: 4
|
112
|
+
summary: '@extendable %placeholders for common CSS3 code.'
|
113
|
+
test_files:
|
114
|
+
- test/integration/css3/appearance.scss.test
|
115
|
+
- test/integration/css3/backface-visibility.scss
|
116
|
+
- test/integration/css3/background-clip.scss.test
|
117
|
+
- test/integration/css3/border-origin.scss.test
|
118
|
+
- test/integration/css3/border-radius.scss.test
|
119
|
+
- test/integration/css3/box-shadow.scss.test
|
120
|
+
- test/integration/css3/box-sizing.scss.test
|
121
|
+
- test/integration/css3/box.scss.test
|
122
|
+
- test/integration/css3/opacity.scss.test
|
123
|
+
- test/integration/css3/transform-style.scss.test
|
124
|
+
- test/integration/css3/user-select.scss.test
|
125
|
+
- test/integration/scss_test.rb
|
126
|
+
- test/integration/typography/base.scss.test
|
127
|
+
- test/integration/typography/hover-link.scss.test
|
128
|
+
- test/integration/typography/lists.scss.test
|
129
|
+
- test/integration/typography/text.scss.test
|
130
|
+
- test/integration/typography/unstyled-link.scss.test
|
131
|
+
- test/integration/utilities/clearfix.scss.test
|
132
|
+
- test/integration/utilities/cursor.scss.test
|
133
|
+
- test/integration/utilities/display.scss.test
|
134
|
+
- test/integration/utilities/resets.scss.test
|
135
|
+
- test/test_helper.rb
|