support-for 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +50 -45
- data/package.json +1 -1
- data/support-for.gemspec +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 544b324c92e02ee62af2ef312160106a829f15c5
|
4
|
+
data.tar.gz: 5192e66c991ca863bd94f6046afafcdfd68b573a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 04ad519e630730be88ef99aba76f8b157c9a59d128b03e0584290ddbaad6a0d220bc044053e4484f24d4c7037e1a259130e20f83e8064cf7eabf732b8e3f247d
|
7
|
+
data.tar.gz: c87eeb3bc7dda033e83b5ff64b3fe45a81f9b72edf266bcd3d10425707e4db3bfb403a5684062744b36ce0d3c0ec811f86f370d83ca2d524fd474d27a663e20f
|
data/README.md
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
# support-for
|
2
2
|
|
3
|
-
The
|
3
|
+
The **support-for** module allows Sass authors to conditionally add support for specific browser versions to their Sass module or Sass partials.
|
4
4
|
|
5
5
|
[Autoprefixer](https://github.com/postcss/autoprefixer) is great for conditionally adding vendor prefixes, but sometimes you need more extensive CSS for specific versions of browsers. For example, adding px fallbacks to rem units when you need IE 8 support.
|
6
6
|
|
@@ -10,52 +10,52 @@ Here are some example usages:
|
|
10
10
|
|
11
11
|
1. The Sass author only wants to support Safari 8 and later (and no other browsers) because he is an asshole.
|
12
12
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
13
|
+
```scss
|
14
|
+
$support-for: (
|
15
|
+
safari: 8,
|
16
|
+
'*': null, // null means "no support" and is the
|
17
|
+
// default value for any browser not
|
18
|
+
// specified in $support-for
|
19
|
+
);
|
20
|
+
|
21
|
+
// Normalize-scss uses support-for to conditionally
|
22
|
+
// output CSS for old and new browsers.
|
23
|
+
@import "normalize";
|
24
|
+
```
|
25
25
|
|
26
26
|
2. The Sass author wants to support the 4 most recent versions of all browsers which she can do by setting the wildcard browser, `'*'`. She also has to support IE 6 and later because the client hates her.
|
27
27
|
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
28
|
+
```scss
|
29
|
+
$support-for: (
|
30
|
+
'*': -4,
|
31
|
+
ie: 6,
|
32
|
+
);
|
33
33
|
|
34
|
-
|
35
|
-
|
34
|
+
@import "normalize";
|
35
|
+
```
|
36
36
|
|
37
37
|
3. The Sass author is working for a government client and every browser version has a specific version specified in the contract.
|
38
38
|
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
39
|
+
```scss
|
40
|
+
$support-for: (
|
41
|
+
chrome: 29,
|
42
|
+
edge: 20,
|
43
|
+
firefox: 26,
|
44
|
+
ie: 8,
|
45
|
+
opera: 14,
|
46
|
+
safari: 5,
|
47
|
+
);
|
48
|
+
|
49
|
+
@import "normalize";
|
50
|
+
```
|
51
51
|
|
52
52
|
### Update your Sass partials to use `support-for()`
|
53
53
|
|
54
|
-
If a Sass module tells you that it uses
|
54
|
+
If a Sass module tells you that it uses **support-for**, you just need to override the default value of the `$support-for` variable before you import that module. See the examples above to see some of your options.
|
55
55
|
|
56
56
|
If, however, you want to conditionally include Sass in the stylesheets you author, you can update your Sass code to wrap those lines of Sass with an `@if` block that uses the `support-for()` function.
|
57
57
|
|
58
|
-
```
|
58
|
+
```scss
|
59
59
|
@mixin my-sweet-sweet-mixin($cocoa: lots) {
|
60
60
|
border-radius: 100%;
|
61
61
|
|
@@ -71,35 +71,40 @@ If you later drop support for IE 10 (someday!), you just need to update the
|
|
71
71
|
`$support-for` variable and your code will stop outputting the IE-10-specific
|
72
72
|
CSS.
|
73
73
|
|
74
|
-
## Updating your module to use
|
74
|
+
## Updating your module to use support-for
|
75
75
|
|
76
|
-
If you are a Sass module author wanting to use
|
77
|
-
quite easy to add it.
|
76
|
+
If you are a Sass module author wanting to use **support-for** in your module, it's
|
77
|
+
quite easy to add it as a dependency.
|
78
78
|
|
79
79
|
### Ruby Sass
|
80
80
|
|
81
81
|
Alter your `my-module.gemspec` file:
|
82
82
|
|
83
83
|
1. Find the line for your module's Sass dependency. It should look similar to this:
|
84
|
-
|
85
|
-
|
86
|
-
|
84
|
+
|
85
|
+
```ruby
|
86
|
+
spec.add_runtime_dependency('sass', '~> 3.3')
|
87
|
+
```
|
88
|
+
|
87
89
|
2. Just after that line, add this:
|
88
|
-
|
89
|
-
|
90
|
-
|
90
|
+
|
91
|
+
```ruby
|
92
|
+
spec.add_runtime_dependency('support-for', '~> 1.0')
|
93
|
+
```
|
91
94
|
|
92
95
|
### NPM (and node-sass)
|
93
96
|
|
94
97
|
Add your dependency with the following command:
|
95
|
-
|
98
|
+
|
99
|
+
```bash
|
96
100
|
npm install --save support-for
|
97
101
|
```
|
98
102
|
|
99
103
|
### Bower
|
100
104
|
|
101
105
|
Add your dependency with the following command:
|
102
|
-
|
106
|
+
|
107
|
+
```bash
|
103
108
|
bower install --save support-for
|
104
109
|
```
|
105
110
|
|
data/package.json
CHANGED
data/support-for.gemspec
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: support-for
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.
|
4
|
+
version: 1.0.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- John Albin Wilkins
|
@@ -57,7 +57,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
57
57
|
- !ruby/object:Gem::Version
|
58
58
|
version: '0'
|
59
59
|
requirements: []
|
60
|
-
rubyforge_project: 1.0.
|
60
|
+
rubyforge_project: 1.0.2
|
61
61
|
rubygems_version: 2.4.8
|
62
62
|
signing_key:
|
63
63
|
specification_version: 4
|