Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I came across <a href="https://groups.google.com/forum/?fromgroups=#!topic/sass-lang/upr78cyrW1I">this somewhat clunky solution</a> (see Chris Eppstein's reply) using <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#zip-instance_method"><code>zip</code></a> and <a href="http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#index-instance_method"><code>index</code></a>. Apparently a maintainer of SASS added these built-in functions in response to a similar question.</p> <p>To quote his reply:</p> <blockquote> <pre><code>$border-names: a, b, c; $border-widths: 1px, 1px, 2px; $border-styles: solid, dashed, solid; $border-colors: red, green, blue; $borders: zip($border-widths, $border-styles, $border-colors); @function border-for($name) { @return nth($borders, index($border-names, $name)) } @each $name in $border-names { .border-#{$name} { border: border-for($name); } } </code></pre> <p>Would generate:</p> <pre><code>.border-a { border: 1px solid red; } .border-b { border: 1px dashed green; } .border-c { border: 2px solid blue; } </code></pre> </blockquote> <p>The "naming your variables" comes from the list "<code>-names</code>" at the top; you then use the <code>index</code> of a desired variable name from that variable list to get the nth value from another variable lists. <code>zip</code> is used to mush separate lists together, so that you can retrieve the same index from all lists at the same time. Wrapping that behavior in a function makes it easier to retrieve a set.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload