docs/_parser.html



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  <title>Susy Syntax Parser | Susy Documentation</title>

  <link href="assets/img/favicon.ico" rel="shortcut icon">
  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:400,400i,700,700i" rel="stylesheet">

  <link rel="stylesheet" href="assets/webpack/app_styles.min.css" />

  
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" hidden>
  <symbol id="icon-logo" viewBox="0 0 16 16">
    <path d="M.2 8L0 7.8v-.2C.8 6.9 1.9 5.9 2.7 5l.4.3c-.5.8-1.1 1.6-1.8 2.3 1 1.2 1 1.3 1.7 2.4l-.4.3c-.4-.4-.5-.6-1-1C1 8.6 1.1 8.7.2 8zM13 10c.6-1.1.7-1.1 1.7-2.4-.6-.6-1.3-1.5-1.7-2.3l.3-.3c.8.8 1.8 1.8 2.7 2.6v.2l-.8.7c-.3.3-1.2 1.1-1.8 1.7L13 10z"/><path d="M2.6 13.1H3c.9 0 1.1-.2 1.1-1.4V4.2c0-1.1-.2-1.4-1.1-1.4h-.4v-.6h4.5v.7h-.3c-.9 0-1.1.2-1.1 1.4v3.2h4.6V4.2c0-1.1-.2-1.4-1.1-1.4h-.3v-.6h4.5v.7H13c-.9 0-1.1.2-1.1 1.4v7.5c0 1.1.2 1.4 1.1 1.4h.4v.7H8.9v-.7h.3c.9 0 1.1-.2 1.1-1.4V8.2H5.7v3.5c0 1.1.2 1.4 1.1 1.4h.3v.7H2.6v-.7z"/>
  </symbol>
  <symbol id="icon-menu" viewBox="0 0 24 28">
    <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-region="app">
    <header data-region="banner">
      
  <button data-nav-toggle data-toggle="button" aria-controls="nav" aria-pressed="false" type="button" data-toggle-synced="false">
    
  <svg data-icon="menu" data-icon-size="nav-icon" ><title>menu</title><use xlink:href="#icon-menu" />
  </svg>

  </button>


      <div class="project-title">
        <a href="index.html" rel="home" class="project-name">Susy</a>
        
          <span class="project-version">3.0.6</span>
        
      </div>
    </header>

    <div data-region="container">
      
  <nav data-region="nav" data-toggle="target" id="nav" data-target-id="nav" aria-expanded="false" data-auto-closing="false" data-auto-closing-on-any-click="false">
    <form action="search.html">
      <input type="text" name="q" placeholder="Search…" required minlength="3">
    </form>

    <div class="nav-subsection">
      <h3 class="nav-home">
        
        <a href="index.html" data-nav="is-not-active">Susy</a>
      </h3>

      
        <ul>
          
            
            <li class="nav-item">
              <a href="PHILOSOPHY.html" data-nav="is-not-active">Philosophy</a>
            </li>
          
            
            <li class="nav-item">
              <a href="CHANGELOG.html" data-nav="is-not-active">Changelog</a>
            </li>
          
            
            <li class="nav-item">
              <a href="CONTRIBUTING.html" data-nav="is-not-active">Contributing</a>
            </li>
          
        </ul>
      
    </div>

    
    <div class="nav-subsection">
      <ul>
            <li class="nav-subsection">
              <h3 class="nav-title">Public Grid API</h3>
              <ul>
                
  
    <li class="nav-item">
      <a href="config.html" data-nav="is-not-active">Grid Configuration</a>
    </li>
  
  
    <li class="nav-item">
      <a href="api.html" data-nav="is-not-active">Grid Functions</a>
    </li>
  </ul>
            </li>
            <li class="nav-subsection">
              <h3 class="nav-title">Extras</h3>
              <ul>
                
  
    <li class="nav-item">
      <a href="plugin-utils.html" data-nav="is-not-active">Extending Susy</a>
    </li>
  
  
    <li class="nav-item">
      <a href="su-math.html" data-nav="is-not-active">Su: Core Math<span class="widont">&nbsp;</span>Engine</a>
    </li>
  
  
    <li class="nav-item">
      <a href="plugin_svg-grid.html" data-nav="is-not-active">Plugin: SVG Grid<span class="widont">&nbsp;</span>Image</a>
    </li>
  </ul>
            </li>
            <li class="nav-subsection">
              <h3 class="nav-title">Internal Functions (Private)</h3>
              <ul>
                
  
    <li class="nav-item">
      <a href="_normal.html" data-nav="is-not-active">Susy Normalization</a>
    </li>
  
  
    <li class="nav-item">
      <a href="_parser.html" data-nav="is-active">Susy Syntax<span class="widont">&nbsp;</span>Parser</a>
    </li>
  
  
    <li class="nav-item">
      <a href="_validation.html" data-nav="is-not-active">Su Input<span class="widont">&nbsp;</span>Validation</a>
    </li>
  
  
    <li class="nav-item">
      <a href="_version.html" data-nav="is-not-active">Versioning</a>
    </li>
  </ul>
            </li></ul>
    </div>

    
      <div class="nav-subsection">
        <h3 class="nav-title">
          External Links
        </h3>

        <ul>
          
            <li class="nav-item">
              <a href="http://oddbird.net/susy/" data-nav="is-not-active">Susy Website</a>
            </li>
          
            <li class="nav-item">
              <a href="http://twitter.com/sasssusy/" data-nav="is-not-active">Twitter @SassSusy</a>
            </li>
          
            <li class="nav-item">
              <a href="http://oddbird.net/2017/06/28/susy3" data-nav="is-not-active">Intro to<span class="widont">&nbsp;</span>Susy3</a>
            </li>
          
            <li class="nav-item">
              <a href="http://susy.readthedocs.io" data-nav="is-not-active">Susy2 Documentation</a>
            </li>
          
            <li class="nav-item">
              <a href="http://oddbird.net/" data-nav="is-not-active">OddBird</a>
            </li>
          
        </ul>
      </div>
    

      <aside class="footer-credit">
        <a href="http://oddbird.net/herman/" class="footer-icon">
          
  <svg data-icon="logo" data-icon-size="footer-logo" ><use xlink:href="#icon-logo" />
  </svg>

        </a>
        <span>
          Documented with
          <a href="http://oddbird.net/herman/" class="footer-link">
            Herman
          </a>
        </span>
        <span>
          by
          <a href="http://oddbird.net/" class="footer-link">
            OddBird
          </a>
        </span>
      </aside>
    
  </nav>


      <main data-region="main">
        
  <nav class="breadcrumb">
    
    <a href="index.html" >Susy</a> »
    <strong>Susy Syntax Parser</strong>
  </nav>


        <div data-page="_parser">
          
  
