susy 2.0.0.beta.3 → 2.0.0.rc.1
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 +29 -29
- data/VERSION +1 -1
- data/docs/changelog.rst +32 -1
- data/sass/susy/_math.scss +1 -0
- data/sass/susy/language/_susy.scss +0 -2
- data/sass/susy/language/_susyone.scss +0 -4
- data/sass/susy/language/susy/_background.scss +31 -25
- data/sass/susy/language/susy/_bleed.scss +4 -4
- data/sass/susy/language/susy/_box-sizing.scss +1 -1
- data/sass/susy/language/susy/_container.scss +1 -1
- data/sass/susy/language/susy/_gallery.scss +2 -2
- data/sass/susy/language/susy/_gutters.scss +3 -3
- data/sass/susy/language/susy/_rows.scss +2 -2
- data/sass/susy/language/susy/_settings.scss +68 -116
- data/sass/susy/language/susy/_span.scss +2 -2
- data/sass/susy/language/susyone/_functions.scss +2 -2
- data/sass/susy/language/susyone/_grid.scss +5 -5
- data/sass/susy/math/_maps.scss +89 -0
- data/sass/susy/math/_settings.scss +51 -0
- data/sass/susy/math/_validation.scss +13 -7
- data/sass/susy/output/_float.scss +0 -1
- data/sass/susy/output/_shared.scss +3 -1
- data/sass/susy/output/_support.scss +9 -0
- data/sass/susy/output/float/_end.scss +11 -3
- data/sass/susy/output/float/_isolate.scss +10 -6
- data/sass/susy/output/float/_span.scss +10 -6
- data/sass/susy/output/shared/_background.scss +10 -20
- data/sass/susy/output/shared/_container.scss +7 -3
- data/sass/susy/output/shared/_margins.scss +6 -2
- data/sass/susy/output/shared/_output.scss +14 -0
- data/sass/susy/output/shared/_padding.scss +6 -2
- data/sass/susy/output/support/_background.scss +58 -0
- data/sass/susy/output/support/_box-sizing.scss +17 -0
- data/sass/susy/output/support/_clearfix.scss +18 -0
- data/sass/susy/output/support/_prefix.scss +19 -0
- data/sass/susy/output/support/_rem.scss +22 -0
- data/sass/susy/output/support/_support.scss +82 -0
- metadata +14 -14
- data/sass/susy/language/_shared.scss +0 -4
- data/sass/susy/language/shared/_maps.scss +0 -85
- data/sass/susy/language/susyone/_units.scss +0 -159
- data/sass/susy/output/float/_clearfix.scss +0 -15
- data/sass/susy/output/shared/_box-sizing.scss +0 -16
@@ -0,0 +1,58 @@
|
|
1
|
+
// Background Properties
|
2
|
+
// =====================
|
3
|
+
|
4
|
+
// Susy Background Image
|
5
|
+
// ---------------------
|
6
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
7
|
+
// - $image: <background-image>
|
8
|
+
@mixin susy-background-image(
|
9
|
+
$image
|
10
|
+
) {
|
11
|
+
@if susy-support(background-image, (mixin: background-image), $warn: false) {
|
12
|
+
@include background-image($image...);
|
13
|
+
} @else {
|
14
|
+
background-image: $image;
|
15
|
+
}
|
16
|
+
}
|
17
|
+
|
18
|
+
// Susy Background Size
|
19
|
+
// ---------------------
|
20
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
21
|
+
// - $image: <background-size>
|
22
|
+
@mixin susy-background-size(
|
23
|
+
$size
|
24
|
+
) {
|
25
|
+
@if susy-support(background-options, (mixin: background-size)) {
|
26
|
+
@include background-size($size);
|
27
|
+
} @else {
|
28
|
+
background-size: $size;
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
// Susy Background Origin
|
33
|
+
// ----------------------
|
34
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
35
|
+
// - $image: <background-origin>
|
36
|
+
@mixin susy-background-origin(
|
37
|
+
$origin
|
38
|
+
) {
|
39
|
+
@if susy-support(background-options, (mixin: background-origin)) {
|
40
|
+
@include background-origin($origin);
|
41
|
+
} @else {
|
42
|
+
background-origin: $origin;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
|
46
|
+
// Susy Background Clip
|
47
|
+
// --------------------
|
48
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
49
|
+
// - $image: <background-clip>
|
50
|
+
@mixin susy-background-clip(
|
51
|
+
$clip
|
52
|
+
) {
|
53
|
+
@if susy-support(background-options, (mixin: background-clip)) {
|
54
|
+
@include background-clip($clip);
|
55
|
+
} @else {
|
56
|
+
background-clip: $clip;
|
57
|
+
}
|
58
|
+
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// Box Sizing
|
2
|
+
// ==========
|
3
|
+
|
4
|
+
// Box Sizing
|
5
|
+
// ----------
|
6
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
7
|
+
// - $model: <box-sizing>
|
8
|
+
@mixin susy-box-sizing(
|
9
|
+
$model: content-box
|
10
|
+
) {
|
11
|
+
@if susy-support(box-sizing, (mixin: box-sizing), $warn: false) {
|
12
|
+
@include box-sizing($model);
|
13
|
+
} @else {
|
14
|
+
$prefix: (moz, webkit, official);
|
15
|
+
@include susy-prefix(box-sizing, $model, $prefix);
|
16
|
+
}
|
17
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// Susy Fallback Clearfix
|
2
|
+
// ======================
|
3
|
+
|
4
|
+
|
5
|
+
// Clearfix
|
6
|
+
// --------
|
7
|
+
// Check for an existing support mixin, or provide a simple fallback.
|
8
|
+
@mixin susy-clearfix {
|
9
|
+
@if susy-support(clearfix, (mixin: clearfix)) {
|
10
|
+
@include clearfix;
|
11
|
+
} @else {
|
12
|
+
&::after {
|
13
|
+
content: " ";
|
14
|
+
display: block;
|
15
|
+
clear: both;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
// Susy Prefix
|
2
|
+
// ===========
|
3
|
+
|
4
|
+
// Prefix
|
5
|
+
// ------
|
6
|
+
// Output simple prefixed properties.
|
7
|
+
// - $prop : <css property>
|
8
|
+
// - $val : <css value>
|
9
|
+
// - [$prefix] : <browser prefix list>
|
10
|
+
@mixin susy-prefix(
|
11
|
+
$prop,
|
12
|
+
$val,
|
13
|
+
$prefix: official
|
14
|
+
) {
|
15
|
+
@each $fix in $prefix {
|
16
|
+
$fix: if($fix == official or not $fix, $prop, '-#{$fix}-#{$prop}');
|
17
|
+
@include susy-rem($fix, $val);
|
18
|
+
}
|
19
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
// rem Support
|
2
|
+
// ===========
|
3
|
+
|
4
|
+
// rem
|
5
|
+
// ---
|
6
|
+
// Check for an existing support mixin, or output directly.
|
7
|
+
// - $prop : <css property>
|
8
|
+
// - $val : <css value>
|
9
|
+
@mixin susy-rem(
|
10
|
+
$prop,
|
11
|
+
$val
|
12
|
+
) {
|
13
|
+
$_reqs: (
|
14
|
+
variable: rem-with-px-fallback,
|
15
|
+
mixin: rem,
|
16
|
+
);
|
17
|
+
@if susy-support(rem, $_reqs, $warn: false) {
|
18
|
+
@include rem($prop, $val);
|
19
|
+
} @else {
|
20
|
+
#{$prop}: $val;
|
21
|
+
}
|
22
|
+
}
|
@@ -0,0 +1,82 @@
|
|
1
|
+
// Browser Support
|
2
|
+
// ===============
|
3
|
+
|
4
|
+
// Susy Support Defaults
|
5
|
+
// ---------------------
|
6
|
+
@include susy-defaults((
|
7
|
+
use-custom: (
|
8
|
+
clearfix: false,
|
9
|
+
background-image: true,
|
10
|
+
background-options: false,
|
11
|
+
box-sizing: true,
|
12
|
+
rem: true,
|
13
|
+
),
|
14
|
+
));
|
15
|
+
|
16
|
+
|
17
|
+
// Susy Support [mixin]
|
18
|
+
// --------------------
|
19
|
+
// Send property-value pairs to the proper support modules.
|
20
|
+
// - $prop : <css property>
|
21
|
+
// - $val : <css value>
|
22
|
+
@mixin susy-support(
|
23
|
+
$prop,
|
24
|
+
$val
|
25
|
+
) {
|
26
|
+
// Background Support
|
27
|
+
@if $prop == background-image {
|
28
|
+
@include susy-background-image($val);
|
29
|
+
} @else if $prop == background-size {
|
30
|
+
@include susy-background-size($val);
|
31
|
+
} @else if $prop == background-origin {
|
32
|
+
@include susy-background-origin($val);
|
33
|
+
} @else if $prop == background-clip {
|
34
|
+
@include susy-background-clip($val);
|
35
|
+
}
|
36
|
+
|
37
|
+
// Box-Sizing Support
|
38
|
+
@else if $prop == box-sizing {
|
39
|
+
@include susy-box-sizing($val);
|
40
|
+
}
|
41
|
+
|
42
|
+
// Rem Support
|
43
|
+
@else {
|
44
|
+
@include susy-rem($prop, $val);
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
|
49
|
+
// Susy Support [function]
|
50
|
+
// -----------------------
|
51
|
+
// Check for support of a feature.
|
52
|
+
// - $feature : <string>
|
53
|
+
// - e.g "rem" or "box-sizing"
|
54
|
+
// - $requirements : <map>
|
55
|
+
// - e.g (variable: rem-with-px-fallback, mixin: rem)
|
56
|
+
// - $warn : <bool>
|
57
|
+
@function susy-support(
|
58
|
+
$feature,
|
59
|
+
$requirements: (),
|
60
|
+
$warn: true
|
61
|
+
) {
|
62
|
+
$_support: susy-get(use-custom $feature);
|
63
|
+
|
64
|
+
@if $_support {
|
65
|
+
$_fail: false;
|
66
|
+
|
67
|
+
@each $_type, $_req in $requirements {
|
68
|
+
$_pass: call(#{$_type}-exists, $_req);
|
69
|
+
|
70
|
+
@if not $_pass {
|
71
|
+
$_fail: true;
|
72
|
+
@if $warn {
|
73
|
+
@warn "You requested custom support of #{$feature}, but the #{$_req} #{$_type} is not available.";
|
74
|
+
}
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
$_support: if($_fail, false, $_support);
|
79
|
+
}
|
80
|
+
|
81
|
+
@return $_support;
|
82
|
+
}
|
metadata
CHANGED
@@ -1,17 +1,15 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: susy
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 2.0.0.
|
4
|
+
version: 2.0.0.rc.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Eric Meyer
|
8
|
-
- Mason Wendell
|
9
8
|
- Tsachi Shlidor
|
10
|
-
-
|
11
|
-
- Danny Palmer
|
9
|
+
- Aaron Gray
|
12
10
|
- Rachel Nabors
|
13
|
-
- Scott Kellum
|
14
11
|
- Jina Bolton
|
12
|
+
- Danny Palmer
|
15
13
|
autorequire:
|
16
14
|
bindir: bin
|
17
15
|
cert_chain: []
|
@@ -35,13 +33,11 @@ description: Susy is a toolkit for building layouts of all types with a simple,
|
|
35
33
|
syntax.
|
36
34
|
email:
|
37
35
|
- eric@oddbird.net
|
38
|
-
- mason@zivtech.com
|
39
36
|
- tsi.shlidor@gmail.com
|
40
|
-
-
|
41
|
-
- danny@dannyprose.com
|
37
|
+
- aaron@hellometa.com
|
42
38
|
- rachelnabors@gmail.com
|
43
|
-
- scott@scottkellum.com
|
44
39
|
- jina@sushiandrobots.com
|
40
|
+
- danny@dannyprose.com
|
45
41
|
executables: []
|
46
42
|
extensions: []
|
47
43
|
extra_rdoc_files:
|
@@ -55,10 +51,8 @@ files:
|
|
55
51
|
- sass/_susy.scss
|
56
52
|
- sass/_susyone.scss
|
57
53
|
- sass/susy/_math.scss
|
58
|
-
- sass/susy/language/_shared.scss
|
59
54
|
- sass/susy/language/_susy.scss
|
60
55
|
- sass/susy/language/_susyone.scss
|
61
|
-
- sass/susy/language/shared/_maps.scss
|
62
56
|
- sass/susy/language/susy/_background.scss
|
63
57
|
- sass/susy/language/susy/_bleed.scss
|
64
58
|
- sass/susy/language/susy/_box-sizing.scss
|
@@ -82,23 +76,29 @@ files:
|
|
82
76
|
- sass/susy/language/susyone/_media.scss
|
83
77
|
- sass/susy/language/susyone/_padding.scss
|
84
78
|
- sass/susy/language/susyone/_settings.scss
|
85
|
-
- sass/susy/language/susyone/_units.scss
|
86
79
|
- sass/susy/math/_columns.scss
|
80
|
+
- sass/susy/math/_maps.scss
|
87
81
|
- sass/susy/math/_settings.scss
|
88
82
|
- sass/susy/math/_validation.scss
|
89
83
|
- sass/susy/output/_float.scss
|
90
84
|
- sass/susy/output/_shared.scss
|
91
|
-
- sass/susy/output/
|
85
|
+
- sass/susy/output/_support.scss
|
92
86
|
- sass/susy/output/float/_container.scss
|
93
87
|
- sass/susy/output/float/_end.scss
|
94
88
|
- sass/susy/output/float/_isolate.scss
|
95
89
|
- sass/susy/output/float/_span.scss
|
96
90
|
- sass/susy/output/shared/_background.scss
|
97
|
-
- sass/susy/output/shared/_box-sizing.scss
|
98
91
|
- sass/susy/output/shared/_container.scss
|
99
92
|
- sass/susy/output/shared/_direction.scss
|
100
93
|
- sass/susy/output/shared/_margins.scss
|
94
|
+
- sass/susy/output/shared/_output.scss
|
101
95
|
- sass/susy/output/shared/_padding.scss
|
96
|
+
- sass/susy/output/support/_background.scss
|
97
|
+
- sass/susy/output/support/_box-sizing.scss
|
98
|
+
- sass/susy/output/support/_clearfix.scss
|
99
|
+
- sass/susy/output/support/_prefix.scss
|
100
|
+
- sass/susy/output/support/_rem.scss
|
101
|
+
- sass/susy/output/support/_support.scss
|
102
102
|
- templates/project/_base.scss
|
103
103
|
- templates/project/manifest.rb
|
104
104
|
- templates/project/screen.scss
|
@@ -1,85 +0,0 @@
|
|
1
|
-
// Map Toolkit
|
2
|
-
// ===========
|
3
|
-
|
4
|
-
// Truncate List
|
5
|
-
// -------------
|
6
|
-
// - Return a list, truncated to a given length
|
7
|
-
@function truncate-list(
|
8
|
-
$list,
|
9
|
-
$length
|
10
|
-
) {
|
11
|
-
$return: ();
|
12
|
-
|
13
|
-
@for $i from 1 through length($list) {
|
14
|
-
$return: if($i <= $length, append($return, nth($list, $i)), $return);
|
15
|
-
}
|
16
|
-
|
17
|
-
@return $return;
|
18
|
-
}
|
19
|
-
|
20
|
-
// Deep Get
|
21
|
-
// --------
|
22
|
-
// - Return a value deep in nested maps
|
23
|
-
@function deep-get(
|
24
|
-
$map,
|
25
|
-
$keys...
|
26
|
-
) {
|
27
|
-
$return: $map;
|
28
|
-
|
29
|
-
@each $key in $keys {
|
30
|
-
@if type-of($return) == map {
|
31
|
-
$return: map-get($return, $key);
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
@return $return;
|
36
|
-
}
|
37
|
-
|
38
|
-
// Deep Set
|
39
|
-
// --------
|
40
|
-
// - Set a value deep in nested maps
|
41
|
-
@function deep-set(
|
42
|
-
$map,
|
43
|
-
$keys,
|
44
|
-
$value
|
45
|
-
) {
|
46
|
-
$length: length($keys);
|
47
|
-
$return: ();
|
48
|
-
|
49
|
-
@for $i from 1 through $length {
|
50
|
-
$n: 0 - $i;
|
51
|
-
$level: truncate-list($keys, $length + $n);
|
52
|
-
$level: deep-get($map, $level...);
|
53
|
-
$merge: (nth($keys, $n): $value);
|
54
|
-
$value: if($level, map-merge($level, $merge), $merge);
|
55
|
-
$return: $value;
|
56
|
-
}
|
57
|
-
|
58
|
-
@return $return;
|
59
|
-
}
|
60
|
-
|
61
|
-
// Deep Has-Key
|
62
|
-
// ------------
|
63
|
-
// - Return true if a deep key exists
|
64
|
-
@function deep-has-key(
|
65
|
-
$map,
|
66
|
-
$keys...
|
67
|
-
) {
|
68
|
-
$return: null;
|
69
|
-
$break: false;
|
70
|
-
|
71
|
-
@each $key in $keys {
|
72
|
-
@if not $break {
|
73
|
-
$return: map-has-key($map, $key);
|
74
|
-
}
|
75
|
-
|
76
|
-
@if $return {
|
77
|
-
$map: map-get($map, $key);
|
78
|
-
} @else {
|
79
|
-
$break: true;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
|
83
|
-
@return $return;
|
84
|
-
}
|
85
|
-
|
@@ -1,159 +0,0 @@
|
|
1
|
-
// @private Default font-size for all browsers
|
2
|
-
$browser-default-font-size: 16px;
|
3
|
-
|
4
|
-
// Base font size in pixels, if not already defined.
|
5
|
-
// Should be the same as the font-size of the html element.
|
6
|
-
$base-font-size: 16px !default;
|
7
|
-
|
8
|
-
// Whether to output fallback values in px when outputting rems.
|
9
|
-
$rem-with-px-fallback: true !default;
|
10
|
-
|
11
|
-
// Convert any CSS <length> or <percentage> value to any another.
|
12
|
-
//
|
13
|
-
// @param $length
|
14
|
-
// A css <length> or <percentage> value
|
15
|
-
//
|
16
|
-
// @param $to-unit
|
17
|
-
// String matching a css unit keyword, e.g. 'em', '%', etc.
|
18
|
-
//
|
19
|
-
// @param $from-context
|
20
|
-
// When converting from relative units, the absolute length (in px) to
|
21
|
-
// which $length refers (e.g. for $lengths in em units, would normally be the
|
22
|
-
// font-size of the current element).
|
23
|
-
//
|
24
|
-
// @param $to-context
|
25
|
-
// For converting to relative units, the absolute length in px to which the
|
26
|
-
// output value will refer. Defaults to the same as $from-context, since it is
|
27
|
-
// rarely needed.
|
28
|
-
@function convert-length(
|
29
|
-
$length,
|
30
|
-
$to-unit,
|
31
|
-
$from-context: $base-font-size,
|
32
|
-
$to-context: $from-context
|
33
|
-
) {
|
34
|
-
|
35
|
-
$from-unit: unit($length);
|
36
|
-
|
37
|
-
// Optimize for cases where `from` and `to` units are accidentally the same.
|
38
|
-
@if $from-unit == $to-unit { @return $length; }
|
39
|
-
|
40
|
-
// Context values must be in px so we can determine a conversion ratio for
|
41
|
-
// relative units.
|
42
|
-
@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
|
43
|
-
@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
|
44
|
-
|
45
|
-
// Convert input length to pixels
|
46
|
-
$px-length: $length;
|
47
|
-
|
48
|
-
@if $from-unit != 'px' {
|
49
|
-
// Convert relative units using the from-context parameter.
|
50
|
-
@if $from-unit == 'em' { $px-length: $length * $from-context / 1em }
|
51
|
-
@else if $from-unit == 'rem' { $px-length: $length * $base-font-size / 1rem }
|
52
|
-
@else if $from-unit == '%' { $px-length: $length * $from-context / 100% }
|
53
|
-
@else if $from-unit == 'ex' { $px-length: $length * $from-context / 2ex }
|
54
|
-
// Convert absolute units using Sass' conversion table.
|
55
|
-
@else if $from-unit == 'in' or
|
56
|
-
$from-unit == 'mm' or
|
57
|
-
$from-unit == 'cm' or
|
58
|
-
$from-unit == 'pt' or
|
59
|
-
$from-unit == 'pc' { $px-length: 0px + $length }
|
60
|
-
// Certain units can't be converted.
|
61
|
-
@else if $from-unit == 'ch' or
|
62
|
-
$from-unit == 'vw' or
|
63
|
-
$from-unit == 'vh' or
|
64
|
-
$from-unit == 'vmin' {
|
65
|
-
@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
|
66
|
-
@return $length;
|
67
|
-
}
|
68
|
-
@else {
|
69
|
-
@warn "#{$from-unit} is an unknown length unit. Returning original value.";
|
70
|
-
@return $length;
|
71
|
-
}
|
72
|
-
}
|
73
|
-
|
74
|
-
// Convert length in pixels to the output unit
|
75
|
-
$output-length: $px-length;
|
76
|
-
@if $to-unit != 'px' {
|
77
|
-
// Relative units
|
78
|
-
@if $to-unit == 'em' { $output-length: $px-length * 1em / $to-context }
|
79
|
-
@else if $to-unit == 'rem' { $output-length: $px-length * 1rem / $base-font-size }
|
80
|
-
@else if $to-unit == '%' { $output-length: $px-length * 100% / $to-context }
|
81
|
-
@else if $to-unit == 'ex' { $output-length: $px-length * 2ex / $to-context }
|
82
|
-
// Absolute units
|
83
|
-
@else if $to-unit == 'in' { $output-length: 0in + $px-length }
|
84
|
-
@else if $to-unit == 'mm' { $output-length: 0mm + $px-length }
|
85
|
-
@else if $to-unit == 'cm' { $output-length: 0cm + $px-length }
|
86
|
-
@else if $to-unit == 'pt' { $output-length: 0pt + $px-length }
|
87
|
-
@else if $to-unit == 'pc' { $output-length: 0pc + $px-length }
|
88
|
-
// Non-convertible units
|
89
|
-
@else if $to-unit == 'ch' or
|
90
|
-
$to-unit == 'vw' or
|
91
|
-
$to-unit == 'vh' or
|
92
|
-
$to-unit == 'vmin' {
|
93
|
-
@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
|
94
|
-
@return $length;
|
95
|
-
}
|
96
|
-
@else {
|
97
|
-
@warn "#{$to-unit} is an unknown length unit. Returning original value.";
|
98
|
-
@return $length;
|
99
|
-
}
|
100
|
-
}
|
101
|
-
|
102
|
-
@return $output-length;
|
103
|
-
}
|
104
|
-
|
105
|
-
|
106
|
-
// Output a given style rule containing rem values along with an (optional)
|
107
|
-
// fallback rule for older browsers (with rem values converted to px).
|
108
|
-
//
|
109
|
-
// @param $property
|
110
|
-
// The css property name.
|
111
|
-
//
|
112
|
-
// @param $values
|
113
|
-
// The value (or space-separated list of values) for the property.
|
114
|
-
//
|
115
|
-
// @param $use-px-fallback
|
116
|
-
// [ true | false ]
|
117
|
-
//
|
118
|
-
@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
|
119
|
-
// Create a couple of empty lists as output buffers.
|
120
|
-
$px-values: ();
|
121
|
-
$rem-values: ();
|
122
|
-
|
123
|
-
// Loop through the $values list
|
124
|
-
@each $value in $values {
|
125
|
-
// For each property value, if it's in rem or px, derive both rem and
|
126
|
-
// px values for it and add those to the end of the appropriate buffer.
|
127
|
-
// Ensure all pixel values are rounded to the nearest pixel.
|
128
|
-
@if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
|
129
|
-
@if unit($value) == px {
|
130
|
-
$px-values: join($px-values, round($value));
|
131
|
-
$rem-values: join($rem-values, convert-length($value, rem));
|
132
|
-
}
|
133
|
-
@else {
|
134
|
-
$px-values: join($px-values, round(convert-length($value, px)));
|
135
|
-
$rem-values: join($rem-values, $value);
|
136
|
-
}
|
137
|
-
}
|
138
|
-
@else {
|
139
|
-
$px-values: join($px-values, $value);
|
140
|
-
$rem-values: join($rem-values, $value);
|
141
|
-
}
|
142
|
-
}
|
143
|
-
|
144
|
-
// Use pixel fallback for browsers that don't understand rem units.
|
145
|
-
@if $use-px-fallback {
|
146
|
-
#{$property}: $px-values;
|
147
|
-
}
|
148
|
-
|
149
|
-
// Use rem values for everyone else (overrides pixel values).
|
150
|
-
#{$property}: $rem-values;
|
151
|
-
}
|
152
|
-
|
153
|
-
@mixin if-rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
|
154
|
-
$has-rem: false;
|
155
|
-
@each $value in $values { $has-rem: if(unit($value) == 'rem', true, $has-rem); }
|
156
|
-
@if $has-rem { @include rem($property, $values, $use-px-fallback); }
|
157
|
-
@else { #{$property}: $values; }
|
158
|
-
}
|
159
|
-
|