Differential D23195 Diff 63845 autotests/reference/highlight.scss.ref

Changeset View

Standalone View

View Options

autotests/reference/highlight.scss.ref

Show First 20 Lines • Show All 356 Lines • ▼ Show 20 Line(s)
357<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> 357​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
358<Normal Text>}</Normal Text><br/> 358​<Normal Text>}</Normal Text><br/>
359<Normal Text></Normal Text><br/> 359​<Normal Text></Normal Text><br/>
360<Selector Id>#sidebar</Selector Id><Normal Text> {</Normal Text><br/> 360​<Selector Id>#sidebar</Selector Id><Normal Text> {</Normal Text><br/>
361<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> 361​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
362<Normal Text>}</Normal Text><br/> 362​<Normal Text>}</Normal Text><br/>
363<Normal Text></Normal Text><br/> 363​<Normal Text></Normal Text><br/>
364<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>firefox-message</Function><Normal Text>(</Normal Text><Variable>$selector</Variable><Normal Text>) {</Normal Text><br/> 364​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>firefox-message</Function><Normal Text>(</Normal Text><Variable>$selector</Variable><Normal Text>) {</Normal Text><br/>
365<Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Variable>#{$selector}</Variable><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> 365​<Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$selector</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
366<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Hi, Firefox users!"</String><Separator Symbol>;</Separator Symbol><br/> 366​<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Hi, Firefox users!"</String><Separator Symbol>;</Separator Symbol><br/>
367<Normal Text> }</Normal Text><br/> 367​<Normal Text> }</Normal Text><br/>
368<Normal Text>}</Normal Text><br/> 368​<Normal Text>}</Normal Text><br/>
369<Normal Text></Normal Text><br/> 369​<Normal Text></Normal Text><br/>
370<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>firefox-message(</Function><String>".header"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 370​<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>firefox-message(</Function><String>".header"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
371<Normal Text></Normal Text><br/> 371​<Normal Text></Normal Text><br/>
372<Variable>$map</Variable><Normal Text>: (key1: value1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key2: value2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key3: value3)</Normal Text><Separator Symbol>;</Separator Symbol><br/> 372​<Variable>$map</Variable><Normal Text>: (key1: value1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key2: value2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key3: value3)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
373<Normal Text></Normal Text><br/> 373​<Normal Text></Normal Text><br/>
374<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 374​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
375<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Plain CSS, no division</Comment><br/> 375​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Plain CSS, no division</Comment><br/>
376<Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>1000</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 376​<Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>1000</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
377<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a variable, does division</Comment><br/> 377​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a variable, does division</Comment><br/>
378<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>round(</Function><Number>1.5</Number><Function>)</Function><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a function, does division</Comment><br/> 378​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>round(</Function><Number>1.5</Number><Function>)</Function><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a function, does division</Comment><br/>
379<Normal Text> </Normal Text><Property>height</Property><Normal Text>: (</Normal Text><Number>500</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses parentheses, does division</Comment><br/> 379​<Normal Text> </Normal Text><Property>height</Property><Normal Text>: (</Normal Text><Number>500</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses parentheses, does division</Comment><br/>
380<Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses +, does division</Comment><br/> 380​<Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses +, does division</Comment><br/>
381<Normal Text> </Normal Text><Property>font</Property><Normal Text>: (</Normal Text><Value>italic</Value><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// In a list, parentheses don't count</Comment><br/> 381​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: (</Normal Text><Value>italic</Value><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// In a list, parentheses don't count</Comment><br/>
382<Normal Text>}</Normal Text><br/> 382​<Normal Text>}</Normal Text><br/>
383<Normal Text></Normal Text><br/> 383​<Normal Text></Normal Text><br/>
384<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 384​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
385<Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 385​<Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
386<Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 386​<Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
387<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Variable>#{$font-size}</Variable><Operator>/</Operator><Variable>#{$line-height}</Variable><Separator Symbol>;</Separator Symbol><br/> 387​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$font-size</Variable><Interpolation>}</Interpolation><Operator>/</Operator><Interpolation>#{</Interpolation><Variable>$line-height</Variable><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
388<Normal Text>}</Normal Text><br/> 388​<Normal Text>}</Normal Text><br/>
389<Normal Text></Normal Text><br/> 389​<Normal Text></Normal Text><br/>
390<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 390​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
391<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#010203</Color><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Color>#040506</Color><Separator Symbol>;</Separator Symbol><br/> 391​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#010203</Color><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Color>#040506</Color><Separator Symbol>;</Separator Symbol><br/>
392<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 392​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
393<Normal Text>}</Normal Text><br/> 393​<Normal Text>}</Normal Text><br/>
394<Normal Text></Normal Text><br/> 394​<Normal Text></Normal Text><br/>
395<Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 395​<Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
396<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 396​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
397<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>opacify(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.3</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 397​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>opacify(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.3</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
398<Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>transparentize(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.25</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 398​<Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>transparentize(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.25</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
399<Normal Text>}</Normal Text><br/> 399​<Normal Text>}</Normal Text><br/>
400<Normal Text></Normal Text><br/> 400​<Normal Text></Normal Text><br/>
401<Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 401​<Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
402<Variable>$green</Variable><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/> 402​<Variable>$green</Variable><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/>
403<Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/> 403​<Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
404<Normal Text> </Normal Text><Property>filter</Property><Normal Text>: progid:DXImageTransform</Normal Text><Number>.</Number><Normal Text>Microsoft</Normal Text><Number>.</Number><Function>gradient(</Function><Normal Text>enabled=</Normal Text><String>'false'</String><Separator Symbol>,</Separator Symbol><Normal Text> startColorstr=</Normal Text><String>'</String><SpecialChar>#{</SpecialChar><Function>ie-hex-str(</Function><Variable>$green</Variable><Function>)</Function><SpecialChar>}</SpecialChar><String>'</String><Separator Symbol>,</Separator Symbol><Normal Text> endColorstr=</Normal Text><String>'</String><SpecialChar>#{</SpecialChar><Function>ie-hex-str(</Function><Variable>$translucent-red</Variable><Function>)</Function><SpecialChar>}</SpecialChar><String>'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 404​<Normal Text> </Normal Text><Property>filter</Property><Normal Text>: progid:DXImageTransform</Normal Text><Number>.</Number><Normal Text>Microsoft</Normal Text><Number>.</Number><Function>gradient(</Function><Normal Text>enabled=</Normal Text><String>'false'</String><Separator Symbol>,</Separator Symbol><Normal Text> startColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$green</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Separator Symbol>,</Separator Symbol><Normal Text> endColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$translucent-red</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
405<Normal Text>}</Normal Text><br/> 405​<Normal Text>}</Normal Text><br/>
406<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 406​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
407<Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: e </Normal Text><Operator>+</Operator><Normal Text> -resize</Normal Text><Separator Symbol>;</Separator Symbol><br/> 407​<Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: e </Normal Text><Operator>+</Operator><Normal Text> -resize</Normal Text><Separator Symbol>;</Separator Symbol><br/>
408<Normal Text>}</Normal Text><br/> 408​<Normal Text>}</Normal Text><br/>
409<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> 409​<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
410<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Foo "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> Bar</Normal Text><Separator Symbol>;</Separator Symbol><br/> 410​<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Foo "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> Bar</Normal Text><Separator Symbol>;</Separator Symbol><br/>
411<Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>"serif"</String><Separator Symbol>;</Separator Symbol><br/> 411​<Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>"serif"</String><Separator Symbol>;</Separator Symbol><br/>
412<Normal Text>}</Normal Text><br/> 412​<Normal Text>}</Normal Text><br/>
413<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> 413​<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
414<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate #{5 + 10} pies!"</String><Separator Symbol>;</Separator Symbol><br/> 414​<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate </String><Interpolation>#{</Interpolation><Number>5</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Interpolation>}</Interpolation><String> pies!"</String><Separator Symbol>;</Separator Symbol><br/>
415<Normal Text>}</Normal Text><br/> 415​<Normal Text>}</Normal Text><br/>
416<Variable>$value</Variable><Normal Text>: null</Normal Text><Separator Symbol>;</Separator Symbol><br/> 416​<Variable>$value</Variable><Normal Text>: null</Normal Text><Separator Symbol>;</Separator Symbol><br/>
417<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> 417​<Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
418<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate #{$value} pies!"</String><Separator Symbol>;</Separator Symbol><br/> 418​<Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate </String><Interpolation>#{</Interpolation><Variable>$value</Variable><Interpolation>}</Interpolation><String> pies!"</String><Separator Symbol>;</Separator Symbol><br/>
419<Normal Text>}</Normal Text><br/> 419​<Normal Text>}</Normal Text><br/>
420<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 420​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
421<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/> 421​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
422<Normal Text>}</Normal Text><br/> 422​<Normal Text>}</Normal Text><br/>
423<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 423​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
424<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>hsl(</Function><Variable>$hue</Variable><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$saturation</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 424​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>hsl(</Function><Variable>$hue</Variable><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$saturation</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
425<Normal Text>}</Normal Text><br/> 425​<Normal Text>}</Normal Text><br/>
426<Variable>$name</Variable><Normal Text>: foo</Normal Text><Separator Symbol>;</Separator Symbol><br/> 426​<Variable>$name</Variable><Normal Text>: foo</Normal Text><Separator Symbol>;</Separator Symbol><br/>
427<Variable>$attr</Variable><Normal Text>: border</Normal Text><Separator Symbol>;</Separator Symbol><br/> 427​<Variable>$attr</Variable><Normal Text>: border</Normal Text><Separator Symbol>;</Separator Symbol><br/>
428<Selector Tag>p</Selector Tag><Selector Class>.</Selector Class><Variable>#{$name}</Variable><Normal Text> {</Normal Text><br/> 428​<Selector Tag>p</Selector Tag><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
429<Normal Text> </Normal Text><Variable>#{$attr}</Variable><Unknown Property>-color</Unknown Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/> 429​<Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$attr</Variable><Interpolation>}</Interpolation><Unknown Property>-color</Unknown Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
430<Normal Text>}</Normal Text><br/> 430​<Normal Text>}</Normal Text><br/>
431<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 431​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
432<Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 432​<Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
433<Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 433​<Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
434<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Variable>#{$font-size}</Variable><Operator>/</Operator><Variable>#{$line-height}</Variable><Separator Symbol>;</Separator Symbol><br/> 434​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$font-size</Variable><Interpolation>}</Interpolation><Operator>/</Operator><Interpolation>#{</Interpolation><Variable>$line-height</Variable><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
435<Normal Text>}</Normal Text><br/> 435​<Normal Text>}</Normal Text><br/>
436<Normal Text></Normal Text><br/> 436​<Normal Text></Normal Text><br/>
437<Selector Class>.foo.bar</Selector Class><Normal Text> </Normal Text><Selector Class>.baz.bang</Selector Class><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Class>.bip.qux</Selector Class><Normal Text> {</Normal Text><br/> 437​<Selector Class>.foo.bar</Selector Class><Normal Text> </Normal Text><Selector Class>.baz.bang</Selector Class><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Class>.bip.qux</Selector Class><Normal Text> {</Normal Text><br/>
438<Normal Text> </Normal Text><Variable>$selector</Variable><Normal Text>: &</Normal Text><Separator Symbol>;</Separator Symbol><br/> 438​<Normal Text> </Normal Text><Variable>$selector</Variable><Normal Text>: &</Normal Text><Separator Symbol>;</Separator Symbol><br/>
439<Normal Text>}</Normal Text><br/> 439​<Normal Text>}</Normal Text><br/>
440<Normal Text></Normal Text><br/> 440​<Normal Text></Normal Text><br/>
441<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/> 441​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/>
442<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/> 442​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/>
Show All 17 Lines
460<Normal Text>}</Normal Text><br/> 460​<Normal Text>}</Normal Text><br/>
461<Normal Text></Normal Text><br/> 461​<Normal Text></Normal Text><br/>
462<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo.css"</String><Separator Symbol>;</Separator Symbol><br/> 462​<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo.css"</String><Separator Symbol>;</Separator Symbol><br/>
463<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/> 463​<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/>
464<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://foo.com/bar"</String><Separator Symbol>;</Separator Symbol><br/> 464​<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://foo.com/bar"</String><Separator Symbol>;</Separator Symbol><br/>
465<At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>foo</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 465​<At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>foo</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
466<Normal Text></Normal Text><br/> 466​<Normal Text></Normal Text><br/>
467<Variable>$family</Variable><Normal Text>: </Normal Text><Function>unquote(</Function><String>"Droid+Sans"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 467​<Variable>$family</Variable><Normal Text>: </Normal Text><Function>unquote(</Function><String>"Droid+Sans"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
468<At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"http://fonts.googleapis.com/css?family=#{$family}"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 468​<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><Separator Symbol>;</Separator Symbol><br/>
469<Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> 469​<Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
470<Normal Text> </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><String>"example"</String><Separator Symbol>;</Separator Symbol><br/> 470​<Normal Text> </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><String>"example"</String><Separator Symbol>;</Separator Symbol><br/>
471<Normal Text>}</Normal Text><br/> 471​<Normal Text>}</Normal Text><br/>
472<Normal Text></Normal Text><br/> 472​<Normal Text></Normal Text><br/>
473<Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> 473​<Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
474<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 474​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
475<Normal Text> </Normal Text><At Rule>@media</At Rule><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/> 475​<Normal Text> </Normal Text><At Rule>@media</At Rule><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/>
476<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 476​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
477<Normal Text> }</Normal Text><br/> 477​<Normal Text> }</Normal Text><br/>
478<Normal Text>}</Normal Text><br/> 478​<Normal Text>}</Normal Text><br/>
479<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> {</Normal Text><br/> 479​<At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> {</Normal Text><br/>
480<Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> 480​<Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
481<Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/> 481​<Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/>
482<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 482​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
483<Normal Text> }</Normal Text><br/> 483​<Normal Text> }</Normal Text><br/>
484<Normal Text> }</Normal Text><br/> 484​<Normal Text> }</Normal Text><br/>
485<Normal Text>}</Normal Text><br/> 485​<Normal Text>}</Normal Text><br/>
486<Normal Text></Normal Text><br/> 486​<Normal Text></Normal Text><br/>
487<Variable>$media</Variable><Normal Text>: screen</Normal Text><Separator Symbol>;</Separator Symbol><br/> 487​<Variable>$media</Variable><Normal Text>: screen</Normal Text><Separator Symbol>;</Separator Symbol><br/>
488<Variable>$feature</Variable><Normal Text>: -webkit-min-device-pixel-ratio</Normal Text><Separator Symbol>;</Separator Symbol><br/> 488​<Variable>$feature</Variable><Normal Text>: -webkit-min-device-pixel-ratio</Normal Text><Separator Symbol>;</Separator Symbol><br/>
489<Variable>$value</Variable><Normal Text>: </Normal Text><Number>1.5</Number><Separator Symbol>;</Separator Symbol><br/> 489​<Variable>$value</Variable><Normal Text>: </Normal Text><Number>1.5</Number><Separator Symbol>;</Separator Symbol><br/>
490<Normal Text></Normal Text><br/> 490​<Normal Text></Normal Text><br/>
491<At Rule>@media</At Rule><Normal Text> </Normal Text><Variable>#{$media}</Variable><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Variable>$feature</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text>) {</Normal Text><br/> 491​<At Rule>@media</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$media</Variable><Interpolation>}</Interpolation><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Variable>$feature</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text>) {</Normal Text><br/>
492<Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> 492​<Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
493<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 493​<Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
494<Normal Text> }</Normal Text><br/> 494​<Normal Text> }</Normal Text><br/>
495<Normal Text>}</Normal Text><br/> 495​<Normal Text>}</Normal Text><br/>
496<Normal Text></Normal Text><br/> 496​<Normal Text></Normal Text><br/>
497<Selector Class>.error</Selector Class><Normal Text> {</Normal Text><br/> 497​<Selector Class>.error</Selector Class><Normal Text> {</Normal Text><br/>
498<Normal Text> </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><Separator Symbol>;</Separator Symbol><br/> 498​<Normal Text> </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><Separator Symbol>;</Separator Symbol><br/>
499<Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><Separator Symbol>;</Separator Symbol><br/> 499​<Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><Separator Symbol>;</Separator Symbol><br/>
Show All 31 Lines
531<Normal Text> }</Normal Text><br/> 531​<Normal Text> }</Normal Text><br/>
532<Normal Text> }</Normal Text><br/> 532​<Normal Text> }</Normal Text><br/>
533<Normal Text>}</Normal Text><br/> 533​<Normal Text>}</Normal Text><br/>
534<Normal Text></Normal Text><br/> 534​<Normal Text></Normal Text><br/>
535<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>12</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/> 535​<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>12</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
536<Normal Text></Normal Text><br/> 536​<Normal Text></Normal Text><br/>
537<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/> 537​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/>
538<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> 538​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
539<Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming #{$x} to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/> 539​<Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming </String><Interpolation>#{</Interpolation><Variable>$x</Variable><Interpolation>}</Interpolation><String> to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/>
540<Normal Text> </Normal Text><Variable>$x</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><br/> 540​<Normal Text> </Normal Text><Variable>$x</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><br/>
541<Normal Text> }</Normal Text><br/> 541​<Normal Text> }</Normal Text><br/>
542<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> 542​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
543<Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming #{$y} to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/> 543​<Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming </String><Interpolation>#{</Interpolation><Variable>$y</Variable><Interpolation>}</Interpolation><String> to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/>
544<Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> 544​<Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
545<Normal Text> }</Normal Text><br/> 545​<Normal Text> }</Normal Text><br/>
546<Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> 546​<Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
547<Normal Text>}</Normal Text><br/> 547​<Normal Text>}</Normal Text><br/>
548<Normal Text></Normal Text><br/> 548​<Normal Text></Normal Text><br/>
549<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/> 549​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/>
550<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> 550​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
551<Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$x may not be unitless, was #{$x}."</String><Separator Symbol>;</Separator Symbol><br/> 551​<Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$x may not be unitless, was </String><Interpolation>#{</Interpolation><Variable>$x</Variable><Interpolation>}</Interpolation><String>."</String><Separator Symbol>;</Separator Symbol><br/>
552<Normal Text> }</Normal Text><br/> 552​<Normal Text> }</Normal Text><br/>
553<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> 553​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
554<Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$y may not be unitless, was #{$y}."</String><Separator Symbol>;</Separator Symbol><br/> 554​<Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$y may not be unitless, was </String><Interpolation>#{</Interpolation><Variable>$y</Variable><Interpolation>}</Interpolation><String>."</String><Separator Symbol>;</Separator Symbol><br/>
555<Normal Text> }</Normal Text><br/> 555​<Normal Text> }</Normal Text><br/>
556<Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> 556​<Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
557<Normal Text>}</Normal Text><br/> 557​<Normal Text>}</Normal Text><br/>
558<Normal Text></Normal Text><br/> 558​<Normal Text></Normal Text><br/>
559<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 559​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
560<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Number>2</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 560​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Number>2</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
561<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>5</Number><Normal Text> </Normal Text><Operator><</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>dotted</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 561​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>5</Number><Normal Text> </Normal Text><Operator><</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>dotted</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
562<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>double</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 562​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>double</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
563<Normal Text>}</Normal Text><br/> 563​<Normal Text>}</Normal Text><br/>
564<Normal Text></Normal Text><br/> 564​<Normal Text></Normal Text><br/>
565<Variable>$type</Variable><Normal Text>: monster</Normal Text><Separator Symbol>;</Separator Symbol><br/> 565​<Variable>$type</Variable><Normal Text>: monster</Normal Text><Separator Symbol>;</Separator Symbol><br/>
566<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> 566​<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
567<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> ocean {</Normal Text><br/> 567​<Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> ocean {</Normal Text><br/>
568<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/> 568​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
569<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> matador {</Normal Text><br/> 569​<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> matador {</Normal Text><br/>
570<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> 570​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
571<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> monster {</Normal Text><br/> 571​<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> monster {</Normal Text><br/>
572<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/> 572​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/>
573<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/> 573​<Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/>
574<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/> 574​<Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/>
575<Normal Text> }</Normal Text><br/> 575​<Normal Text> }</Normal Text><br/>
576<Normal Text>}</Normal Text><br/> 576​<Normal Text>}</Normal Text><br/>
577<Normal Text></Normal Text><br/> 577​<Normal Text></Normal Text><br/>
578<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><Normal Text> {</Normal Text><br/> 578​<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><Normal Text> {</Normal Text><br/>
579<Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Variable>#{$i}</Variable><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 579​<Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Interpolation>#{</Interpolation><Variable>$i</Variable><Interpolation>}</Interpolation><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
580<Normal Text>}</Normal Text><br/> 580​<Normal Text>}</Normal Text><br/>
581<Normal Text></Normal Text><br/> 581​<Normal Text></Normal Text><br/>
582<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text> in puma, sea-slug, egret, salamander {</Normal Text><br/> 582​<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text> in puma, sea-slug, egret, salamander {</Normal Text><br/>
583<Normal Text> </Normal Text><Selector Class>.</Selector Class><Variable>#{$animal}</Variable><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/> 583​<Normal Text> </Normal Text><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/>
584<Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/#{$animal}.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 584​<Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/</String><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><String>.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
585<Normal Text> }</Normal Text><br/> 585​<Normal Text> }</Normal Text><br/>
586<Normal Text>}</Normal Text><br/> 586​<Normal Text>}</Normal Text><br/>
587<Normal Text></Normal Text><br/> 587​<Normal Text></Normal Text><br/>
588<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text>, </Normal Text><Variable>$cursor</Variable><Normal Text> in (puma, </Normal Text><Color>black</Color><Normal Text>, </Normal Text><Value>default</Value><Normal Text>),</Normal Text><br/> 588​<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text>, </Normal Text><Variable>$cursor</Variable><Normal Text> in (puma, </Normal Text><Color>black</Color><Normal Text>, </Normal Text><Value>default</Value><Normal Text>),</Normal Text><br/>
589<Normal Text> (sea-slug, </Normal Text><Color>blue</Color><Normal Text>, </Normal Text><Value>pointer</Value><Normal Text>),</Normal Text><br/> 589​<Normal Text> (sea-slug, </Normal Text><Color>blue</Color><Normal Text>, </Normal Text><Value>pointer</Value><Normal Text>),</Normal Text><br/>
590<Normal Text> (egret, </Normal Text><Color>white</Color><Normal Text>, </Normal Text><Value>move</Value><Normal Text>) {</Normal Text><br/> 590​<Normal Text> (egret, </Normal Text><Color>white</Color><Normal Text>, </Normal Text><Value>move</Value><Normal Text>) {</Normal Text><br/>
591<Normal Text> </Normal Text><Selector Class>.</Selector Class><Variable>#{$animal}</Variable><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/> 591​<Normal Text> </Normal Text><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/>
592<Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/#{$animal}.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> 592​<Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/</String><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><String>.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
593<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><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/> 593​<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><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/>
594<Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: </Normal Text><Variable>$cursor</Variable><Separator Symbol>;</Separator Symbol><br/> 594​<Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: </Normal Text><Variable>$cursor</Variable><Separator Symbol>;</Separator Symbol><br/>
595<Normal Text> }</Normal Text><br/> 595​<Normal Text> }</Normal Text><br/>
596<Normal Text>}</Normal Text><br/> 596​<Normal Text>}</Normal Text><br/>
597<Normal Text></Normal Text><br/> 597​<Normal Text></Normal Text><br/>
598<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$header</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in (h1: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text>, h2: </Normal Text><Number>1.5</Number><Unit>em</Unit><Normal Text>, h3: </Normal Text><Number>1.2</Number><Unit>em</Unit><Normal Text>) {</Normal Text><br/> 598​<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$header</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in (h1: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text>, h2: </Normal Text><Number>1.5</Number><Unit>em</Unit><Normal Text>, h3: </Normal Text><Number>1.2</Number><Unit>em</Unit><Normal Text>) {</Normal Text><br/>
599<Normal Text> </Normal Text><Variable>#{$header}</Variable><Normal Text> {</Normal Text><br/> 599​<Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$header</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
600<Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Separator Symbol>;</Separator Symbol><br/> 600​<Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Separator Symbol>;</Separator Symbol><br/>
601<Normal Text> }</Normal Text><br/> 601​<Normal Text> }</Normal Text><br/>
602<Normal Text>}</Normal Text><br/> 602​<Normal Text>}</Normal Text><br/>
603<Normal Text></Normal Text><br/> 603​<Normal Text></Normal Text><br/>
604<Variable>$i</Variable><Normal Text>: </Normal Text><Number>6</Number><Separator Symbol>;</Separator Symbol><br/> 604​<Variable>$i</Variable><Normal Text>: </Normal Text><Number>6</Number><Separator Symbol>;</Separator Symbol><br/>
605<At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> > </Normal Text><Number>0</Number><Normal Text> {</Normal Text><br/> 605​<At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> > </Normal Text><Number>0</Number><Normal Text> {</Normal Text><br/>
606<Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Variable>#{$i}</Variable><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 606​<Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Interpolation>#{</Interpolation><Variable>$i</Variable><Interpolation>}</Interpolation><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
607<Normal Text> </Normal Text><Variable>$i</Variable><Normal Text>: </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/> 607​<Normal Text> </Normal Text><Variable>$i</Variable><Normal Text>: </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/>
608<Normal Text>}</Normal Text><br/> 608​<Normal Text>}</Normal Text><br/>
609<Normal Text></Normal Text><br/> 609​<Normal Text></Normal Text><br/>
610<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>large-text</Function><Normal Text> {</Normal Text><br/> 610​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>large-text</Function><Normal Text> {</Normal Text><br/>
611<Normal Text> </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/> 611​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/>
612<Normal Text> </Normal Text><Property>family</Property><Normal Text>: Arial</Normal Text><Separator Symbol>;</Separator Symbol><br/> 612​<Normal Text> </Normal Text><Property>family</Property><Normal Text>: Arial</Normal Text><Separator Symbol>;</Separator Symbol><br/>
613<Normal Text> </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 613​<Normal Text> </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
614<Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> 614​<Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
▲ Show 20 Lines • Show All 71 Lines • ▼ Show 20 Line(s)
686<Variable>$grid-width</Variable><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 686​<Variable>$grid-width</Variable><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
687<Variable>$gutter-width</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> 687​<Variable>$gutter-width</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
688<Normal Text></Normal Text><br/> 688​<Normal Text></Normal Text><br/>
689<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>grid-width</Function><Normal Text>(</Normal Text><Variable>$n</Variable><Normal Text>) {</Normal Text><br/> 689​<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>grid-width</Function><Normal Text>(</Normal Text><Variable>$n</Variable><Normal Text>) {</Normal Text><br/>
690<Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$grid-width</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>) </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$gutter-width</Variable><Separator Symbol>;</Separator Symbol><br/> 690​<Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$grid-width</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>) </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$gutter-width</Variable><Separator Symbol>;</Separator Symbol><br/>
691<Normal Text>}</Normal Text><br/> 691​<Normal Text>}</Normal Text><br/>
692<Normal Text></Normal Text><br/> 692​<Normal Text></Normal Text><br/>
693<Selector Id>#sidebar</Selector Id><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>grid-width(</Function><Number>5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> 693​<Selector Id>#sidebar</Selector Id><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>grid-width(</Function><Number>5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
694​<Normal Text></Normal Text><br/>
695​<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent</Function><Normal Text>(</Normal Text><Variable>$child</Variable><Normal Text>) {</Normal Text><br/>
696​<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><Normal Text> {</Normal Text><br/>
697​<Normal Text> </Normal Text><At Rule>@content</At Rule><Separator Symbol>;</Separator Symbol><br/>
698​<Normal Text> }</Normal Text><br/>
699​<Normal Text>}</Normal Text><br/>
700​<Normal Text></Normal Text><br/>
701​<Selector Pseudo>:root</Selector Pseudo><Normal Text> {</Normal Text><br/>
702​<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><Separator Symbol>;</Separator Symbol><br/>
703​<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><Separator Symbol>;</Separator Symbol><br/>
704​<Normal Text>}</Normal Text><br/>
705​<Normal Text></Normal Text><br/>
706​<Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
707​<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><Separator Symbol>;</Separator Symbol><br/>
708​<Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><String>"string"</String><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
709​<Normal Text>}</Normal Text><br/>