<section class="item" >
  
    
    <div data-item-section="prose" class="text-block">
      <h1 id="shorthand-syntax-parser">Shorthand Syntax Parser</h1>
<p>The syntax parser converts <a href="api.html">shorthand syntax</a>
into a map of settings that can be compared/merged with
other config maps and global<span class="widont">&nbsp;</span>setting.</p>

      
    </div>
  

</section>

  
<section class="item" id="function--susy-parse">
  
    
  <div data-item-section="header">
    <h2 class="item-title">
      
        <span class="item-type">@function</span>
      

        <a href="#function--susy-parse" class="item-name">susy-parse()</a>
      

    </h2>

    
    <div class="text-block">
      <p>The <code>parse</code> function provides all the syntax-sugar in Susy,
converting user shorthand
into a usable map of keys and values
that can be normalized and passed to<span class="widont">&nbsp;</span>Su.</p>

      
    </div>
  

  </div>

  
  <div data-item-section="parameter">
    
      <h3 class="item-subtitle">
        <span class="item-subtitle-main">Parameters &amp;<span class="widont">&nbsp;</span>Return</span>
        
      </h3>
    

  <div class="param-list">
    <h4 class="param-title">
      
      
        <span class="item-name">$shorthand:</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<span class="widont">&nbsp;</span>containing:</p>
<ul>
<li>a count, length, or column-list<span class="widont">&nbsp;</span>span;</li>
<li><code>at $n</code>, <code>first</code>, or <code>last</code> location on asymmetrical<span class="widont">&nbsp;</span>grids;</li>
<li><code>narrow</code>, <code>wide</code>, or <code>wider</code> for optionally spreading
across adjacent<span class="widont">&nbsp;</span>gutters;</li>
<li><code>of $n &lt;spread&gt;</code> for available grid columns
and spread of the container
(span counts like <code>of 6</code> are only valid
in the context of symmetrical<span class="widont">&nbsp;</span>grids);</li>
<li>and <code>set-gutters $n</code> to override global gutter<span class="widont">&nbsp;</span>settings</li>
</ul>

      </div>
    
  </div>


  <div class="param-list">
    <h4 class="param-title">
      
      
        <span class="item-name">$context-only:</span>
      
      <span class="item-value">false</span>
      <span class="value-type">(bool)</span>
      
    </h4>

    
      <div class="param-details text-block">
        <p>Allow the parser to ignore span and span-spread values,
only parsing context and container-spread.
This makes it possible to accept spanless values,
like the <code>gutters()</code> syntax.
When parsing context-only,
the <code>of</code> indicator is<span class="widont">&nbsp;</span>optional.</p>

      </div>
    
  </div>


  <div class="param-list">
    <h4 class="param-title">
      
      
        <span class="item-name">@return</span>
      
      
      <span class="value-type">(map)</span>
      
    </h4>

    
      <div class="param-details text-block">
        <p>Map of span and grid settings
parsed from shorthand input –
including all the properties available globally –
<code>columns</code>, <code>gutters</code>, <code>spread</code>, <code>container-spread</code> –
along with the span-specific properties
<code>span</code>, and <code>location</code>.</p>

      </div>
    
  </div>

  
  <div class="param-list">
    <h4 class="param-title">
      
      
        <span class="item-name">@error</span>
      
      
    </h4>

    
      <div class="param-details text-block">
        <p>when a shorthand value is not<span class="widont">&nbsp;</span>recognized</p>

      </div>
    
  </div>

    
  </div>

  
  <div data-item-section="related">
    
      <h3 class="item-subtitle">
        <span class="item-subtitle-main">Related</span>
        
      </h3>
    

  <div class="param-list">
    <h4 class="param-title">
      
      
        <a href="
  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">
        <span class="item-subtitle-main">Requires</span>
        
      </h3>
    

  <div class="param-list">
    <h4 class="param-title">
      <span class="item-type">@function</span>
      
        <a href="
  _validation.html#function--su-valid-columns" class="item-name">su-valid-columns()</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">
        <span class="item-subtitle-main">Used By</span>
        
      </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>

  
    </div>
  

</section>

  
        </div>
      </main>
    </div>
  </div>

  <script type="text/javascript" src="assets/webpack/runtime.min.js"></script>
  <script type="text/javascript" src="assets/webpack/common.min.js"></script>
  <script type="text/javascript" src="assets/webpack/app.min.js"></script>
  
</body>
</html>