forked from oddbird/susy
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathb-api.html
94 lines (85 loc) · 27.3 KB
/
b-api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>susy Documentation</title><link href="assets/img/favicon.ico" rel="shortcut icon"><link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet"><link rel="stylesheet" href="assets/css/main.css"></head><body><svg xmlns="http://www.w3.org/2000/svg" hidden><symbol id="icon-menu" viewBox="0 0 24 28"><title>menu icon</title><path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/></symbol><symbol id="icon-search" viewBox="0 0 24 28"><title>search icon</title><path d="M24 21v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1v-2c0-.547.453-1 1-1h22c.547 0 1 .453 1 1zm0-8v2c0 .547-.453 1-1 1H1c-.547 0-1-.453-1-1V5c0-.547.453-1 1-1h22c.547 0 1 .453 1 1z"/></symbol></svg><div data-sassdoc-region="app"><header role="banner" data-sassdoc-region="banner"><button data-nav-toggle="small" data-toggle="button" aria-controls="nav-small" aria-pressed="false" data-toggle-synced="false"><svg data-icon="menu" data-icon-size="icon-small"><title>menu</title><use xlink:href="#icon-menu"/></svg></button> <button data-nav-toggle="large" data-toggle="button" aria-controls="nav-large" aria-pressed="true" data-toggle-synced="false"><svg data-icon="menu" data-icon-size="icon-small"><title>menu</title><use xlink:href="#icon-menu"/></svg></button><h1 data-sassdoc="project-title"><a href="index.html" rel="home" data-sassdoc="project-name">susy</a> <span data-sassdoc="project-version">3.0.1</span></h1></header><div data-sassdoc-region="container"><nav role="navigation" data-nav-menu="small" data-toggle="target" id="nav-small" data-target-id="nav-small" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false"><h3 data-sassdoc="nav-title"><a href="index.html" data-sassdoc-nav="is-not-active">susy</a></h3><ul><li data-sassdoc="nav-item"><a href="a-config.html" data-sassdoc-nav="is-not-active">Configuration</a></li><li data-sassdoc="nav-item"><a href="b-api.html" data-sassdoc-nav="is-active">Grid Functions</a></li><li data-sassdoc="nav-item"><a href="plugin-utils.html" data-sassdoc-nav="is-not-active">Plugin Utilities</a></li><li data-sassdoc="nav-item"><a href="plugin_svg-grid.html" data-sassdoc-nav="is-not-active">Plugin: SVG Grid Image</a></li><li data-sassdoc="nav-item"><a href="su-math.html" data-sassdoc-nav="is-not-active">Su: Core Math Engine</a></li><li data-sassdoc="nav-item"><a href="x-normal.html" data-sassdoc-nav="is-not-active">[Susy Normalization]</a></li><li data-sassdoc="nav-item"><a href="x-parser.html" data-sassdoc-nav="is-not-active">[Susy Syntax Parser]</a></li><li data-sassdoc="nav-item"><a href="x-validation.html" data-sassdoc-nav="is-not-active">[Su Input Validation]</a></li><li data-sassdoc="nav-item"><a href="x-version.html" data-sassdoc-nav="is-not-active">[Release Notes]</a></li></ul></nav><nav role="navigation" data-nav-menu="large" data-toggle="target" id="nav-large" data-target-id="nav-large" aria-expanded="true" data-auto-closing="false" data-auto-closing-on-any-click="false"><h3 data-sassdoc="nav-title"><a href="index.html" data-sassdoc-nav="is-not-active">susy</a></h3><ul><li data-sassdoc="nav-item"><a href="a-config.html" data-sassdoc-nav="is-not-active">Configuration</a></li><li data-sassdoc="nav-item"><a href="b-api.html" data-sassdoc-nav="is-active">Grid Functions</a></li><li data-sassdoc="nav-item"><a href="plugin-utils.html" data-sassdoc-nav="is-not-active">Plugin Utilities</a></li><li data-sassdoc="nav-item"><a href="plugin_svg-grid.html" data-sassdoc-nav="is-not-active">Plugin: SVG Grid Image</a></li><li data-sassdoc="nav-item"><a href="su-math.html" data-sassdoc-nav="is-not-active">Su: Core Math Engine</a></li><li data-sassdoc="nav-item"><a href="x-normal.html" data-sassdoc-nav="is-not-active">[Susy Normalization]</a></li><li data-sassdoc="nav-item"><a href="x-parser.html" data-sassdoc-nav="is-not-active">[Susy Syntax Parser]</a></li><li data-sassdoc="nav-item"><a href="x-validation.html" data-sassdoc-nav="is-not-active">[Su Input Validation]</a></li><li data-sassdoc="nav-item"><a href="x-version.html" data-sassdoc-nav="is-not-active">[Release Notes]</a></li></ul></nav><main role="main"><nav data-sassdoc-region="breadcrumb"><a href="index.html">susy</a> » <strong>Grid Functions</strong></nav><div data-sassdoc-region="main" data-sassdoc-page="b-api"><section class="item"><div data-item-section="prose" class="text-block"><h1 id="susy3-api-functions">Susy3 API Functions</h1><p>These three functions form the core of Susy's layout-building grid API.</p><ul><li>Use <code>span()</code> and <code>gutter()</code> to return any grid-width, and apply the results wherever you need them: CSS <code>width</code>, <code>margin</code>, <code>padding</code>, <code>flex-basis</code>, <code>transform</code>, etc.</li><li>For asymmetrical-fluid grids, <code>slice()</code> can help manage your nesting context.</li></ul><p>All three functions come with an unprefixed alias by default, using the <code>susy</code> import. Import the <code>susy-prefix</code> partial instead, if you only only want prefixed versions of the API.</p><p>This is a thin syntax-sugar shell around the "Su" core-math functions: <code>su-span</code>, <code>su-gutter</code>, and <code>su-slice</code>. If you prefer the more constrained syntax of the math engine, you are welcome to use those functions instead.</p></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="b-api.html#function--susy-span" class="item-name">susy-span()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="b-api.html#function--susy-gutter" class="item-name">susy-gutter()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="b-api.html#function--susy-slice" class="item-name">susy-slice()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-span" class="item-name">su-span()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-gutter" class="item-name">su-gutter()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-slice" class="item-name">su-slice()</a></h4></div></div></section><section class="item"><div data-item-section="prose" class="text-block"><h2 id="shorthand">Shorthand</h2><p>All functions draw on the same shorthand syntax in two parts, seperated by the word <code>of</code>.</p><h3 id="span-syntax-width-location-spread-">Span Syntax: <code><width></code> [<code><location></code> <code><spread></code>]</h3><p>The first part describes the <strong>span</strong> width, location, and spread in any order. Only the width is required:</p><ul><li><code>span(2)</code> will return the width of 2 columns.</li><li><code>span(3 wide)</code> will return 3-columns, with an additional gutter.</li><li>location is only needed with asymmetrical grids, where <code>span(3 at 2)</code> will return the width of specific columns on the grid. Since these are functions, they will not handle placement for you.</li></ul><h3 id="context-syntax-of-columns-container-spread-gutters-">Context Syntax: <code>[of <columns> <container-spread> <gutters>]</code></h3><p>The second half of Susy's shorthand describes the grid-<strong>context</strong> – available columns, container-spread, and optional gutter override – in any order. All of these settings have globally-defined defaults:</p><ul><li><code>span(2 of 6)</code> will set the context to a slice of 6 columns from the global grid. More details below.</li><li><code>span(2 of 12 wide)</code> changes the container-spread as well as the column-context.</li><li><code>span(2 of 12 set-gutters 0.5em)</code> will override the global gutters setting for this one calculation.</li></ul><p>A single unitless number for <code>columns</code> will be treated as a slice of the parent grid. On a grid with <code>columns: susy-repeat(12, 120px)</code>, the shorthand <code>of 4</code> will use the parent <code>120px</code> column-width. You can also be more explicit, and say <code>of susy-repeat(4, 100px)</code>. If you are using asymmetrical grids, like <code>columns: (1 1 2 3 5 8)</code>, Susy can't slice it for you without knowing which columns you want. The <code>slice</code> function accepts exactly the same syntax as <code>span</code>, but returns a list of columns rather than a width. Use it in your context like <code>of slice(first 3)</code>.</p></div></section><section class="item" id="function--susy-span"><header data-item-section="header"><h2 class="item-title"><span class="item-type">@function</span> <a href="#function--susy-span" class="item-name">susy-span()</a></h2><p class="alias">aliased as <span class="alias-title">span()</span></p></header><div data-item-section="summary"><h3 class="item-subtitle">Description</h3><div class="text-block"><p>This is the primary function in Susy — used to return the width of a span across one or more columns, and any relevant gutters along the way. With the default settings, <code>span(3)</code> will return the width of 3 columns, and the 2 intermediate gutters. This can be used to set the <code>width</code> property of grid elements, or <code>margin</code> and <code>padding</code> to push, pull, and pad your elements.</p><ul><li>This is a thin syntax-sugar shell around the core-math <code>su-span()</code> function.</li><li>The un-prefixed alias <code>span()</code> is available by default.</li></ul></div></div><div data-item-section="parameter"><h3 class="item-subtitle">Parameters & Return</h3><div class="param-list"><h4 class="param-title"><span class="item-name">$span:</span> <span class="value-type">(list)</span></h4><div class="param-details text-block"><p>Shorthand expression to define the width of the span, optionally containing:</p><ul><li>a count, length, or column-list span.</li><li><code>at $n</code>, <code>first</code>, or <code>last</code> location on asymmetrical grids, where <code>at 1 == first</code>, and <code>last</code> will calculate the proper location based on columns and span.</li><li><code>narrow</code>, <code>wide</code>, or <code>wider</code> for optionally spreading across adjacent gutters.</li><li><code>of $n <spread></code> for available grid columns and spread of the container. Span counts like <code>of 6</code> are valid in the context of symmetrical grids, where Susy can safely infer a slice of the parent columns.</li><li>and <code>set-gutters $n</code> to override global gutter settings.</li></ul></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">$config:</span> <span class="item-value">()</span> <span class="value-type">(map)</span></h4><div class="param-details text-block"><p>Optional map of Susy grid configuration settings. See <code>$susy</code> documentation for details.</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">@return</span> <span class="value-type">(length)</span></h4><div class="param-details text-block"><p>Calculated length value, using the units given, or converting to <code>%</code> for fraction-based grids, or a full <code>calc</code> function when units/fractions are not comparable outside the browser.</p></div></div></div><div data-item-section="examples"><h3 class="item-subtitle">Examples</h3><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">span half the grid</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.foo {
// the result is a bit under 50% to account for gutters
width: susy-span(6 of 12);
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.foo {
width: 49.15254%;
}
</code></pre></div></div></div><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">span a specific segment of asymmetrical grid</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.foo {
width: susy-span(3 at 3 of (1 2 3 5 8));
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.foo {
width: 82.5%;
}
</code></pre></div></div></div></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-span" class="item-name">su-span()</a></h4></div><div class="param-list"><h4 class="param-title"><a href="a-config.html#variable--susy" class="item-name">$susy</a></h4></div></div><div class="requires-wrapper"><div data-item-section="requires"><h3 class="item-subtitle">requires</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--susy-compile" class="item-name">susy-compile()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--su-call" class="item-name">su-call()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">_susy-error()</span> <span class="item-note">[private]</span></h4></div></div><div data-item-section="used by"><h3 class="item-subtitle">used by</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">span()</span></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin_svg-grid.html#function--susy-svg-grid" class="item-name">susy-svg-grid()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">_susy-svg-column-position()</span> <span class="item-note">[private]</span></h4></div></div></div></section><section class="item" id="function--susy-gutter"><header data-item-section="header"><h2 class="item-title"><span class="item-type">@function</span> <a href="#function--susy-gutter" class="item-name">susy-gutter()</a></h2><p class="alias">aliased as <span class="alias-title">gutter()</span></p></header><div data-item-section="summary"><h3 class="item-subtitle">Description</h3><div class="text-block"><p>The gutter function returns the width of a single gutter on your grid, to be applied where you see fit – on <code>margins</code>, <code>padding</code>, <code>transform</code>, or element <code>width</code>.</p><ul><li>This is a thin syntax-sugar shell around the core-math <code>su-gutter()</code> function.</li><li>The un-prefixed alias <code>gutter()</code> is available by default.</li></ul></div></div><div data-item-section="parameter"><h3 class="item-subtitle">Parameters & Return</h3><div class="param-list"><h4 class="param-title"><span class="item-name">$context:</span> <span class="item-value">null</span> <span class="value-type">(list | number)</span></h4><div class="param-details text-block"><p>Optional context for nested gutters, including shorthand for <code>columns</code>, <code>gutters</code>, and <code>container-spread</code> (additional shorthand will be ignored)</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">$config:</span> <span class="item-value">()</span> <span class="value-type">(map)</span></h4><div class="param-details text-block"><p>Optional map of Susy grid configuration settings. See <code>$susy</code> documentation for details.</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">@return</span> <span class="value-type">(length)</span></h4><div class="param-details text-block"><p>Width of a gutter as <code>%</code> of current context, or in the units defined by <code>column-width</code> when available</p></div></div></div><div data-item-section="examples"><h3 class="item-subtitle">Examples</h3><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">add gutters before or after an element</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.floats {
float: left;
width: span(3 of 6);
margin-left: gutter(of 6);
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.floats {
float: left;
width: 48.27586%;
margin-left: 3.44828%;
}
</code></pre></div></div></div><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">add gutters to padding</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.flexbox {
flex: 1 1 span(3 wide of 6 wide);
padding: gutter(of 6) / 2;
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.flexbox {
flex: 1 1 50%;
padding: 1.72414%;
}
</code></pre></div></div></div></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-gutter" class="item-name">su-gutter()</a></h4></div><div class="param-list"><h4 class="param-title"><a href="a-config.html#variable--susy" class="item-name">$susy</a></h4></div></div><div class="requires-wrapper"><div data-item-section="requires"><h3 class="item-subtitle">requires</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--susy-compile" class="item-name">susy-compile()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--su-call" class="item-name">su-call()</a></h4></div></div><div data-item-section="used by"><h3 class="item-subtitle">used by</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">gutter()</span></h4></div></div></div></section><section class="item" id="function--susy-slice"><header data-item-section="header"><h2 class="item-title"><span class="item-type">@function</span> <a href="#function--susy-slice" class="item-name">susy-slice()</a></h2><p class="alias">aliased as <span class="alias-title">slice()</span></p></header><div data-item-section="summary"><h3 class="item-subtitle">Description</h3><div class="text-block"><p>Working with asymmetrical grids (un-equal column widths) can be challenging – expecially when they involve fluid/fractional elements. Describing a context <code>of (15em 6em 6em 6em 15em)</code> is a lot to put inside the span or gutter function shorthand. This slice function returns a sub-slice of asymmetrical columns to use for a nested context. <code>slice(3 at 2)</code> will give you a subset of the global grid, spanning 3 columns, starting with the second.</p><ul><li>This is a thin syntax-sugar shell around the core-math <code>su-slice()</code> function.</li><li>The un-prefixed alias <code>slice()</code> is available by default.</li></ul></div></div><div data-item-section="parameter"><h3 class="item-subtitle">Parameters & Return</h3><div class="param-list"><h4 class="param-title"><span class="item-name">$span:</span> <span class="value-type">(list)</span></h4><div class="param-details text-block"><p>Shorthand expression to define the subset span, optionally containing:</p><ul><li><code>at $n</code>, <code>first</code>, or <code>last</code> location on asymmetrical grids;</li><li><code>of $n <spread></code> for available grid columns and spread of the container<ul><li>Span-counts like <code>of 6</code> are only valid in the context of symmetrical grids</li><li>Valid spreads include <code>narrow</code>, <code>wide</code>, or <code>wider</code></li></ul></li></ul></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">$config:</span> <span class="item-value">()</span> <span class="value-type">(map)</span></h4><div class="param-details text-block"><p>Optional map of Susy grid configuration settings. See <code>$susy</code> documentation for details.</p></div></div><div class="param-list"><h4 class="param-title"><span class="item-name">@return</span> <span class="value-type">(list)</span></h4><div class="param-details text-block"><p>Subset list of columns for use for a nested context</p></div></div></div><div data-item-section="examples"><h3 class="item-subtitle">Example</h3><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">Return a nested segment of asymmetrical grid</span></div><pre data-sassdoc="hljs"><code class="lang-scss">$context: susy-slice(3 at 3 of (1 2 3 5 8));
/* $context: #{$context}; */</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">/* $context: 3 5 8; */
</code></pre></div></div></div></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="su-math.html#function--su-slice" class="item-name">su-slice()</a></h4></div><div class="param-list"><h4 class="param-title"><a href="a-config.html#variable--susy" class="item-name">$susy</a></h4></div></div><div class="requires-wrapper"><div data-item-section="requires"><h3 class="item-subtitle">requires</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--susy-compile" class="item-name">susy-compile()</a></h4></div><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <a href="plugin-utils.html#function--su-call" class="item-name">su-call()</a></h4></div></div><div data-item-section="used by"><h3 class="item-subtitle">used by</h3><div class="param-list"><h4 class="param-title"><span class="item-type">@function</span> <span class="item-name">slice()</span></h4></div></div></div></section><section class="item"><div data-item-section="prose" class="text-block"><h2 id="building-grids">Building Grids</h2><p>The web has come a long way since the days of double-margin-hacks and inconsistent subpixel rounding. In addition to floats and tables, we can now use much more powerful tools, like flexbox and CSS grid, to build more interesting and responsive layouts.</p><p>With Susy3, we hope you'll start moving in that direction. You can still build classic 12-column Grid Systems, and we'll help you get there, but Susy3 is primarily designed for a grid-math-on-demand approach to layout: applying our functions only where you really need grid math. Read the <a href="http://oddbird.net/2017/06/28/susy3/">intro article by OddBird</a> for more details.</p></div><div data-item-section="examples"><h3 class="item-subtitle">Examples</h3><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">floats</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.float {
width: span(3);
margin-right: gutter();
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.float {
width: 73.68421%;
margin-right: 5.26316%;
}
</code></pre></div></div></div><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">flexbox</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.flexbox {
flex: 1 1 span(3);
// half a gutter on either side…
padding: 0 gutter() / 2;
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.flexbox {
flex: 1 1 73.68421%;
padding: 0 2.63158%;
}
</code></pre></div></div></div><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">pushing and pulling</span></div><pre data-sassdoc="hljs"><code class="lang-scss">.push-3 {
margin-left: span(3 wide);
}
.pull-3 {
margin-left: 0 - span(3 wide);
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">.push-3 {
margin-left: 78.94737%;
}
.pull-3 {
margin-left: -78.94737%;
}
</code></pre></div></div></div><div class="example"><div class="example-code"><div class="code-block"><div class="code-header"><span class="code-language">scss </span><span class="code-description">building an attribute system</span></div><pre data-sassdoc="hljs"><code class="lang-scss">// markup example: <div data-span="last 3"></div>
[data-span] {
float: left;
&:not([data-span*='last']) {
margin-right: gutter();
}
}
@for $span from 1 through length(susy-get('columns')) {
[data-span*='#{$span}'] {
width: span($span);
}
}</code></pre></div><div class="code-block"><div class="code-header"><span class="code-language">css </span><span class="code-description">compiled</span></div><pre data-sassdoc="hljs"><code class="lang-css">[data-span] {
float: left;
}
[data-span]:not([data-span*='last']) {
margin-right: 5.26316%;
}
[data-span*='1'] {
width: 21.05263%;
}
[data-span*='2'] {
width: 47.36842%;
}
[data-span*='3'] {
width: 73.68421%;
}
[data-span*='4'] {
width: 100%;
}
</code></pre></div></div></div></div><div data-item-section="related"><h3 class="item-subtitle">related</h3><div class="param-list"><h4 class="param-title"><a href="http://oddbird.net/2017/06/28/susy3/" class="item-name">Article: Welcome to Susy3</a> <span class="item-note">[external]</span></h4></div></div></section></div></main></div></div><script type="text/javascript" src="assets/js/jquery-3.1.1.slim.js"></script><script type="text/javascript" src="assets/js/srcdoc-polyfill.min.js"></script><script type="text/javascript" src="assets/js/highlight.js"></script><script type="text/javascript" src="assets/js/base.js"></script><script type="text/javascript" src="assets/js/init.js"></script></body></html>