autotests/reference/highlight.sass.ref

0001 <Selector Tag>html</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
0002 <Selector Tag>body</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
0003 <Selector Tag>ul</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
0004 <Normal Text>ol</Normal Text><br/>
0005 <Normal Text>  </Normal Text><Property>margin</Property><Normal Text>:  </Normal Text><Number>0</Number><br/>
0006 <Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0007 <Normal Text></Normal Text><br/>
0008 <At Rule>@import</At Rule><Normal Text> reset</Normal Text><br/>
0009 <Normal Text>body</Normal Text><br/>
0010 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
0011 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#efefef</Color><br/>
0012 <Normal Text></Normal Text><br/>
0013 <Variable>$font-stack</Variable><Normal Text>:    Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
0014 <Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
0015 <Normal Text></Normal Text><br/>
0016 <Normal Text>body</Normal Text><br/>
0017 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><br/>
0018 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$primary-color</Variable><br/>
0019 <Selector Class>.container</Selector Class><br/>
0020 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
0021 <Normal Text></Normal Text><br/>
0022 <Selector Tag>article</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"main"</String><Selector Attribute>]</Selector Attribute><br/>
0023 <Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
0024 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><br/>
0025 <Normal Text></Normal Text><br/>
0026 <Placeholder Selector>%message-shared</Placeholder Selector><br/>
0027 <Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>#ccc</Color><br/>
0028 <Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
0029 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#333</Color><br/>
0030 <Normal Text></Normal Text><br/>
0031 <Selector Class>.message</Selector Class><br/>
0032 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Operator>%</Operator><Normal Text>message-shared</Normal Text><br/>
0033 <Normal Text></Normal Text><br/>
0034 <Selector Class>.success</Selector Class><br/>
0035 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Operator>%</Operator><Normal Text>message-shared</Normal Text><br/>
0036 <Normal Text>  </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>green</Color><br/>
0037 <Normal Text></Normal Text><br/>
0038 <At Rule>=</At Rule><Function>transform</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Normal Text>)</Normal Text><br/>
0039 <Normal Text>  </Normal Text><Unknown Property>-webkit-transform</Unknown Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
0040 <Normal Text>  </Normal Text><Unknown Property>-ms-transform</Unknown Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
0041 <Normal Text>  </Normal Text><Property>transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
0042 <Selector Class>.box</Selector Class><br/>
0043 <Normal Text>  </Normal Text><At Rule>+</At Rule><Function>transform(rotate(</Function><Number>30</Number><Unit>deg</Unit><Function>))</Function><br/>
0044 <Normal Text></Normal Text><br/>
0045 <Normal Text>  </Normal Text><Comment>// This comment won't be included in the CSS.</Comment><br/>
0046 <Comment>   This is also commented out.</Comment><br/>
0047 <Normal Text>  </Normal Text><Selector Id>#a</Selector Id><br/>
0048 <Comment>/* But this comment will, except in compressed mode.</Comment><br/>
0049 <Comment></Comment><br/>
0050 <Comment>/* It can also contain interpolation:</Comment><br/>
0051 <Comment>   1 + 1 = #{1 + 1}</Comment><br/>
0052 <Comment>  1 + 1 = #{1 + 1}</Comment><br/>
0053 <Comment> 1 + 1 = #{1 + 1}</Comment><br/>
0054 <Selector Id>#a</Selector Id><br/>
0055 <Normal Text></Normal Text><br/>
0056 <Comment>// But this comment will, except in compressed mode.</Comment><br/>
0057 <Comment></Comment><br/>
0058 <Comment>// It can also contain interpolation:</Comment><br/>
0059 <Comment>   1 + 1 = #{1 + 1}</Comment><br/>
0060 <Comment>  1 + 1 = #{1 + 1}</Comment><br/>
0061 <Comment> 1 + 1 = #{1 + 1}</Comment><br/>
0062 <Selector Id>#a</Selector Id><br/>
0063 <Normal Text></Normal Text><br/>
0064 <Comment>/*! This comment will be included even in compressed mode.</Comment><br/>
0065 <Comment></Comment><br/>
0066 <Selector Id>#a</Selector Id><br/>
0067 <Normal Text></Normal Text><br/>
0068 <Comment>/**/</Comment><br/>
0069 <Comment></Comment><br/>
0070 <Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/>
0071 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Comment>/* Inline comments must be closed. */</Comment><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
0072 <Normal Text></Normal Text><br/>
0073 <Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/>
0074 <Normal Text>  </Normal Text><Property>font</Property><Comment>/*comment*/</Comment><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Comment>/* Inline comments must be closed. */</Comment><Normal Text> </Normal Text><Value>sans-serif</Value><Normal Text> </Normal Text><Comment>// comment</Comment><br/>
0075 <Normal Text></Normal Text><br/>
0076 <Comment>/// Computes an exponent.</Comment><br/>
0077 <Comment>///</Comment><br/>
0078 <Comment>/// @param {number} $base</Comment><br/>
0079 <Comment>///   The number to multiply by itself.</Comment><br/>
0080 <Comment>/// @param {integer (unitless)} $exponent</Comment><br/>
0081 <Comment>///   The number of `$base`s to multiply together.</Comment><br/>
0082 <Comment>/// @return {number} `$base` to the power of `$exponent`.</Comment><br/>
0083 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow(</Function><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Function>)</Function><br/>
0084 <Normal Text>  </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/>
0085 <Normal Text>  </Normal Text><At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$_</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Variable>$exponent</Variable><br/>
0086 <Normal Text>    </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Variable>$result</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$base</Variable><br/>
0087 <Normal Text></Normal Text><br/>
0088 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/>
0089 <Normal Text></Normal Text><br/>
0090 <Variable>$roboto-font-path</Variable><Normal Text>: </Normal Text><String>"../fonts/roboto"</String><br/>
0091 <Normal Text></Normal Text><br/>
0092 <At Rule>@font-face</At Rule><br/>
0093 <Normal Text>    </Normal Text><Comment>// This is parsed as a normal function call that takes a quoted string.</Comment><br/>
0094 <Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"</String><Interpolation>#{</Interpolation><Variable>$roboto-font-path</Variable><Interpolation>}</Interpolation><String>/Roboto-Thin.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
0095 <Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>$roboto-font-path + "/Roboto-Light.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
0096 <Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>#{$roboto-font-path}/Roboto-Regular.woff2</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
0097 <Normal Text></Normal Text><br/>
0098 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Roboto"</String><br/>
0099 <Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Number>100</Number><br/>
0100 <Normal Text></Normal Text><br/>
0101 <Selector Class>.logo</Selector Class><br/>
0102 <Normal Text>  </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>800</Number><Unit>px</Unit><br/>
0103 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><br/>
0104 <Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
0105 <Normal Text>  </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$width</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Interpolation>}</Interpolation><Function>)</Function><br/>
0106 <Normal Text>  </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0107 <Normal Text></Normal Text><br/>
0108 <Variable>$padding</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><br/>
0109 <Normal Text></Normal Text><br/>
0110 <Selector Class>.post</Selector Class><br/>
0111 <Normal Text>  </Normal Text><Comment>// Since these max() calls don't use any Sass features other than</Comment><br/>
0112 <Normal Text>  </Normal Text><Comment>// interpolation, they're compiled to CSS max() calls.</Comment><br/>
0113 <Normal Text>  </Normal Text><Property>padding-left</Property><Normal Text>: </Normal Text><Function>max(</Function><Interpolation>#{</Interpolation><Variable>$padding</Variable><Interpolation>}</Interpolation><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>env(</Function><Normal Text>safe-area-inset-left</Normal Text><Function>))</Function><br/>
0114 <Normal Text>  </Normal Text><Property>padding-right</Property><Normal Text>: </Normal Text><Function>max(</Function><Interpolation>#{</Interpolation><Variable>$padding</Variable><Interpolation>}</Interpolation><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>env(</Function><Normal Text>safe-area-inset-right</Normal Text><Function>))</Function><br/>
0115 <Normal Text></Normal Text><br/>
0116 <Normal Text></Normal Text><br/>
0117 <Selector Class>.sidebar</Selector Class><br/>
0118 <Normal Text>  </Normal Text><Comment>// Since these refer to a Sass variable without interpolation, they call</Comment><br/>
0119 <Normal Text>  </Normal Text><Comment>// Sass's built-in max() function.</Comment><br/>
0120 <Normal Text>  </Normal Text><Property>padding-left</Property><Normal Text>: </Normal Text><Function>max(</Function><Variable>$padding</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><br/>
0121 <Normal Text>  </Normal Text><Property>padding-right</Property><Normal Text>: </Normal Text><Function>max(</Function><Variable>$padding</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><br/>
0122 <Normal Text></Normal Text><br/>
0123 <Selector Class>.circle</Selector Class><br/>
0124 <Normal Text>  </Normal Text><Variable>$size</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><br/>
0125 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0126 <Normal Text>  </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0127 <Normal Text>  </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><br/>
0128 <Normal Text></Normal Text><br/>
0129 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefixes</Variable><Function>)</Function><br/>
0130 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text> in </Normal Text><Variable>$prefixes</Variable><br/>
0131 <Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
0132 <Normal Text></Normal Text><br/>
0133 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
0134 <Normal Text></Normal Text><br/>
0135 <Normal Text></Normal Text><br/>
0136 <Selector Class>.gray</Selector Class><br/>
0137 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Normal Text>filter</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>grayscale(</Function><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> moz webkit</Normal Text><Function>)</Function><br/>
0138 <Normal Text></Normal Text><br/>
0139 <Selector Class>.enlarge</Selector Class><br/>
0140 <Normal Text>  </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/>
0141 <Normal Text>  </Normal Text><Property>transition</Property><Normal Text>:</Normal Text><br/>
0142 <Normal Text>    </Normal Text><Property>property</Property><Normal Text>: font-size</Normal Text><br/>
0143 <Normal Text>    </Normal Text><Property>duration</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>s</Unit><br/>
0144 <Normal Text>    </Normal Text><Property>delay</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>s</Unit><br/>
0145 <Normal Text></Normal Text><br/>
0146 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
0147 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>36</Number><Unit>px</Unit><br/>
0148 <Normal Text></Normal Text><br/>
0149 <Selector Class>.info-page</Selector Class><br/>
0150 <Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Value Keyword>auto</Value Keyword><br/>
0151 <Normal Text>    </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
0152 <Normal Text>    </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><br/>
0153 <Normal Text></Normal Text><br/>
0154 <Variable>$rounded-corners</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><br/>
0155 <Normal Text></Normal Text><br/>
0156 <Selector Class>.button</Selector Class><br/>
0157 <Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>black</Color><br/>
0158 <Normal Text>  </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Function>if(</Function><Variable>$rounded-corners</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Function>)</Function><br/>
0159 <Normal Text></Normal Text><br/>
0160 <Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#81899b</Color><br/>
0161 <Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#ab2e</Color><br/>
0162 <Variable>$warn</Variable><Normal Text>: </Normal Text><Color>#dfa612aa</Color><br/>
0163 <Normal Text></Normal Text><br/>
0164 <Selector Pseudo>:root</Selector Pseudo><br/>
0165 <Normal Text>  </Normal Text><Variable>--primary</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$primary</Variable><Interpolation>}</Interpolation><br/>
0166 <Normal Text>  </Normal Text><Variable>--accent</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$accent</Variable><Interpolation>}</Interpolation><br/>
0167 <Normal Text>  </Normal Text><Variable>--warn</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$warn</Variable><Interpolation>}</Interpolation><br/>
0168 <Normal Text></Normal Text><br/>
0169 <Normal Text>  </Normal Text><Comment>// Even though this looks like a Sass variable, it's valid CSS so it's not</Comment><br/>
0170 <Normal Text>  </Normal Text><Comment>// evaluated.</Comment><br/>
0171 <Normal Text>  </Normal Text><Variable>--consumed-by-js</Variable><Normal Text>: </Normal Text><Variable>$primary</Variable><br/>
0172 <Normal Text></Normal Text><br/>
0173 <Variable>$font-family-sans-serif</Variable><Normal Text>: -apple-system</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> BlinkMacSystemFont</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Segoe UI"</String><Separator Symbol>,</Separator Symbol><Normal Text> Roboto</Normal Text><br/>
0174 <Variable>$font-family-monospace</Variable><Normal Text>: SFMono-Regular</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Menlo</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Monaco</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Consolas</Normal Text><br/>
0175 <Normal Text></Normal Text><br/>
0176 <Selector Pseudo>:root</Selector Pseudo><br/>
0177 <Normal Text>  </Normal Text><Variable>--font-family-sans-serif</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-sans-serif</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
0178 <Normal Text>  </Normal Text><Variable>--font-family-monospace</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-monospace</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
0179 <Normal Text></Normal Text><br/>
0180 <Selector Class>.alert</Selector Class><br/>
0181 <Normal Text>  </Normal Text><Comment>// The parent selector can be used to add pseudo-classes to the outer</Comment><br/>
0182 <Normal Text>  </Normal Text><Comment>// selector.</Comment><br/>
0183 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
0184 <Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
0185 <Normal Text></Normal Text><br/>
0186 <Normal Text></Normal Text><br/>
0187 <Normal Text>  </Normal Text><Comment>// It can also be used to style the outer selector in a certain context, such</Comment><br/>
0188 <Normal Text>  </Normal Text><Comment>// as a body set to use a right-to-left language.</Comment><br/>
0189 <Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
0190 <Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0191 <Normal Text>    </Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
0192 <Normal Text></Normal Text><br/>
0193 <Normal Text></Normal Text><br/>
0194 <Normal Text>  </Normal Text><Comment>// You can even use it as an argument to pseudo-class selectors.</Comment><br/>
0195 <Normal Text>  </Normal Text><Selector Pseudo>:not(&)</Selector Pseudo><br/>
0196 <Normal Text>    </Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.8</Number><br/>
0197 <Normal Text></Normal Text><br/>
0198 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent(</Function><Variable>$child</Variable><Function>)</Function><br/>
0199 <Normal Text>  </Normal Text><At Rule>@at-root</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Function>selector-unify(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$child</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
0200 <Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
0201 <Normal Text></Normal Text><br/>
0202 <Normal Text></Normal Text><br/>
0203 <Normal Text></Normal Text><br/>
0204 <Selector Class>.wrapper</Selector Class><Normal Text> </Normal Text><Selector Class>.field</Selector Class><br/>
0205 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>unify-parent(</Function><String>"input"</String><Function>)</Function><br/>
0206 <Normal Text></Normal Text><br/>
0207 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Variable>$color</Variable><Function>)</Function><br/>
0208 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Function>if(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>'&.app-background'</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>'.app-background'</String><Function>)</Function><Interpolation>}</Interpolation><br/>
0209 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0210 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Color>#fff</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><br/>
0211 <Normal Text></Normal Text><br/>
0212 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#036</Color><Function>)</Function><br/>
0213 <Normal Text></Normal Text><br/>
0214 <Selector Class>.sidebar</Selector Class><br/>
0215 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#c6538c</Color><Function>)</Function><br/>
0216 <Normal Text></Normal Text><br/>
0217 <Selector Class>.accordion</Selector Class><br/>
0218 <Normal Text>  </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><br/>
0219 <Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>rem</Unit><Normal Text> </Normal Text><Value Keyword>auto</Value Keyword><br/>
0220 <Normal Text></Normal Text><br/>
0221 <Normal Text>  </Normal Text><Operator>&</Operator><Normal Text>__copy</Normal Text><br/>
0222 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><br/>
0223 <Normal Text>    </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>2</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1.5</Number><Unit>rem</Unit><br/>
0224 <Normal Text>    </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Number>1.6</Number><br/>
0225 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/>
0226 <Normal Text></Normal Text><br/>
0227 <Normal Text>    </Normal Text><Operator>&</Operator><Normal Text>--open</Normal Text><br/>
0228 <Normal Text>      </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>block</Value><br/>
0229 <Normal Text></Normal Text><br/>
0230 <Normal Text></Normal Text><br/>
0231 <Selector Class>.alert</Selector Class><Selector Pseudo>:hover</Selector Pseudo><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Placeholder Selector>%strong-alert</Placeholder Selector><br/>
0232 <Normal Text>  </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
0233 <Normal Text></Normal Text><br/>
0234 <Placeholder Selector>%strong-alert</Placeholder Selector><Selector Pseudo>:hover</Selector Pseudo><br/>
0235 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><br/>
0236 <Normal Text></Normal Text><br/>
0237 <Placeholder Selector>%toolbelt</Placeholder Selector><br/>
0238 <Normal Text>  </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><br/>
0239 <Normal Text>  </Normal Text><Property>border-top</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Color>#000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>.12</Number><Function>)</Function><Normal Text> </Normal Text><Value>solid</Value><br/>
0240 <Normal Text></Normal Text><br/>
0241 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
0242 <Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Color>#000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>.5</Number><Function>)</Function><Normal Text> </Normal Text><Value>solid</Value><br/>
0243 <Normal Text></Normal Text><br/>
0244 <Selector Class>.action-buttons</Selector Class><br/>
0245 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Operator>%</Operator><Normal Text>toolbelt</Normal Text><br/>
0246 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#4285f4</Color><br/>
0247 <Normal Text></Normal Text><br/>
0248 <Variable>$border-dark</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Variable>$base-color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.88</Number><Function>)</Function><br/>
0249 <Variable>$black</Variable><Normal Text>: </Normal Text><Color>#000</Color><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
0250 <Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.25</Number><Unit>rem</Unit><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
0251 <Variable>$box-shadow</Variable><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Variable>$black</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.15</Number><Function>)</Function><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
0252 <Variable>$box-shadow</Variable><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Variable>$black</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>blue(</Function><Variable>$black</Variable><Function>))</Function><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
0253 <Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.1</Number><Unit>rem</Unit><br/>
0254 <Normal Text></Normal Text><br/>
0255 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'library'</String><br/>
0256 <Normal Text></Normal Text><br/>
0257 <Variable>$global-variable</Variable><Normal Text>: global value</Normal Text><br/>
0258 <Normal Text></Normal Text><br/>
0259 <Normal Text>  </Normal Text><Comment>// This would fail, because $local-variable isn't in scope:</Comment><br/>
0260 <Normal Text>  </Normal Text><Comment>// local: $local-variable</Comment><br/>
0261 <Comment></Comment><br/>
0262 <Variable>$theme-colors</Variable><Normal Text>: (</Normal Text><String>"success"</String><Normal Text>: </Normal Text><Color>#28a745</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"info"</String><Normal Text>: </Normal Text><Color>#17a2b8</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"warning"</String><Normal Text>: </Normal Text><Color>#ffc107</Color><Normal Text>)</Normal Text><br/>
0263 <Normal Text></Normal Text><br/>
0264 <Selector Class>.alert</Selector Class><br/>
0265 <Normal Text>  </Normal Text><Comment>// Instead of $theme-color-#{warning}</Comment><br/>
0266 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>map-get(</Function><Variable>$theme-colors</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"warning"</String><Function>)</Function><br/>
0267 <Normal Text></Normal Text><br/>
0268 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>corner-icon(</Function><Variable>$name</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$top-or-bottom</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$left-or-right</Variable><Function>)</Function><br/>
0269 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0270 <Normal Text>    </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/icons/</String><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><String>.svg"</String><Function>)</Function><br/>
0271 <Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
0272 <Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
0273 <Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$left-or-right</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
0274 <Normal Text></Normal Text><br/>
0275 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>corner-icon(</Function><String>"mail"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>top</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>right</Value><Function>)</Function><br/>
0276 <Normal Text></Normal Text><br/>
0277 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inline-animation(</Function><Variable>$duration</Variable><Function>)</Function><br/>
0278 <Normal Text>  </Normal Text><Variable>$name</Variable><Normal Text>: inline-</Normal Text><Interpolation>#{</Interpolation><Function>unique-id()</Function><Interpolation>}</Interpolation><br/>
0279 <Normal Text></Normal Text><br/>
0280 <Normal Text>  </Normal Text><At Rule>@keyframes</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0281 <Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
0282 <Normal Text></Normal Text><br/>
0283 <Normal Text>  </Normal Text><Property>animation-name</Property><Normal Text>: </Normal Text><Variable>$name</Variable><br/>
0284 <Normal Text>  </Normal Text><Property>animation-duration</Property><Normal Text>: </Normal Text><Variable>$duration</Variable><br/>
0285 <Normal Text>  </Normal Text><Property>animation-iteration-count</Property><Normal Text>: </Normal Text><Value>infinite</Value><br/>
0286 <Normal Text></Normal Text><br/>
0287 <Normal Text></Normal Text><br/>
0288 <Selector Class>.pulse</Selector Class><br/>
0289 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>inline-animation(</Function><Number>2</Number><Unit>s</Unit><Function>)</Function><br/>
0290 <Normal Text>    from</Normal Text><br/>
0291 <Normal Text>      </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>yellow</Color><br/>
0292 <Normal Text>    to</Normal Text><br/>
0293 <Normal Text>      </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>red</Color><br/>
0294 <Normal Text></Normal Text><br/>
0295 <Selector Class>.example</Selector Class><br/>
0296 <Normal Text>  </Normal Text><Unknown Property>unquoted</Unknown Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><String>"string"</String><Interpolation>}</Interpolation><br/>
0297 <Normal Text></Normal Text><br/>
0298 <Normal Text>  </Normal Text><Operator>&</Operator><Normal Text> </Normal Text><Operator>&</Operator><br/>
0299 <Normal Text>    </Normal Text><Property>padding</Property><Normal Text>:</Normal Text><br/>
0300 <Normal Text>      </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0301 <Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0302 <Normal Text></Normal Text><br/>
0303 <Comment>// style.sass</Comment><br/>
0304 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'foundation/code'</String><Normal Text>, </Normal Text><String>'foundation/lists'</String><br/>
0305 <Normal Text></Normal Text><br/>
0306 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"theme.css"</String><br/>
0307 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://fonts.googleapis.com/css?family=Droid+Sans"</String><br/>
0308 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>theme</String><Function>)</Function><br/>
0309 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"landscape"</String><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>)</Normal Text><br/>
0310 <Normal Text></Normal Text><br/>
0311 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>google-font(</Function><Variable>$family</Variable><Function>)</Function><br/>
0312 <Normal Text>  </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"http://fonts.googleapis.com/css?family=</String><Interpolation>#{</Interpolation><Variable>$family</Variable><Interpolation>}</Interpolation><String>"</String><Function>)</Function><br/>
0313 <Normal Text></Normal Text><br/>
0314 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>google-font(</Function><String>"Droid Sans"</String><Function>)</Function><br/>
0315 <Normal Text></Normal Text><br/>
0316 <At Rule>@mixin</At Rule><Normal Text> horizontal-list</Normal Text><br/>
0317 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> reset-list</Normal Text><br/>
0318 <Normal Text></Normal Text><br/>
0319 <Normal Text>  li</Normal Text><br/>
0320 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
0321 <Normal Text>    </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/>
0322 <Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/>
0323 <Normal Text>      </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/>
0324 <Normal Text></Normal Text><br/>
0325 <Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/>
0326 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> horizontal-list</Normal Text><br/>
0327 <Normal Text></Normal Text><br/>
0328 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>rtl(</Function><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$ltr-value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$rtl-value</Variable><Function>)</Function><br/>
0329 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$ltr-value</Variable><br/>
0330 <Normal Text></Normal Text><br/>
0331 <Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
0332 <Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$rtl-value</Variable><br/>
0333 <Normal Text></Normal Text><br/>
0334 <Selector Class>.sidebar</Selector Class><br/>
0335 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>rtl(</Function><Normal Text>float</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>left</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>right</Value><Function>)</Function><br/>
0336 <Normal Text></Normal Text><br/>
0337 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>replace-text(</Function><Variable>$image</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$x</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><br/>
0338 <Normal Text>  </Normal Text><Property>text-indent</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>99999</Number><Unit>em</Unit><br/>
0339 <Normal Text>  </Normal Text><Property>overflow</Property><Normal Text>: </Normal Text><Value>hidden</Value><br/>
0340 <Normal Text>  </Normal Text><Property>text-align</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
0341 <Normal Text></Normal Text><br/>
0342 <Normal Text>  </Normal Text><Property>background</Property><Normal Text>:</Normal Text><br/>
0343 <Normal Text>    </Normal Text><Property>image</Property><Normal Text>: </Normal Text><Variable>$image</Variable><br/>
0344 <Normal Text>    </Normal Text><Property>repeat</Property><Normal Text>: </Normal Text><Value>no-repeat</Value><br/>
0345 <Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Normal Text> </Normal Text><Variable>$y</Variable><br/>
0346 <Normal Text></Normal Text><br/>
0347 <Selector Class>.mail-icon</Selector Class><br/>
0348 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>replace-text(url(</Function><String>"/images/mail.svg"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Function>)</Function><br/>
0349 <Normal Text></Normal Text><br/>
0350 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>order(</Function><Number>150</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.name"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.address"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.zip"</String><Function>)</Function><br/>
0351 <Normal Text></Normal Text><br/>
0352 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$args</Variable><Operator>...</Operator><Function>)</Function><br/>
0353 <Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
0354 <Normal Text></Normal Text><br/>
0355 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
0356 <Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0357 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0358 <Normal Text></Normal Text><br/>
0359 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><br/>
0360 <Normal Text></Normal Text><br/>
0361 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>media(</Function><Variable>$types</Variable><Operator>...</Operator><Function>)</Function><br/>
0362 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> in </Normal Text><Variable>$types</Variable><br/>
0363 <Normal Text>    </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$type</Variable><Interpolation>}</Interpolation><br/>
0364 <Normal Text>      </Normal Text><At Rule>@content</At Rule><Normal Text>(</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/>
0365 <Normal Text></Normal Text><br/>
0366 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>media(</Function><Value>screen</Value><Separator Symbol>,</Separator Symbol><Normal Text> print</Normal Text><Function>)</Function><Normal Text> using (</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/>
0367 <Normal Text>  h1</Normal Text><br/>
0368 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><br/>
0369 <Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> == </Normal Text><Value>print</Value><br/>
0370 <Normal Text>      </Normal Text><Property>font-family</Property><Normal Text>: Calluna</Normal Text><br/>
0371 <Normal Text></Normal Text><br/>
0372 <At Rule>=</At Rule><Function>reset-list</Function><br/>
0373 <Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0374 <Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0375 <Normal Text>  </Normal Text><Property>list-style</Property><Normal Text>: </Normal Text><Value>none</Value><br/>
0376 <Normal Text></Normal Text><br/>
0377 <At Rule>=</At Rule><Function>horizontal-list</Function><br/>
0378 <Normal Text>  </Normal Text><At Rule>+</At Rule><Normal Text>reset-list</Normal Text><br/>
0379 <Normal Text></Normal Text><br/>
0380 <Normal Text>  li</Normal Text><br/>
0381 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
0382 <Normal Text>    </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/>
0383 <Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/>
0384 <Normal Text>      </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/>
0385 <Normal Text></Normal Text><br/>
0386 <Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/>
0387 <Normal Text>  </Normal Text><At Rule>+</At Rule><Normal Text>horizontal-list</Normal Text><br/>
0388 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow(</Function><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Function>)</Function><br/>
0389 <Normal Text>  </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/>
0390 <Normal Text>  </Normal Text><At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$_</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Variable>$exponent</Variable><br/>
0391 <Normal Text>    </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Variable>$result</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$base</Variable><br/>
0392 <Normal Text></Normal Text><br/>
0393 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/>
0394 <Normal Text></Normal Text><br/>
0395 <Selector Class>.sidebar</Selector Class><br/>
0396 <Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
0397 <Normal Text>  </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Function>pow(</Function><Number>4</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Function>)</Function><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><br/>
0398 <Normal Text></Normal Text><br/>
0399 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>sum(</Function><Variable>$numbers</Variable><Operator>...</Operator><Function>)</Function><br/>
0400 <Normal Text>  </Normal Text><Variable>$sum</Variable><Normal Text>: </Normal Text><Number>0</Number><br/>
0401 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$number</Variable><Normal Text> in </Normal Text><Variable>$numbers</Variable><br/>
0402 <Normal Text>    </Normal Text><Variable>$sum</Variable><Normal Text>: </Normal Text><Variable>$sum</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$number</Variable><br/>
0403 <Normal Text></Normal Text><br/>
0404 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$sum</Variable><br/>
0405 <Normal Text></Normal Text><br/>
0406 <Selector Class>.micro</Selector Class><br/>
0407 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>sum(</Function><Number>50</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>100</Number><Unit>px</Unit><Function>)</Function><br/>
0408 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>str-insert(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$insert</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Function>)</Function><br/>
0409 <Normal Text>  </Normal Text><Comment>// Avoid making new strings if we don't need to.</Comment><br/>
0410 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>str-length(</Function><Variable>$string</Variable><Function>)</Function><Normal Text> == </Normal Text><Number>0</Number><br/>
0411 <Normal Text>    </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$insert</Variable><br/>
0412 <Normal Text></Normal Text><br/>
0413 <Normal Text>  </Normal Text><Variable>$before</Variable><Normal Text>: </Normal Text><Function>str-slice(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Function>)</Function><br/>
0414 <Normal Text>  </Normal Text><Variable>$after</Variable><Normal Text>: </Normal Text><Function>str-slice(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Function>)</Function><br/>
0415 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$before</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$insert</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$after</Variable><br/>
0416 <Normal Text></Normal Text><br/>
0417 <Selector Class>.error</Selector Class><br/>
0418 <Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><br/>
0419 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><br/>
0420 <Normal Text></Normal Text><br/>
0421 <Normal Text>  </Normal Text><Operator>&</Operator><Normal Text>--serious</Normal Text><br/>
0422 <Normal Text>    </Normal Text><At Rule>@extend</At Rule><Normal Text> .error</Normal Text><br/>
0423 <Normal Text>    </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><br/>
0424 <Normal Text></Normal Text><br/>
0425 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>reflexive-position(</Function><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Function>)</Function><br/>
0426 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value>left</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value>right</Value><br/>
0427 <Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"Property </String><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><String> must be either left or right."</String><br/>
0428 <Normal Text></Normal Text><br/>
0429 <Normal Text>  </Normal Text><Variable>$left-value</Variable><Normal Text>: </Normal Text><Function>if(</Function><Variable>$property</Variable><Normal Text> == </Normal Text><Value>right</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value Keyword>initial</Value Keyword><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Function>)</Function><br/>
0430 <Normal Text>  </Normal Text><Variable>$right-value</Variable><Normal Text>: </Normal Text><Function>if(</Function><Variable>$property</Variable><Normal Text> == </Normal Text><Value>right</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value Keyword>initial</Value Keyword><Function>)</Function><br/>
0431 <Normal Text></Normal Text><br/>
0432 <Normal Text>  </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/>
0433 <Normal Text>  </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/>
0434 <Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
0435 <Normal Text>    </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/>
0436 <Normal Text>    </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/>
0437 <Normal Text></Normal Text><br/>
0438 <Variable>$known-prefixes</Variable><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> ms</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> o</Normal Text><br/>
0439 <Normal Text></Normal Text><br/>
0440 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefixes</Variable><Function>)</Function><br/>
0441 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text> in </Normal Text><Variable>$prefixes</Variable><br/>
0442 <Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Function>index(</Function><Variable>$known-prefixes</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefix</Variable><Function>)</Function><br/>
0443 <Normal Text>      </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Unknown prefix </String><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><String>."</String><br/>
0444 <Normal Text></Normal Text><br/>
0445 <Normal Text></Normal Text><br/>
0446 <Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
0447 <Normal Text></Normal Text><br/>
0448 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
0449 <Normal Text></Normal Text><br/>
0450 <Normal Text></Normal Text><br/>
0451 <Selector Class>.tilt</Selector Class><br/>
0452 <Normal Text>  </Normal Text><Comment>// Oops, we typo'd "webkit" as "wekbit"!</Comment><br/>
0453 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Normal Text>transform</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>rotate(</Function><Number>15</Number><Unit>deg</Unit><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> wekbit ms</Normal Text><Function>)</Function><br/>
0454 <Normal Text></Normal Text><br/>
0455 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inset-divider-offset(</Function><Variable>$offset</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$padding</Variable><Function>)</Function><br/>
0456 <Normal Text>  </Normal Text><Variable>$divider-offset</Variable><Normal Text>: (</Normal Text><Number>2</Number><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$padding</Variable><Normal Text>) </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$offset</Variable><br/>
0457 <Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"divider offset: </String><Interpolation>#{</Interpolation><Variable>$divider-offset</Variable><Interpolation>}</Interpolation><String>"</String><br/>
0458 <Normal Text></Normal Text><br/>
0459 <Normal Text>  </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Variable>$divider-offset</Variable><br/>
0460 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$divider-offset</Variable><Interpolation>}</Interpolation><Function>)</Function><br/>
0461 <Normal Text></Normal Text><br/>
0462 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent(</Function><Variable>$child</Variable><Function>)</Function><br/>
0463 <Normal Text>  </Normal Text><At Rule>@at-root</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Function>selector-unify(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$child</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
0464 <Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
0465 <Normal Text></Normal Text><br/>
0466 <Normal Text></Normal Text><br/>
0467 <Selector Class>.square-av</Selector Class><br/>
0468 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>avatar(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$circle</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><Function>)</Function><br/>
0469 <Selector Class>.circle-av</Selector Class><br/>
0470 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>avatar(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$circle</Variable><Normal Text>: </Normal Text><Value Keyword>true</Value Keyword><Function>)</Function><br/>
0471 <Normal Text></Normal Text><br/>
0472 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>theme-colors(</Function><Variable>$light-theme</Variable><Normal Text>: </Normal Text><Value Keyword>true</Value Keyword><Function>)</Function><br/>
0473 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$light-theme</Variable><br/>
0474 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$light-background</Variable><br/>
0475 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$light-text</Variable><br/>
0476 <Normal Text>  </Normal Text><At Rule>@else</At Rule><br/>
0477 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$dark-background</Variable><br/>
0478 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$dark-text</Variable><br/>
0479 <Normal Text></Normal Text><br/>
0480 <Selector Class>.banner</Selector Class><br/>
0481 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>theme-colors(</Function><Variable>$light-theme</Variable><Normal Text>: </Normal Text><Value Keyword>true</Value Keyword><Function>)</Function><br/>
0482 <Normal Text>  </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.dark</Selector Class><Normal Text> </Normal Text><Operator>&</Operator><br/>
0483 <Normal Text>    </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>theme-colors(</Function><Variable>$light-theme</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><Function>)</Function><br/>
0484 <Normal Text></Normal Text><br/>
0485 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>triangle(</Function><Variable>$size</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$direction</Variable><Function>)</Function><br/>
0486 <Normal Text>  </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0487 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
0488 <Normal Text></Normal Text><br/>
0489 <Normal Text>  </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Value>transparent</Value><br/>
0490 <Normal Text>  </Normal Text><Property>border-style</Property><Normal Text>: </Normal Text><Value>solid</Value><br/>
0491 <Normal Text>  </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><br/>
0492 <Normal Text></Normal Text><br/>
0493 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> == up</Normal Text><br/>
0494 <Normal Text>    </Normal Text><Property>border-bottom-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0495 <Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> if </Normal Text><Variable>$direction</Variable><Normal Text> == </Normal Text><Value>right</Value><br/>
0496 <Normal Text>    </Normal Text><Property>border-left-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0497 <Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> if </Normal Text><Variable>$direction</Variable><Normal Text> == down</Normal Text><br/>
0498 <Normal Text>    </Normal Text><Property>border-top-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0499 <Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> if </Normal Text><Variable>$direction</Variable><Normal Text> == </Normal Text><Value>left</Value><br/>
0500 <Normal Text>    </Normal Text><Property>border-right-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0501 <Normal Text>  </Normal Text><At Rule>@else</At Rule><br/>
0502 <Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"Unknown direction </String><Interpolation>#{</Interpolation><Variable>$direction</Variable><Interpolation>}</Interpolation><String>."</String><br/>
0503 <Normal Text></Normal Text><br/>
0504 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$size</Variable><Normal Text> in </Normal Text><Variable>$sizes</Variable><br/>
0505 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$size</Variable><Interpolation>}</Interpolation><br/>
0506 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0507 <Normal Text>    </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0508 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0509 <Normal Text></Normal Text><br/>
0510 <Variable>$icons</Variable><Normal Text>: (</Normal Text><String>"eye"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text>)</Normal Text><br/>
0511 <Normal Text></Normal Text><br/>
0512 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
0513 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
0514 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
0515 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
0516 <Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
0517 <Normal Text></Normal Text><br/>
0518 <Variable>$icons</Variable><Normal Text>: </Normal Text><String>"eye"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><br/>
0519 <Normal Text></Normal Text><br/>
0520 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
0521 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
0522 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
0523 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
0524 <Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
0525 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
0526 <Normal Text></Normal Text><br/>
0527 <At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Number>3</Number><br/>
0528 <Normal Text>  </Normal Text><Selector Tag>ul</Selector Tag><Selector Pseudo>:nth-child(3n + #{$i})</Selector Pseudo><br/>
0529 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>lighten(</Function><Variable>$base-color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>%</Unit><Function>)</Function><br/>
0530 <Normal Text></Normal Text><br/>
0531 <Comment>/// Divides `$value` by `$ratio` until it's below `$base`.</Comment><br/>
0532 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>scale-below(</Function><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$ratio</Variable><Normal Text>: </Normal Text><Number>1.618</Number><Function>)</Function><br/>
0533 <Normal Text>  </Normal Text><At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><Normal Text> > </Normal Text><Variable>$base</Variable><br/>
0534 <Normal Text>    </Normal Text><Variable>$value</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$ratio</Variable><br/>
0535 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><br/>
0536 <Normal Text></Normal Text><br/>
0537 <At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><br/>
0538 <Normal Text></Normal Text><br/>
0539 <At Rule>@font-face</At Rule><br/>
0540 <Normal Text>  </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><br/>
0541 <Normal Text>  </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
0542 <Normal Text></Normal Text><br/>
0543 <At Rule>@counter-style</At Rule><Normal Text> thumbs</Normal Text><br/>
0544 <Normal Text>  </Normal Text><Property>system</Property><Normal Text>: </Normal Text><Value>cyclic</Value><br/>
0545 <Normal Text>  </Normal Text><Property>symbols</Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><br/>
0546 <Normal Text></Normal Text><br/>
0547 <At Rule>@mixin</At Rule><Normal Text> sticky-position</Normal Text><br/>
0548 <Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>fixed</Value><br/>
0549 <Normal Text>  </Normal Text><At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>sticky</Value><Normal Text>)</Normal Text><br/>
0550 <Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>sticky</Value><br/>
0551 <Normal Text></Normal Text><br/>
0552 <At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>hover</Property><Normal Text>: </Normal Text><Value>hover</Value><Normal Text>)</Normal Text><br/>
0553 <Normal Text>  </Normal Text><Selector Class>.button</Selector Class><Selector Pseudo>:hover</Selector Pseudo><br/>
0554 <Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>black</Color><br/>
0555 <Normal Text></Normal Text><br/>
0556 <Normal Text>    </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Value>color</Value><Normal Text>)</Normal Text><br/>
0557 <Normal Text>      </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>#036</Color><br/>
0558 <Normal Text></Normal Text><br/>
0559 <At Rule>@keyframes</At Rule><Normal Text> slide-in</Normal Text><br/>
0560 <Normal Text>  from</Normal Text><br/>
0561 <Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
0562 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><br/>
0563 <Normal Text></Normal Text><br/>
0564 <Normal Text></Normal Text><br/>
0565 <Normal Text>  70%</Normal Text><br/>
0566 <Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>90</Number><Unit>%</Unit><br/>
0567 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>%</Unit><br/>
0568 <Normal Text></Normal Text><br/>
0569 <Normal Text></Normal Text><br/>
0570 <Normal Text>  to</Normal Text><br/>
0571 <Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><br/>
0572 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
0573 <Normal Text></Normal Text><br/>
0574 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>100</Number><Normal Text>  </Normal Text><Comment>// 100</Comment><br/>
0575 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.8</Number><Normal Text>  </Normal Text><Comment>// 0.8</Comment><br/>
0576 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 16px</Comment><br/>
0577 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 10px*px (read "square pixels")</Comment><br/>
0578 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5.2e3</Number><Normal Text>  </Normal Text><Comment>// 5200</Comment><br/>
0579 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>6e-2</Number><Normal Text>  </Normal Text><Comment>// 0.06</Comment><br/>
0580 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>4</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>6</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 24px*px (read "square pixels")</Comment><br/>
0581 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 2.5px/s (read "pixels per second")</Comment><br/>
0582 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>deg</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>24</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// 3.125px*deg/s*em</Comment><br/>
0583 <Comment>//                                 (read "pixel-degrees per second-em")</Comment><br/>
0584 <Comment></Comment><br/>
0585 <Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/>
0586 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 20deg/s</Comment><br/>
0587 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 0.05s/deg</Comment><br/>
0588 <Variable>$transition-speed</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>s</Unit><Operator>/</Operator><Number>50</Number><Unit>px</Unit><br/>
0589 <Normal Text></Normal Text><br/>
0590 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>unquote(</Function><String>".widget:hover"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// .widget:hover</Comment><br/>
0591 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>quote(</Function><Value>bold</Value><Function>)</Function><Normal Text>  </Normal Text><Comment>// "bold"</Comment><br/>
0592 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.012345678912345</Number><Normal Text>  </Normal Text><Comment>// 0.0123456789</Comment><br/>
0593 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.01234567891</Number><Normal Text> == </Normal Text><Number>0.01234567899</Number><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0594 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1.00000000009</Number><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
0595 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.99999999991</Number><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
0596 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\"</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// '"'</Comment><br/>
0597 <At Rule>@debug</At Rule><Normal Text> \.widget  </Normal Text><Comment>// \.widget</Comment><br/>
0598 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\a</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "\a" (a string containing only a newline)</Comment><br/>
0599 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"line1</String><SpecialChar>\a</SpecialChar><String> line2"</String><Normal Text>  </Normal Text><Comment>// "line1\a line2" (foo and bar are separated by a newline)</Comment><br/>
0600 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Nat + Liz </String><SpecialChar>\1F46D</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "Nat + Liz 👭"</Comment><br/>
0601 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica Neue"</String><Normal Text>  </Normal Text><Comment>// "Helvetica Neue"</Comment><br/>
0602 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"C:</String><SpecialChar>\\</SpecialChar><String>Program Files"</String><Normal Text>  </Normal Text><Comment>// "C:\\Program Files"</Comment><br/>
0603 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\"</SpecialChar><String>Don't Fear the Reaper</String><SpecialChar>\"</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "\"Don't Fear the Reaper\""</Comment><br/>
0604 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"line1</String><SpecialChar>\a</SpecialChar><String> line2"</String><Normal Text>  </Normal Text><Comment>// "line1\a line2"</Comment><br/>
0605 <Normal Text></Normal Text><br/>
0606 <Variable>$roboto-variant</Variable><Normal Text>: </Normal Text><String>"Mono"</String><br/>
0607 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Roboto </String><Interpolation>#{</Interpolation><Variable>$roboto-variant</Variable><Interpolation>}</Interpolation><String>"</String><Normal Text>  </Normal Text><Comment>// "Roboto Mono"</Comment><br/>
0608 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value>bold</Value><Normal Text>  </Normal Text><Comment>// bold</Comment><br/>
0609 <At Rule>@debug</At Rule><Normal Text> -webkit-flex  </Normal Text><Comment>// -webkit-flex</Comment><br/>
0610 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>--</Operator><Number>123</Number><Normal Text>  </Normal Text><Comment>// --123</Comment><br/>
0611 <Normal Text></Normal Text><br/>
0612 <Variable>$prefix</Variable><Normal Text>: ms</Normal Text><br/>
0613 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>-</Operator><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-flex  </Normal Text><Comment>// -ms-flex</Comment><br/>
0614 <At Rule>@debug</At Rule><Normal Text> \1F46D  </Normal Text><Comment>// 👭</Comment><br/>
0615 <At Rule>@debug</At Rule><Normal Text> \21  </Normal Text><Comment>// \!</Comment><br/>
0616 <At Rule>@debug</At Rule><Normal Text> \7Fx  </Normal Text><Comment>// \7f x</Comment><br/>
0617 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-length(</Function><Normal Text>\7Fx</Normal Text><Function>)</Function><Normal Text>  </Normal Text><Comment>// 5</Comment><br/>
0618 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
0619 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Neue"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 11</Comment><br/>
0620 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-slice(</Function><String>"Roboto Mono"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Operator>-</Operator><Number>4</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// "Mono"</Comment><br/>
0621 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#f2ece4</Color><Normal Text> </Normal Text><Comment>// #f2ece4</Comment><br/>
0622 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#b37399aa</Color><Normal Text> </Normal Text><Comment>// rgba(179, 115, 153, 67%)</Comment><br/>
0623 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>midnightblue</Color><Normal Text> </Normal Text><Comment>// #191970</Comment><br/>
0624 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgb(</Function><Number>204</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>102</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// #c69</Comment><br/>
0625 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgba(</Function><Number>107</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>113</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>127</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.8</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// rgba(107, 113, 127, 0.8)</Comment><br/>
0626 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsl(</Function><Number>228</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>7</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>86</Number><Unit>%</Unit><Function>)</Function><Normal Text> </Normal Text><Comment>// #dadbdf</Comment><br/>
0627 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsla(</Function><Number>20</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>85</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.7</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// rgb(225, 215, 210, 0.7)</Comment><br/>
0628 <Variable>$venus</Variable><Normal Text>: </Normal Text><Color>#998099</Color><br/>
0629 <Normal Text></Normal Text><br/>
0630 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>scale-color(</Function><Variable>$venus</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Operator>+</Operator><Number>15</Number><Unit>%</Unit><Function>)</Function><Normal Text> </Normal Text><Comment>// #a893a8</Comment><br/>
0631 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>mix(</Function><Variable>$venus</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>midnightblue</Color><Function>)</Function><Normal Text> </Normal Text><Comment>// #594d85</Comment><br/>
0632 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>nth(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>12</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>2</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// 12px</Comment><br/>
0633 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>nth(</Function><Normal Text>[line1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> line2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> line3]</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Operator>-</Operator><Number>1</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// line3</Comment><br/>
0634 <Variable>$prefixes-by-browser</Variable><Normal Text>: (</Normal Text><String>"firefox"</String><Normal Text>: moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"safari"</String><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"ie"</String><Normal Text>: ms)</Normal Text><br/>
0635 <Normal Text></Normal Text><br/>
0636 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>prefixes-for-browsers(</Function><Variable>$browsers</Variable><Function>)</Function><br/>
0637 <Normal Text>  </Normal Text><Variable>$prefixes</Variable><Normal Text>: ()</Normal Text><br/>
0638 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$browser</Variable><Normal Text> in </Normal Text><Variable>$browsers</Variable><br/>
0639 <Normal Text>    </Normal Text><Variable>$prefixes</Variable><Normal Text>: </Normal Text><Function>append(</Function><Variable>$prefixes</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$prefixes-by-browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$browser</Variable><Function>))</Function><br/>
0640 <Normal Text></Normal Text><br/>
0641 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$prefixes</Variable><br/>
0642 <Normal Text></Normal Text><br/>
0643 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>prefixes-for-browsers(</Function><String>"firefox"</String><Normal Text> </Normal Text><String>"ie"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// moz ms</Comment><br/>
0644 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$args</Variable><Operator>...</Operator><Function>)</Function><br/>
0645 <Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
0646 <Normal Text></Normal Text><br/>
0647 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
0648 <Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0649 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0650 <Normal Text></Normal Text><br/>
0651 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><Normal Text>;</Normal Text><br/>
0652 <Variable>$font-weights</Variable><Normal Text>: (</Normal Text><String>"regular"</String><Normal Text>: </Normal Text><Number>400</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Normal Text>: </Normal Text><Number>500</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"bold"</String><Normal Text>: </Normal Text><Number>700</Number><Normal Text>)</Normal Text><br/>
0653 <Normal Text></Normal Text><br/>
0654 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$font-weights</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 500</Comment><br/>
0655 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$font-weights</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"extra-bold"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
0656 <Variable>$icons</Variable><Normal Text>: (</Normal Text><String>"eye"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text>)</Normal Text><br/>
0657 <Normal Text></Normal Text><br/>
0658 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
0659 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
0660 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
0661 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
0662 <Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
0663 <Normal Text></Normal Text><br/>
0664 <Variable>$prefixes-by-browser</Variable><Normal Text>: (</Normal Text><String>"firefox"</String><Normal Text>: moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"safari"</String><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"ie"</String><Normal Text>: ms)</Normal Text><br/>
0665 <Normal Text></Normal Text><br/>
0666 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>add-browser-prefix(</Function><Variable>$browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefix</Variable><Function>)</Function><br/>
0667 <Normal Text>  </Normal Text><Variable>$prefixes-by-browser</Variable><Normal Text>: </Normal Text><Function>map-merge(</Function><Variable>$prefixes-by-browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> (</Normal Text><Variable>$browser</Variable><Normal Text>: </Normal Text><Variable>$prefix</Variable><Function>)</Function><Normal Text>)</Normal Text><br/>
0668 <Normal Text></Normal Text><br/>
0669 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>add-browser-prefix(</Function><String>"opera"</String><Separator Symbol>,</Separator Symbol><Normal Text> o</Normal Text><Function>)</Function><br/>
0670 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$prefixes-by-browser</Variable><br/>
0671 <Comment>// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)</Comment><br/>
0672 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0673 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0674 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> < </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0675 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>in</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0676 <Normal Text></Normal Text><br/>
0677 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Roboto"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
0678 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Normal Text>(</Normal Text><String>"large"</String><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><Normal Text>, </Normal Text><String>"small"</String><Normal Text>)  </Normal Text><Comment>// null</Comment><br/>
0679 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>&</Operator><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
0680 <Variable>$fonts</Variable><Normal Text>: (</Normal Text><String>"serif"</String><Normal Text>: </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"monospace"</String><Normal Text>: </Normal Text><String>"Consolas"</String><Normal Text>)</Normal Text><br/>
0681 <Normal Text></Normal Text><br/>
0682 <Normal Text>h3</Normal Text><br/>
0683 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>18</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"sans"</String><Function>)</Function><br/>
0684 <Normal Text></Normal Text><br/>
0685 <Variable>$fonts</Variable><Normal Text>: (</Normal Text><String>"serif"</String><Normal Text>: </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"monospace"</String><Normal Text>: </Normal Text><String>"Consolas"</String><Normal Text>)</Normal Text><br/>
0686 <Normal Text></Normal Text><br/>
0687 <Normal Text>h3</Normal Text><br/>
0688 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>:</Normal Text><br/>
0689 <Normal Text>    </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>18</Number><Unit>px</Unit><br/>
0690 <Normal Text>    </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
0691 <Normal Text>    </Normal Text><Property>family</Property><Normal Text>: </Normal Text><Function>map-get(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"sans"</String><Function>)</Function><br/>
0692 <Normal Text></Normal Text><br/>
0693 <Selector Tag>copy</Selector Tag><Normal Text> </Normal Text><Selector Tag>of</Selector Tag><Normal Text> $</Normal Text><Selector Tag>list</Selector Tag><Normal Text> </Normal Text><Selector Tag>with</Selector Tag><Normal Text> </Normal Text><Selector Tag>all</Selector Tag><Normal Text> </Normal Text><Selector Tag>elements</Selector Tag><Normal Text> </Normal Text><Selector Tag>for</Selector Tag><Normal Text> </Normal Text><Selector Tag>which</Selector Tag><Normal Text> $</Normal Text><Selector Tag>condition</Selector Tag><Normal Text> </Normal Text><Selector Tag>returns</Selector Tag><Normal Text> `true`</Normal Text><br/>
0694 <Comment>/// removed.</Comment><br/>
0695 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>remove-where(</Function><Variable>$list</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$condition</Variable><Function>)</Function><br/>
0696 <Normal Text>  </Normal Text><Variable>$new-list</Variable><Normal Text>: ()</Normal Text><br/>
0697 <Normal Text>  </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Function>list-separator(</Function><Variable>$list</Variable><Function>)</Function><br/>
0698 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$element</Variable><Normal Text> in </Normal Text><Variable>$list</Variable><br/>
0699 <Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Function>call(</Function><Variable>$condition</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$element</Variable><Function>)</Function><br/>
0700 <Normal Text>      </Normal Text><Variable>$new-list</Variable><Normal Text>: </Normal Text><Function>append(</Function><Variable>$new-list</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$element</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Variable>$separator</Variable><Function>)</Function><br/>
0701 <Normal Text></Normal Text><br/>
0702 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$new-list</Variable><br/>
0703 <Normal Text></Normal Text><br/>
0704 <Variable>$fonts</Variable><Normal Text>: Tahoma</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Geneva</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Arial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
0705 <Normal Text></Normal Text><br/>
0706 <Normal Text>content</Normal Text><br/>
0707 <Normal Text>  </Normal Text><At Rule>@function</At Rule><Normal Text> </Normal Text><Function>contains-helvetica(</Function><Variable>$string</Variable><Function>)</Function><br/>
0708 <Normal Text>    </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><br/>
0709 <Normal Text></Normal Text><br/>
0710 <Normal Text>  </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><Function>remove-where(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>get-function(</Function><String>"contains-helvetica"</String><Function>))</Function><br/>
0711 <Normal Text></Normal Text><br/>
0712 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0713 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0714 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0715 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>96</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0716 <Normal Text></Normal Text><br/>
0717 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> == Helvetica  </Normal Text><Comment>// true</Comment><br/>
0718 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><String>"Arial"</String><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0719 <Normal Text></Normal Text><br/>
0720 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsl(</Function><Number>34</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>35</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>92.1</Number><Unit>%</Unit><Function>)</Function><Normal Text> == </Normal Text><Color>#f2ece4</Color><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0721 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgba(</Function><Number>179</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>115</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Function>rgba(</Function><Number>179</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>115</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.8</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0722 <Normal Text></Normal Text><br/>
0723 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) == (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
0724 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>14</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
0725 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text>, </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text>, </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
0726 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= [</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>]  </Normal Text><Comment>// true</Comment><br/>
0727 <Normal Text></Normal Text><br/>
0728 <Variable>$theme</Variable><Normal Text>: (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"nebula"</String><Normal Text>: </Normal Text><Color>#d2e1dd</Color><Normal Text>)</Normal Text><br/>
0729 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$theme</Variable><Normal Text> == (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Normal Text>, </Normal Text><String>"nebula"</String><Normal Text>: </Normal Text><Color>#d2e1dd</Color><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
0730 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$theme</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Normal Text>, </Normal Text><String>"iron"</String><Normal Text>: </Normal Text><Color>#dadbdf</Color><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
0731 <Normal Text></Normal Text><br/>
0732 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> == </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0733 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0734 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0735 <Normal Text></Normal Text><br/>
0736 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text> == </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0737 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Function>get-function(</Function><String>"hsla"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0738 <Normal Text></Normal Text><br/>
0739 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>15</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 25s</Comment><br/>
0740 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.8958333333in</Comment><br/>
0741 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px*px</Comment><br/>
0742 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>12</Number><Unit>px</Unit><Operator>/</Operator><Number>4</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// 3</Comment><br/>
0743 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text> </Normal Text><Operator>%</Operator><Normal Text> </Normal Text><Number>9</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.0625in</Comment><br/>
0744 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px/30px</Comment><br/>
0745 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text>) </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
0746 <Normal Text></Normal Text><br/>
0747 <Variable>$result</Variable><Normal Text>: </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><br/>
0748 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
0749 <Normal Text></Normal Text><br/>
0750 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty()</Function><br/>
0751 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><br/>
0752 <Normal Text></Normal Text><br/>
0753 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty()</Function><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
0754 <Normal Text></Normal Text><br/>
0755 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// 0.5</Comment><br/>
0756 <At Rule>@debug</At Rule><Normal Text> (</Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>sans-serif</Value><Normal Text>)  </Normal Text><Comment>// bold 15px/30px sans-serif</Comment><br/>
0757 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>  </Normal Text><Comment>// 1.5</Comment><br/>
0758 <Normal Text></Normal Text><br/>
0759 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>4</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>6</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 24px*px (read "square pixels")</Comment><br/>
0760 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 2.5px/s (read "pixels per second")</Comment><br/>
0761 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>deg</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>24</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// 3.125px*deg/s*em</Comment><br/>
0762 <Comment>//                                 (read "pixel-degrees per second-em")</Comment><br/>
0763 <Comment></Comment><br/>
0764 <Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/>
0765 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 20deg/s</Comment><br/>
0766 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 0.05s/deg</Comment><br/>
0767 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>100</Number><Normal Text> > </Normal Text><Number>50</Number><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0768 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> < </Normal Text><Number>17</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0769 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>96</Number><Unit>px</Unit><Normal Text> >= </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0770 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1000</Number><Unit>ms</Unit><Normal Text> <= </Normal Text><Number>1</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0771 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>" Neue"</String><Normal Text>  </Normal Text><Comment>// "Helvetica Neue"</Comment><br/>
0772 <At Rule>@debug</At Rule><Normal Text> sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Value>serif</Value><Normal Text>  </Normal Text><Comment>// sans-serif</Comment><br/>
0773 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Interpolation>}</Interpolation><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px/30px</Comment><br/>
0774 <At Rule>@debug</At Rule><Normal Text> sans </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Value>serif</Value><Normal Text>  </Normal Text><Comment>// sans-serif</Comment><br/>
0775 <Normal Text></Normal Text><br/>
0776 <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Elapsed time: "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// "Elapsed time: 10s";</Comment><br/>
0777 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>" is a boolean value"</String><Normal Text>  </Normal Text><Comment>// "true is a boolean value";</Comment><br/>
0778 <Normal Text></Normal Text><br/>
0779 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// /15px</Comment><br/>
0780 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> moz  </Normal Text><Comment>// -moz</Comment><br/>
0781 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0782 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0783 <Normal Text></Normal Text><br/>
0784 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0785 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0786 <Normal Text></Normal Text><br/>
0787 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Keyword>or</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0788 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text> </Normal Text><Keyword>or</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0789 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>var(</Function><Variable>--main-bg-color</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// var(--main-bg-color)</Comment><br/>
0790 <Normal Text></Normal Text><br/>
0791 <Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#f2ece4</Color><br/>
0792 <Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#e1d7d2</Color><br/>
0793 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>radial-gradient(</Function><Variable>$primary</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$accent</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// radial-gradient(#f2ece4, #e1d7d2)</Comment><br/>
0794 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
0795 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Neue"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 11</Comment><br/>
0796 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>2</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0797 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>em</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
0798 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>10</Number><Unit>cm</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>mm</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
0799 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px 20px 30px</Comment><br/>
0800 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Normal Text>(</Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>red</Color><Function>)</Function><Normal Text>, </Normal Text><Color>green</Color><Normal Text>)  </Normal Text><Comment>// blue, red, green</Comment><br/>
0801 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>40</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px 20px (30px 40px)</Comment><br/>
0802 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$separator</Variable><Normal Text>: comma</Normal Text><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px, 20px</Comment><br/>
0803 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Normal Text>(</Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>red</Color><Function>)</Function><Normal Text>, </Normal Text><Color>green</Color><Normal Text>, </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Value>space</Value><Normal Text>)  </Normal Text><Comment>// blue red green</Comment><br/>
0804 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$args</Variable><Operator>...</Operator><Function>)</Function><br/>
0805 <Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
0806 <Normal Text></Normal Text><br/>
0807 <Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
0808 <Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0809 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
0810 <Normal Text></Normal Text><br/>
0811 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><Normal Text>;</Normal Text><br/>
0812 <Normal Text></Normal Text><br/>
0813 <Variable>$font-weights</Variable><Normal Text>: (</Normal Text><String>"regular"</String><Normal Text>: </Normal Text><Number>400</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Normal Text>: </Normal Text><Number>500</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"bold"</String><Normal Text>: </Normal Text><Number>700</Number><Normal Text>)</Normal Text><br/>
0814 <Normal Text></Normal Text><br/>
0815 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-values(</Function><Variable>$font-weights</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// 400, 500, 700</Comment><br/>
0816 <Normal Text></Normal Text><br/>
0817 <Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0818 <Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
0819 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
0820 <Normal Text>  -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
0821 <Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
0822 <Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
0823 <Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
0824 <Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>-image: </Normal Text><Variable>$value</Variable><br/>