Changeset View
Changeset View
Standalone View
Standalone View
autotests/reference/highlight.sass.ref
- This file was added.
| 1 | <Selector Tag>html</Selector Tag><Separator Symbol>,</Separator Symbol><br/> | ||||
|---|---|---|---|---|---|
| 2 | <Selector Tag>body</Selector Tag><Separator Symbol>,</Separator Symbol><br/> | ||||
| 3 | <Selector Tag>ul</Selector Tag><Separator Symbol>,</Separator Symbol><br/> | ||||
| 4 | <Normal Text>ol</Normal Text><br/> | ||||
| 5 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 6 | <Normal Text> </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 7 | <Normal Text></Normal Text><br/> | ||||
| 8 | <At Rule>@import</At Rule><Normal Text> reset</Normal Text><br/> | ||||
| 9 | <Normal Text>body</Normal Text><br/> | ||||
| 10 | <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/> | ||||
| 11 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#efefef</Color><br/> | ||||
| 12 | <Normal Text></Normal Text><br/> | ||||
| 13 | <Variable>$font-stack</Variable><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/> | ||||
| 14 | <Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/> | ||||
| 15 | <Normal Text></Normal Text><br/> | ||||
| 16 | <Normal Text>body</Normal Text><br/> | ||||
| 17 | <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/> | ||||
| 18 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$primary-color</Variable><br/> | ||||
| 19 | <Selector Class>.container</Selector Class><br/> | ||||
| 20 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/> | ||||
| 21 | <Normal Text></Normal Text><br/> | ||||
| 22 | <Selector Tag>article</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"main"</String><Selector Attribute>]</Selector Attribute><br/> | ||||
| 23 | <Normal Text> </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/> | ||||
| 24 | <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/> | ||||
| 25 | <Normal Text></Normal Text><br/> | ||||
| 26 | <Placeholder Selector>%message-shared</Placeholder Selector><br/> | ||||
| 27 | <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/> | ||||
| 28 | <Normal Text> </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/> | ||||
| 29 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#333</Color><br/> | ||||
| 30 | <Normal Text></Normal Text><br/> | ||||
| 31 | <Selector Class>.message</Selector Class><br/> | ||||
| 32 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%message-shared</Placeholder Selector><br/> | ||||
| 33 | <Normal Text></Normal Text><br/> | ||||
| 34 | <Selector Class>.success</Selector Class><br/> | ||||
| 35 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%message-shared</Placeholder Selector><br/> | ||||
| 36 | <Normal Text> </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>green</Color><br/> | ||||
| 37 | <Normal Text></Normal Text><br/> | ||||
| 38 | <At Rule>=</At Rule><Function>transform</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Normal Text>)</Normal Text><br/> | ||||
| 39 | <Normal Text> </Normal Text><Property>-webkit-transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/> | ||||
| 40 | <Normal Text> </Normal Text><Property>-ms-transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/> | ||||
| 41 | <Normal Text> </Normal Text><Property>transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/> | ||||
| 42 | <Selector Class>.box</Selector Class><br/> | ||||
| 43 | <Normal Text> </Normal Text><At Rule>+</At Rule><Function>transform(rotate(</Function><Number>30</Number><Unit>deg</Unit><Function>))</Function><br/> | ||||
| 44 | <Normal Text></Normal Text><br/> | ||||
| 45 | <Normal Text> </Normal Text><Comment>// This comment won't be included in the CSS.</Comment><br/> | ||||
| 46 | <Comment> This is also commented out.</Comment><br/> | ||||
| 47 | <Normal Text> </Normal Text><Selector Id>#a</Selector Id><br/> | ||||
| 48 | <Comment>/* But this comment will, except in compressed mode.</Comment><br/> | ||||
| 49 | <Comment></Comment><br/> | ||||
| 50 | <Comment>/* It can also contain interpolation:</Comment><br/> | ||||
| 51 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 52 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 53 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 54 | <Selector Id>#a</Selector Id><br/> | ||||
| 55 | <Normal Text></Normal Text><br/> | ||||
| 56 | <Comment>// But this comment will, except in compressed mode.</Comment><br/> | ||||
| 57 | <Comment></Comment><br/> | ||||
| 58 | <Comment>// It can also contain interpolation:</Comment><br/> | ||||
| 59 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 60 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 61 | <Comment> 1 + 1 = #{1 + 1}</Comment><br/> | ||||
| 62 | <Selector Id>#a</Selector Id><br/> | ||||
| 63 | <Normal Text></Normal Text><br/> | ||||
| 64 | <Comment>/*! This comment will be included even in compressed mode.</Comment><br/> | ||||
| 65 | <Comment></Comment><br/> | ||||
| 66 | <Selector Id>#a</Selector Id><br/> | ||||
| 67 | <Normal Text></Normal Text><br/> | ||||
| 68 | <Comment>/**/</Comment><br/> | ||||
| 69 | <Comment></Comment><br/> | ||||
| 70 | <Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/> | ||||
| 71 | <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/> | ||||
| 72 | <Normal Text></Normal Text><br/> | ||||
| 73 | <Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/> | ||||
| 74 | <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/> | ||||
| 75 | <Normal Text></Normal Text><br/> | ||||
| 76 | <Comment>/// Computes an exponent.</Comment><br/> | ||||
| 77 | <Comment>///</Comment><br/> | ||||
| 78 | <Comment>/// @param {number} $base</Comment><br/> | ||||
| 79 | <Comment>/// The number to multiply by itself.</Comment><br/> | ||||
| 80 | <Comment>/// @param {integer (unitless)} $exponent</Comment><br/> | ||||
| 81 | <Comment>/// The number of `$base`s to multiply together.</Comment><br/> | ||||
| 82 | <Comment>/// @return {number} `$base` to the power of `$exponent`.</Comment><br/> | ||||
| 83 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow</Function><Normal Text>(</Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Normal Text>)</Normal Text><br/> | ||||
| 84 | <Normal Text> </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/> | ||||
| 85 | <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/> | ||||
| 86 | <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/> | ||||
| 87 | <Normal Text></Normal Text><br/> | ||||
| 88 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/> | ||||
| 89 | <Normal Text></Normal Text><br/> | ||||
| 90 | <Variable>$roboto-font-path</Variable><Normal Text>: </Normal Text><String>"../fonts/roboto"</String><br/> | ||||
| 91 | <Normal Text></Normal Text><br/> | ||||
| 92 | <At Rule>@font-face</At Rule><br/> | ||||
| 93 | <Normal Text> </Normal Text><Comment>// This is parsed as a normal function call that takes a quoted string.</Comment><br/> | ||||
| 94 | <Normal Text> </Normal Text><Unknown Property>src</Unknown 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/> | ||||
| 95 | <Normal Text> </Normal Text><Unknown Property>src</Unknown 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/> | ||||
| 96 | <Normal Text> </Normal Text><Unknown Property>src</Unknown 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/> | ||||
| 97 | <Normal Text></Normal Text><br/> | ||||
| 98 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Roboto"</String><br/> | ||||
| 99 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Number>100</Number><br/> | ||||
| 100 | <Normal Text></Normal Text><br/> | ||||
| 101 | <Selector Class>.logo</Selector Class><br/> | ||||
| 102 | <Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>800</Number><Unit>px</Unit><br/> | ||||
| 103 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><br/> | ||||
| 104 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/> | ||||
| 105 | <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/> | ||||
| 106 | <Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 107 | <Normal Text></Normal Text><br/> | ||||
| 108 | <Variable>$padding</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><br/> | ||||
| 109 | <Normal Text></Normal Text><br/> | ||||
| 110 | <Selector Class>.post</Selector Class><br/> | ||||
| 111 | <Normal Text> </Normal Text><Comment>// Since these max() calls don't use any Sass features other than</Comment><br/> | ||||
| 112 | <Normal Text> </Normal Text><Comment>// interpolation, they're compiled to CSS max() calls.</Comment><br/> | ||||
| 113 | <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/> | ||||
| 114 | <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/> | ||||
| 115 | <Normal Text></Normal Text><br/> | ||||
| 116 | <Normal Text></Normal Text><br/> | ||||
| 117 | <Selector Class>.sidebar</Selector Class><br/> | ||||
| 118 | <Normal Text> </Normal Text><Comment>// Since these refer to a Sass variable without interpolation, they call</Comment><br/> | ||||
| 119 | <Normal Text> </Normal Text><Comment>// Sass's built-in max() function.</Comment><br/> | ||||
| 120 | <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/> | ||||
| 121 | <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/> | ||||
| 122 | <Normal Text></Normal Text><br/> | ||||
| 123 | <Selector Class>.circle</Selector Class><br/> | ||||
| 124 | <Normal Text> </Normal Text><Variable>$size</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><br/> | ||||
| 125 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 126 | <Normal Text> </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 127 | <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/> | ||||
| 128 | <Normal Text></Normal Text><br/> | ||||
| 129 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 130 | <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/> | ||||
| 131 | <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/> | ||||
| 132 | <Normal Text></Normal Text><br/> | ||||
| 133 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/> | ||||
| 134 | <Normal Text></Normal Text><br/> | ||||
| 135 | <Normal Text></Normal Text><br/> | ||||
| 136 | <Selector Class>.gray</Selector Class><br/> | ||||
| 137 | <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/> | ||||
| 138 | <Normal Text></Normal Text><br/> | ||||
| 139 | <Selector Class>.enlarge</Selector Class><br/> | ||||
| 140 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/> | ||||
| 141 | <Normal Text> </Normal Text><Property>transition</Property><Normal Text>:</Normal Text><br/> | ||||
| 142 | <Normal Text> </Normal Text><Property>property</Property><Normal Text>: font-size</Normal Text><br/> | ||||
| 143 | <Normal Text> </Normal Text><Property>duration</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>s</Unit><br/> | ||||
| 144 | <Normal Text> </Normal Text><Property>delay</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>s</Unit><br/> | ||||
| 145 | <Normal Text></Normal Text><br/> | ||||
| 146 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/> | ||||
| 147 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>36</Number><Unit>px</Unit><br/> | ||||
| 148 | <Normal Text></Normal Text><br/> | ||||
| 149 | <Selector Class>.info-page</Selector Class><br/> | ||||
| 150 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Value Keyword>auto</Value Keyword><br/> | ||||
| 151 | <Normal Text> </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/> | ||||
| 152 | <Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><br/> | ||||
| 153 | <Normal Text></Normal Text><br/> | ||||
| 154 | <Variable>$rounded-corners</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><br/> | ||||
| 155 | <Normal Text></Normal Text><br/> | ||||
| 156 | <Selector Class>.button</Selector Class><br/> | ||||
| 157 | <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/> | ||||
| 158 | <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/> | ||||
| 159 | <Normal Text></Normal Text><br/> | ||||
| 160 | <Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#81899b</Color><br/> | ||||
| 161 | <Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#ab2e</Color><br/> | ||||
| 162 | <Variable>$warn</Variable><Normal Text>: </Normal Text><Color>#dfa612aa</Color><br/> | ||||
| 163 | <Normal Text></Normal Text><br/> | ||||
| 164 | <Selector Pseudo>:root</Selector Pseudo><br/> | ||||
| 165 | <Normal Text> </Normal Text><Variable>--primary</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$primary</Variable><Interpolation>}</Interpolation><br/> | ||||
| 166 | <Normal Text> </Normal Text><Variable>--accent</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$accent</Variable><Interpolation>}</Interpolation><br/> | ||||
| 167 | <Normal Text> </Normal Text><Variable>--warn</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$warn</Variable><Interpolation>}</Interpolation><br/> | ||||
| 168 | <Normal Text></Normal Text><br/> | ||||
| 169 | <Normal Text> </Normal Text><Comment>// Even though this looks like a Sass variable, it's valid CSS so it's not</Comment><br/> | ||||
| 170 | <Normal Text> </Normal Text><Comment>// evaluated.</Comment><br/> | ||||
| 171 | <Normal Text> </Normal Text><Variable>--consumed-by-js</Variable><Normal Text>: </Normal Text><Variable>$primary</Variable><br/> | ||||
| 172 | <Normal Text></Normal Text><br/> | ||||
| 173 | <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/> | ||||
| 174 | <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/> | ||||
| 175 | <Normal Text></Normal Text><br/> | ||||
| 176 | <Selector Pseudo>:root</Selector Pseudo><br/> | ||||
| 177 | <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/> | ||||
| 178 | <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/> | ||||
| 179 | <Normal Text></Normal Text><br/> | ||||
| 180 | <Selector Class>.alert</Selector Class><br/> | ||||
| 181 | <Normal Text> </Normal Text><Comment>// The parent selector can be used to add pseudo-classes to the outer</Comment><br/> | ||||
| 182 | <Normal Text> </Normal Text><Comment>// selector.</Comment><br/> | ||||
| 183 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/> | ||||
| 184 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/> | ||||
| 185 | <Normal Text></Normal Text><br/> | ||||
| 186 | <Normal Text></Normal Text><br/> | ||||
| 187 | <Normal Text> </Normal Text><Comment>// It can also be used to style the outer selector in a certain context, such</Comment><br/> | ||||
| 188 | <Normal Text> </Normal Text><Comment>// as a body set to use a right-to-left language.</Comment><br/> | ||||
| 189 | <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/> | ||||
| 190 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 191 | <Normal Text> </Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/> | ||||
| 192 | <Normal Text></Normal Text><br/> | ||||
| 193 | <Normal Text></Normal Text><br/> | ||||
| 194 | <Normal Text> </Normal Text><Comment>// You can even use it as an argument to pseudo-class selectors.</Comment><br/> | ||||
| 195 | <Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Error>&</Error><Selector Pseudo>)</Selector Pseudo><br/> | ||||
| 196 | <Normal Text> </Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.8</Number><br/> | ||||
| 197 | <Normal Text></Normal Text><br/> | ||||
| 198 | <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/> | ||||
| 199 | <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/> | ||||
| 200 | <Normal Text> </Normal Text><At Rule>@content</At Rule><br/> | ||||
| 201 | <Normal Text></Normal Text><br/> | ||||
| 202 | <Normal Text></Normal Text><br/> | ||||
| 203 | <Normal Text></Normal Text><br/> | ||||
| 204 | <Selector Class>.wrapper</Selector Class><Normal Text> </Normal Text><Selector Class>.field</Selector Class><br/> | ||||
| 205 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>unify-parent(</Function><String>"input"</String><Function>)</Function><br/> | ||||
| 206 | <Normal Text></Normal Text><br/> | ||||
| 207 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>app-background</Function><Normal Text>(</Normal Text><Variable>$color</Variable><Normal Text>)</Normal Text><br/> | ||||
| 208 | <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/> | ||||
| 209 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 210 | <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/> | ||||
| 211 | <Normal Text></Normal Text><br/> | ||||
| 212 | <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#036</Color><Function>)</Function><br/> | ||||
| 213 | <Normal Text></Normal Text><br/> | ||||
| 214 | <Selector Class>.sidebar</Selector Class><br/> | ||||
| 215 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#c6538c</Color><Function>)</Function><br/> | ||||
| 216 | <Normal Text></Normal Text><br/> | ||||
| 217 | <Selector Class>.accordion</Selector Class><br/> | ||||
| 218 | <Normal Text> </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><br/> | ||||
| 219 | <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/> | ||||
| 220 | <Normal Text></Normal Text><br/> | ||||
| 221 | <Normal Text> </Normal Text><Operator>&</Operator><Normal Text>__copy</Normal Text><br/> | ||||
| 222 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><br/> | ||||
| 223 | <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/> | ||||
| 224 | <Normal Text> </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Number>1.6</Number><br/> | ||||
| 225 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/> | ||||
| 226 | <Normal Text></Normal Text><br/> | ||||
| 227 | <Normal Text> </Normal Text><Operator>&</Operator><Normal Text>--open</Normal Text><br/> | ||||
| 228 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>block</Value><br/> | ||||
| 229 | <Normal Text></Normal Text><br/> | ||||
| 230 | <Normal Text></Normal Text><br/> | ||||
| 231 | <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/> | ||||
| 232 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/> | ||||
| 233 | <Normal Text></Normal Text><br/> | ||||
| 234 | <Placeholder Selector>%strong-alert</Placeholder Selector><Selector Pseudo>:hover</Selector Pseudo><br/> | ||||
| 235 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><br/> | ||||
| 236 | <Normal Text></Normal Text><br/> | ||||
| 237 | <Placeholder Selector>%toolbelt</Placeholder Selector><br/> | ||||
| 238 | <Normal Text> </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><br/> | ||||
| 239 | <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/> | ||||
| 240 | <Normal Text></Normal Text><br/> | ||||
| 241 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/> | ||||
| 242 | <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/> | ||||
| 243 | <Normal Text></Normal Text><br/> | ||||
| 244 | <Selector Class>.action-buttons</Selector Class><br/> | ||||
| 245 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%toolbelt</Placeholder Selector><br/> | ||||
| 246 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#4285f4</Color><br/> | ||||
| 247 | <Normal Text></Normal Text><br/> | ||||
| 248 | <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/> | ||||
| 249 | <Variable>$black</Variable><Normal Text>: </Normal Text><Color>#000</Color><Normal Text> </Normal Text><Annotation>!default</Annotation><br/> | ||||
| 250 | <Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.25</Number><Unit>rem</Unit><Normal Text> </Normal Text><Annotation>!default</Annotation><br/> | ||||
| 251 | <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/> | ||||
| 252 | <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/> | ||||
| 253 | <Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.1</Number><Unit>rem</Unit><br/> | ||||
| 254 | <Normal Text></Normal Text><br/> | ||||
| 255 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'library'</String><br/> | ||||
| 256 | <Normal Text></Normal Text><br/> | ||||
| 257 | <Variable>$global-variable</Variable><Normal Text>: global value</Normal Text><br/> | ||||
| 258 | <Normal Text></Normal Text><br/> | ||||
| 259 | <Normal Text> </Normal Text><Comment>// This would fail, because $local-variable isn't in scope:</Comment><br/> | ||||
| 260 | <Normal Text> </Normal Text><Comment>// local: $local-variable</Comment><br/> | ||||
| 261 | <Comment></Comment><br/> | ||||
| 262 | <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/> | ||||
| 263 | <Normal Text></Normal Text><br/> | ||||
| 264 | <Selector Class>.alert</Selector Class><br/> | ||||
| 265 | <Normal Text> </Normal Text><Comment>// Instead of $theme-color-#{warning}</Comment><br/> | ||||
| 266 | <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/> | ||||
| 267 | <Normal Text></Normal Text><br/> | ||||
| 268 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>corner-icon</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 269 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/> | ||||
| 270 | <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/> | ||||
| 271 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/> | ||||
| 272 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 273 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$left-or-right</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 274 | <Normal Text></Normal Text><br/> | ||||
| 275 | <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/> | ||||
| 276 | <Normal Text></Normal Text><br/> | ||||
| 277 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inline-animation</Function><Normal Text>(</Normal Text><Variable>$duration</Variable><Normal Text>)</Normal Text><br/> | ||||
| 278 | <Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>: inline-</Normal Text><Interpolation>#{</Interpolation><Function>unique-id()</Function><Interpolation>}</Interpolation><br/> | ||||
| 279 | <Normal Text></Normal Text><br/> | ||||
| 280 | <Normal Text> </Normal Text><At Rule>@keyframes</At Rule><Normal Text> #{$name}</Normal Text><br/> | ||||
| 281 | <Normal Text> </Normal Text><At Rule>@content</At Rule><br/> | ||||
| 282 | <Normal Text></Normal Text><br/> | ||||
| 283 | <Normal Text> </Normal Text><Property>animation-name</Property><Normal Text>: </Normal Text><Variable>$name</Variable><br/> | ||||
| 284 | <Normal Text> </Normal Text><Property>animation-duration</Property><Normal Text>: </Normal Text><Variable>$duration</Variable><br/> | ||||
| 285 | <Normal Text> </Normal Text><Property>animation-iteration-count</Property><Normal Text>: </Normal Text><Value>infinite</Value><br/> | ||||
| 286 | <Normal Text></Normal Text><br/> | ||||
| 287 | <Normal Text></Normal Text><br/> | ||||
| 288 | <Selector Class>.pulse</Selector Class><br/> | ||||
| 289 | <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/> | ||||
| 290 | <Normal Text> from</Normal Text><br/> | ||||
| 291 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>yellow</Color><br/> | ||||
| 292 | <Normal Text> to</Normal Text><br/> | ||||
| 293 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>red</Color><br/> | ||||
| 294 | <Normal Text></Normal Text><br/> | ||||
| 295 | <Selector Class>.example</Selector Class><br/> | ||||
| 296 | <Normal Text> </Normal Text><Unknown Property>unquoted</Unknown Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><String>"string"</String><Interpolation>}</Interpolation><br/> | ||||
| 297 | <Normal Text></Normal Text><br/> | ||||
| 298 | <Normal Text> </Normal Text><Operator>&</Operator><Normal Text> </Normal Text><Operator>&</Operator><br/> | ||||
| 299 | <Normal Text> </Normal Text><Property>padding</Property><Normal Text>:</Normal Text><br/> | ||||
| 300 | <Normal Text> </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 301 | <Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 302 | <Normal Text></Normal Text><br/> | ||||
| 303 | <Comment>// style.sass</Comment><br/> | ||||
| 304 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'foundation/code'</String><Normal Text>, </Normal Text><String>'foundation/lists'</String><br/> | ||||
| 305 | <Normal Text></Normal Text><br/> | ||||
| 306 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"theme.css"</String><br/> | ||||
| 307 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://fonts.googleapis.com/css?family=Droid+Sans"</String><br/> | ||||
| 308 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>theme</String><Function>)</Function><br/> | ||||
| 309 | <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/> | ||||
| 310 | <Normal Text></Normal Text><br/> | ||||
| 311 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>google-font</Function><Normal Text>(</Normal Text><Variable>$family</Variable><Normal Text>)</Normal Text><br/> | ||||
| 312 | <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/> | ||||
| 313 | <Normal Text></Normal Text><br/> | ||||
| 314 | <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>google-font(</Function><String>"Droid Sans"</String><Function>)</Function><br/> | ||||
| 315 | <Normal Text></Normal Text><br/> | ||||
| 316 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>horizontal-list</Function><br/> | ||||
| 317 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> reset-list</Normal Text><br/> | ||||
| 318 | <Normal Text></Normal Text><br/> | ||||
| 319 | <Normal Text> li</Normal Text><br/> | ||||
| 320 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/> | ||||
| 321 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/> | ||||
| 322 | <Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/> | ||||
| 323 | <Normal Text> </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/> | ||||
| 324 | <Normal Text></Normal Text><br/> | ||||
| 325 | <Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/> | ||||
| 326 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> horizontal-list</Normal Text><br/> | ||||
| 327 | <Normal Text></Normal Text><br/> | ||||
| 328 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>rtl</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 329 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$ltr-value</Variable><br/> | ||||
| 330 | <Normal Text></Normal Text><br/> | ||||
| 331 | <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/> | ||||
| 332 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$rtl-value</Variable><br/> | ||||
| 333 | <Normal Text></Normal Text><br/> | ||||
| 334 | <Selector Class>.sidebar</Selector Class><br/> | ||||
| 335 | <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/> | ||||
| 336 | <Normal Text></Normal Text><br/> | ||||
| 337 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>replace-text</Function><Normal Text>(</Normal Text><Variable>$image</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$x</Variable><Error>:</Error><Normal Text> </Normal Text><Error>50%</Error><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Error>:</Error><Normal Text> </Normal Text><Error>50%</Error><Normal Text>)</Normal Text><br/> | ||||
| 338 | <Normal Text> </Normal Text><Property>text-indent</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>99999</Number><Unit>em</Unit><br/> | ||||
| 339 | <Normal Text> </Normal Text><Property>overflow</Property><Normal Text>: </Normal Text><Value>hidden</Value><br/> | ||||
| 340 | <Normal Text> </Normal Text><Property>text-align</Property><Normal Text>: </Normal Text><Value>left</Value><br/> | ||||
| 341 | <Normal Text></Normal Text><br/> | ||||
| 342 | <Normal Text> </Normal Text><Property>background</Property><Normal Text>:</Normal Text><br/> | ||||
| 343 | <Normal Text> </Normal Text><Property>image</Property><Normal Text>: </Normal Text><Variable>$image</Variable><br/> | ||||
| 344 | <Normal Text> </Normal Text><Property>repeat</Property><Normal Text>: </Normal Text><Value>no-repeat</Value><br/> | ||||
| 345 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Normal Text> </Normal Text><Variable>$y</Variable><br/> | ||||
| 346 | <Normal Text></Normal Text><br/> | ||||
| 347 | <Selector Class>.mail-icon</Selector Class><br/> | ||||
| 348 | <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/> | ||||
| 349 | <Normal Text></Normal Text><br/> | ||||
| 350 | <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/> | ||||
| 351 | <Normal Text></Normal Text><br/> | ||||
| 352 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/> | ||||
| 353 | <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/> | ||||
| 354 | <Normal Text></Normal Text><br/> | ||||
| 355 | <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/> | ||||
| 356 | <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/> | ||||
| 357 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 358 | <Normal Text></Normal Text><br/> | ||||
| 359 | <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/> | ||||
| 360 | <Normal Text></Normal Text><br/> | ||||
| 361 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>media</Function><Normal Text>(</Normal Text><Variable>$types</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/> | ||||
| 362 | <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/> | ||||
| 363 | <Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$type</Variable><Interpolation>}</Interpolation><br/> | ||||
| 364 | <Normal Text> </Normal Text><At Rule>@content</At Rule><Normal Text>(</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/> | ||||
| 365 | <Normal Text></Normal Text><br/> | ||||
| 366 | <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>media(</Function><Normal Text>screen</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> print</Normal Text><Function>)</Function><Normal Text> using (</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/> | ||||
| 367 | <Normal Text> h1</Normal Text><br/> | ||||
| 368 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><br/> | ||||
| 369 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> print</Normal Text><br/> | ||||
| 370 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: Calluna</Normal Text><br/> | ||||
| 371 | <Normal Text></Normal Text><br/> | ||||
| 372 | <At Rule>=</At Rule><Function>reset-list</Function><br/> | ||||
| 373 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 374 | <Normal Text> </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 375 | <Normal Text> </Normal Text><Property>list-style</Property><Normal Text>: </Normal Text><Value>none</Value><br/> | ||||
| 376 | <Normal Text></Normal Text><br/> | ||||
| 377 | <At Rule>=</At Rule><Function>horizontal-list</Function><br/> | ||||
| 378 | <Normal Text> </Normal Text><At Rule>+</At Rule><Normal Text>reset-list</Normal Text><br/> | ||||
| 379 | <Normal Text></Normal Text><br/> | ||||
| 380 | <Normal Text> li</Normal Text><br/> | ||||
| 381 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/> | ||||
| 382 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/> | ||||
| 383 | <Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/> | ||||
| 384 | <Normal Text> </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/> | ||||
| 385 | <Normal Text></Normal Text><br/> | ||||
| 386 | <Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/> | ||||
| 387 | <Normal Text> </Normal Text><At Rule>+</At Rule><Normal Text>horizontal-list</Normal Text><br/> | ||||
| 388 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow</Function><Normal Text>(</Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Normal Text>)</Normal Text><br/> | ||||
| 389 | <Normal Text> </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/> | ||||
| 390 | <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/> | ||||
| 391 | <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/> | ||||
| 392 | <Normal Text></Normal Text><br/> | ||||
| 393 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/> | ||||
| 394 | <Normal Text></Normal Text><br/> | ||||
| 395 | <Selector Class>.sidebar</Selector Class><br/> | ||||
| 396 | <Normal Text> </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/> | ||||
| 397 | <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/> | ||||
| 398 | <Normal Text></Normal Text><br/> | ||||
| 399 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>sum</Function><Normal Text>(</Normal Text><Variable>$numbers</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/> | ||||
| 400 | <Normal Text> </Normal Text><Variable>$sum</Variable><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 401 | <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/> | ||||
| 402 | <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/> | ||||
| 403 | <Normal Text></Normal Text><br/> | ||||
| 404 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$sum</Variable><br/> | ||||
| 405 | <Normal Text></Normal Text><br/> | ||||
| 406 | <Selector Class>.micro</Selector Class><br/> | ||||
| 407 | <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/> | ||||
| 408 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>str-insert</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 409 | <Normal Text> </Normal Text><Comment>// Avoid making new strings if we don't need to.</Comment><br/> | ||||
| 410 | <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><Operator>==</Operator><Normal Text> </Normal Text><Number>0</Number><br/> | ||||
| 411 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$insert</Variable><br/> | ||||
| 412 | <Normal Text></Normal Text><br/> | ||||
| 413 | <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/> | ||||
| 414 | <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/> | ||||
| 415 | <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/> | ||||
| 416 | <Normal Text></Normal Text><br/> | ||||
| 417 | <Selector Class>.error</Selector Class><br/> | ||||
| 418 | <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/> | ||||
| 419 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><br/> | ||||
| 420 | <Normal Text></Normal Text><br/> | ||||
| 421 | <Normal Text> </Normal Text><Operator>&</Operator><Normal Text>--serious</Normal Text><br/> | ||||
| 422 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.error</Selector Class><br/> | ||||
| 423 | <Normal Text> </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><br/> | ||||
| 424 | <Normal Text></Normal Text><br/> | ||||
| 425 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>reflexive-position</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Normal Text>)</Normal Text><br/> | ||||
| 426 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Operator>=</Operator><Normal Text> </Normal Text><Value>left</Value><Normal Text> </Normal Text><Operator>and</Operator><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Operator>=</Operator><Normal Text> </Normal Text><Value>right</Value><br/> | ||||
| 427 | <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/> | ||||
| 428 | <Normal Text></Normal Text><br/> | ||||
| 429 | <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> initial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Function>)</Function><br/> | ||||
| 430 | <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> initial</Normal Text><Function>)</Function><br/> | ||||
| 431 | <Normal Text></Normal Text><br/> | ||||
| 432 | <Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/> | ||||
| 433 | <Normal Text> </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/> | ||||
| 434 | <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/> | ||||
| 435 | <Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/> | ||||
| 436 | <Normal Text> </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/> | ||||
| 437 | <Normal Text></Normal Text><br/> | ||||
| 438 | <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/> | ||||
| 439 | <Normal Text></Normal Text><br/> | ||||
| 440 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 441 | <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/> | ||||
| 442 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Operator>not</Operator><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/> | ||||
| 443 | <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/> | ||||
| 444 | <Normal Text></Normal Text><br/> | ||||
| 445 | <Normal Text></Normal Text><br/> | ||||
| 446 | <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/> | ||||
| 447 | <Normal Text></Normal Text><br/> | ||||
| 448 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/> | ||||
| 449 | <Normal Text></Normal Text><br/> | ||||
| 450 | <Normal Text></Normal Text><br/> | ||||
| 451 | <Selector Class>.tilt</Selector Class><br/> | ||||
| 452 | <Normal Text> </Normal Text><Comment>// Oops, we typo'd "webkit" as "wekbit"!</Comment><br/> | ||||
| 453 | <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/> | ||||
| 454 | <Normal Text></Normal Text><br/> | ||||
| 455 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inset-divider-offset</Function><Normal Text>(</Normal Text><Variable>$offset</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$padding</Variable><Normal Text>)</Normal Text><br/> | ||||
| 456 | <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/> | ||||
| 457 | <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/> | ||||
| 458 | <Normal Text></Normal Text><br/> | ||||
| 459 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Variable>$divider-offset</Variable><br/> | ||||
| 460 | <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/> | ||||
| 461 | <Normal Text></Normal Text><br/> | ||||
| 462 | <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/> | ||||
| 463 | <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/> | ||||
| 464 | <Normal Text> </Normal Text><At Rule>@content</At Rule><br/> | ||||
| 465 | <Normal Text></Normal Text><br/> | ||||
| 466 | <Normal Text></Normal Text><br/> | ||||
| 467 | <Selector Class>.square-av</Selector Class><br/> | ||||
| 468 | <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/> | ||||
| 469 | <Selector Class>.circle-av</Selector Class><br/> | ||||
| 470 | <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/> | ||||
| 471 | <Normal Text></Normal Text><br/> | ||||
| 472 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>theme-colors</Function><Normal Text>(</Normal Text><Variable>$light-theme</Variable><Error>:</Error><Normal Text> </Normal Text><Error>true</Error><Normal Text>)</Normal Text><br/> | ||||
| 473 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$light-theme</Variable><br/> | ||||
| 474 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$light-background</Variable><br/> | ||||
| 475 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$light-text</Variable><br/> | ||||
| 476 | <Normal Text> </Normal Text><At Rule>@else</At Rule><br/> | ||||
| 477 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$dark-background</Variable><br/> | ||||
| 478 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$dark-text</Variable><br/> | ||||
| 479 | <Normal Text></Normal Text><br/> | ||||
| 480 | <Selector Class>.banner</Selector Class><br/> | ||||
| 481 | <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/> | ||||
| 482 | <Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.dark</Selector Class><Normal Text> </Normal Text><Operator>&</Operator><br/> | ||||
| 483 | <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/> | ||||
| 484 | <Normal Text></Normal Text><br/> | ||||
| 485 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>triangle</Function><Normal Text>(</Normal Text><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><Normal Text>)</Normal Text><br/> | ||||
| 486 | <Normal Text> </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 487 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 488 | <Normal Text></Normal Text><br/> | ||||
| 489 | <Normal Text> </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Value>transparent</Value><br/> | ||||
| 490 | <Normal Text> </Normal Text><Property>border-style</Property><Normal Text>: </Normal Text><Value>solid</Value><br/> | ||||
| 491 | <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/> | ||||
| 492 | <Normal Text></Normal Text><br/> | ||||
| 493 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> up</Normal Text><br/> | ||||
| 494 | <Normal Text> </Normal Text><Property>border-bottom-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 495 | <Normal Text> </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Value>right</Value><br/> | ||||
| 496 | <Normal Text> </Normal Text><Property>border-left-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 497 | <Normal Text> </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> down</Normal Text><br/> | ||||
| 498 | <Normal Text> </Normal Text><Property>border-top-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 499 | <Normal Text> </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Value>left</Value><br/> | ||||
| 500 | <Normal Text> </Normal Text><Property>border-right-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 501 | <Normal Text> </Normal Text><At Rule>@else</At Rule><br/> | ||||
| 502 | <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/> | ||||
| 503 | <Normal Text></Normal Text><br/> | ||||
| 504 | <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$size</Variable><Normal Text> in </Normal Text><Variable>$sizes</Variable><br/> | ||||
| 505 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$size</Variable><Interpolation>}</Interpolation><br/> | ||||
| 506 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 507 | <Normal Text> </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 508 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 509 | <Normal Text></Normal Text><br/> | ||||
| 510 | <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/> | ||||
| 511 | <Normal Text></Normal Text><br/> | ||||
| 512 | <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/> | ||||
| 513 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/> | ||||
| 514 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/> | ||||
| 515 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/> | ||||
| 516 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/> | ||||
| 517 | <Normal Text></Normal Text><br/> | ||||
| 518 | <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/> | ||||
| 519 | <Normal Text></Normal Text><br/> | ||||
| 520 | <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/> | ||||
| 521 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/> | ||||
| 522 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/> | ||||
| 523 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/> | ||||
| 524 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/> | ||||
| 525 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/> | ||||
| 526 | <Normal Text></Normal Text><br/> | ||||
| 527 | <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/> | ||||
| 528 | <Normal Text> </Normal Text><Selector Tag>ul</Selector Tag><Selector Pseudo>:nth-child(3n + #{$i})</Selector Pseudo><br/> | ||||
| 529 | <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/> | ||||
| 530 | <Normal Text></Normal Text><br/> | ||||
| 531 | <Comment>/// Divides `$value` by `$ratio` until it's below `$base`.</Comment><br/> | ||||
| 532 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>scale-below</Function><Normal Text>(</Normal Text><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><Error>:</Error><Normal Text> </Normal Text><Error>1.618</Error><Normal Text>)</Normal Text><br/> | ||||
| 533 | <Normal Text> </Normal Text><At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><Normal Text> > </Normal Text><Variable>$base</Variable><br/> | ||||
| 534 | <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/> | ||||
| 535 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><br/> | ||||
| 536 | <Normal Text></Normal Text><br/> | ||||
| 537 | <At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><br/> | ||||
| 538 | <Normal Text></Normal Text><br/> | ||||
| 539 | <At Rule>@font-face</At Rule><br/> | ||||
| 540 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><br/> | ||||
| 541 | <Normal Text> </Normal Text><Unknown Property>src</Unknown 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/> | ||||
| 542 | <Normal Text></Normal Text><br/> | ||||
| 543 | <At Rule>@counter-style</At Rule><Normal Text> thumbs</Normal Text><br/> | ||||
| 544 | <Normal Text> </Normal Text><Unknown Property>system</Unknown Property><Normal Text>: cyclic</Normal Text><br/> | ||||
| 545 | <Normal Text> </Normal Text><Unknown Property>symbols</Unknown Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><br/> | ||||
| 546 | <Normal Text></Normal Text><br/> | ||||
| 547 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>sticky-position</Function><br/> | ||||
| 548 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>fixed</Value><br/> | ||||
| 549 | <Normal Text> </Normal Text><At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>position</Property><Normal Text>: sticky)</Normal Text><br/> | ||||
| 550 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: sticky</Normal Text><br/> | ||||
| 551 | <Normal Text></Normal Text><br/> | ||||
| 552 | <At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>hover</Property><Normal Text>: </Normal Text><Value>hover</Value><Normal Text>)</Normal Text><br/> | ||||
| 553 | <Normal Text> </Normal Text><Selector Class>.button</Selector Class><Selector Pseudo>:hover</Selector Pseudo><br/> | ||||
| 554 | <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/> | ||||
| 555 | <Normal Text></Normal Text><br/> | ||||
| 556 | <Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Value>color</Value><Normal Text>)</Normal Text><br/> | ||||
| 557 | <Normal Text> </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>#036</Color><br/> | ||||
| 558 | <Normal Text></Normal Text><br/> | ||||
| 559 | <At Rule>@keyframes</At Rule><Normal Text> slide-in</Normal Text><br/> | ||||
| 560 | <Normal Text> from</Normal Text><br/> | ||||
| 561 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/> | ||||
| 562 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><br/> | ||||
| 563 | <Normal Text></Normal Text><br/> | ||||
| 564 | <Normal Text></Normal Text><br/> | ||||
| 565 | <Normal Text> 70%</Normal Text><br/> | ||||
| 566 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>90</Number><Unit>%</Unit><br/> | ||||
| 567 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>%</Unit><br/> | ||||
| 568 | <Normal Text></Normal Text><br/> | ||||
| 569 | <Normal Text></Normal Text><br/> | ||||
| 570 | <Normal Text> to</Normal Text><br/> | ||||
| 571 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><br/> | ||||
| 572 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/> | ||||
| 573 | <Normal Text></Normal Text><br/> | ||||
| 574 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>100</Number><Normal Text> </Normal Text><Comment>// 100</Comment><br/> | ||||
| 575 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.8</Number><Normal Text> </Normal Text><Comment>// 0.8</Comment><br/> | ||||
| 576 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Normal Text> </Normal Text><Comment>// 16px</Comment><br/> | ||||
| 577 | <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/> | ||||
| 578 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5.2e3</Number><Normal Text> </Normal Text><Comment>// 5200</Comment><br/> | ||||
| 579 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>6e-2</Number><Normal Text> </Normal Text><Comment>// 0.06</Comment><br/> | ||||
| 580 | <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/> | ||||
| 581 | <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/> | ||||
| 582 | <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/> | ||||
| 583 | <Comment>// (read "pixel-degrees per second-em")</Comment><br/> | ||||
| 584 | <Comment></Comment><br/> | ||||
| 585 | <Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/> | ||||
| 586 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text> </Normal Text><Comment>// 20deg/s</Comment><br/> | ||||
| 587 | <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/> | ||||
| 588 | <Variable>$transition-speed</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>s</Unit><Operator>/</Operator><Number>50</Number><Unit>px</Unit><br/> | ||||
| 589 | <Normal Text></Normal Text><br/> | ||||
| 590 | <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/> | ||||
| 591 | <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/> | ||||
| 592 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.012345678912345</Number><Normal Text> </Normal Text><Comment>// 0.0123456789</Comment><br/> | ||||
| 593 | <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/> | ||||
| 594 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1.00000000009</Number><Normal Text> </Normal Text><Comment>// 1</Comment><br/> | ||||
| 595 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.99999999991</Number><Normal Text> </Normal Text><Comment>// 1</Comment><br/> | ||||
| 596 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\"</SpecialChar><String>"</String><Normal Text> </Normal Text><Comment>// '"'</Comment><br/> | ||||
| 597 | <At Rule>@debug</At Rule><Normal Text> \.widget </Normal Text><Comment>// \.widget</Comment><br/> | ||||
| 598 | <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/> | ||||
| 599 | <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/> | ||||
| 600 | <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/> | ||||
| 601 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica Neue"</String><Normal Text> </Normal Text><Comment>// "Helvetica Neue"</Comment><br/> | ||||
| 602 | <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/> | ||||
| 603 | <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/> | ||||
| 604 | <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/> | ||||
| 605 | <Normal Text></Normal Text><br/> | ||||
| 606 | <Variable>$roboto-variant</Variable><Normal Text>: </Normal Text><String>"Mono"</String><br/> | ||||
| 607 | <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/> | ||||
| 608 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Comment>// bold</Comment><br/> | ||||
| 609 | <At Rule>@debug</At Rule><Normal Text> -webkit-flex </Normal Text><Comment>// -webkit-flex</Comment><br/> | ||||
| 610 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>--</Operator><Number>123</Number><Normal Text> </Normal Text><Comment>// --123</Comment><br/> | ||||
| 611 | <Normal Text></Normal Text><br/> | ||||
| 612 | <Variable>$prefix</Variable><Normal Text>: ms</Normal Text><br/> | ||||
| 613 | <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/> | ||||
| 614 | <At Rule>@debug</At Rule><Normal Text> \1F46D </Normal Text><Comment>// 👭</Comment><br/> | ||||
| 615 | <At Rule>@debug</At Rule><Normal Text> \21 </Normal Text><Comment>// \!</Comment><br/> | ||||
| 616 | <At Rule>@debug</At Rule><Normal Text> \7Fx </Normal Text><Comment>// \7f x</Comment><br/> | ||||
| 617 | <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/> | ||||
| 618 | <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/> | ||||
| 619 | <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/> | ||||
| 620 | <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/> | ||||
| 621 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#f2ece4</Color><Normal Text> </Normal Text><Comment>// #f2ece4</Comment><br/> | ||||
| 622 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#b37399aa</Color><Normal Text> </Normal Text><Comment>// rgba(179, 115, 153, 67%)</Comment><br/> | ||||
| 623 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>midnightblue</Color><Normal Text> </Normal Text><Comment>// #191970</Comment><br/> | ||||
| 624 | <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/> | ||||
| 625 | <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/> | ||||
| 626 | <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/> | ||||
| 627 | <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/> | ||||
| 628 | <Variable>$venus</Variable><Normal Text>: </Normal Text><Color>#998099</Color><br/> | ||||
| 629 | <Normal Text></Normal Text><br/> | ||||
| 630 | <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/> | ||||
| 631 | <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/> | ||||
| 632 | <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/> | ||||
| 633 | <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/> | ||||
| 634 | <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/> | ||||
| 635 | <Normal Text></Normal Text><br/> | ||||
| 636 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>prefixes-for-browsers</Function><Normal Text>(</Normal Text><Variable>$browsers</Variable><Normal Text>)</Normal Text><br/> | ||||
| 637 | <Normal Text> </Normal Text><Variable>$prefixes</Variable><Normal Text>: ()</Normal Text><br/> | ||||
| 638 | <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/> | ||||
| 639 | <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/> | ||||
| 640 | <Normal Text></Normal Text><br/> | ||||
| 641 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$prefixes</Variable><br/> | ||||
| 642 | <Normal Text></Normal Text><br/> | ||||
| 643 | <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/> | ||||
| 644 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/> | ||||
| 645 | <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/> | ||||
| 646 | <Normal Text></Normal Text><br/> | ||||
| 647 | <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/> | ||||
| 648 | <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/> | ||||
| 649 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 650 | <Normal Text></Normal Text><br/> | ||||
| 651 | <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/> | ||||
| 652 | <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/> | ||||
| 653 | <Normal Text></Normal Text><br/> | ||||
| 654 | <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/> | ||||
| 655 | <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/> | ||||
| 656 | <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/> | ||||
| 657 | <Normal Text></Normal Text><br/> | ||||
| 658 | <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/> | ||||
| 659 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/> | ||||
| 660 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/> | ||||
| 661 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/> | ||||
| 662 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/> | ||||
| 663 | <Normal Text></Normal Text><br/> | ||||
| 664 | <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/> | ||||
| 665 | <Normal Text></Normal Text><br/> | ||||
| 666 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>add-browser-prefix</Function><Normal Text>(</Normal Text><Variable>$browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text>)</Normal Text><br/> | ||||
| 667 | <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/> | ||||
| 668 | <Normal Text></Normal Text><br/> | ||||
| 669 | <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/> | ||||
| 670 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$prefixes-by-browser</Variable><br/> | ||||
| 671 | <Comment>// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)</Comment><br/> | ||||
| 672 | <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/> | ||||
| 673 | <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/> | ||||
| 674 | <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/> | ||||
| 675 | <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/> | ||||
| 676 | <Normal Text></Normal Text><br/> | ||||
| 677 | <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/> | ||||
| 678 | <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/> | ||||
| 679 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>&</Operator><Normal Text> </Normal Text><Comment>// null</Comment><br/> | ||||
| 680 | <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/> | ||||
| 681 | <Normal Text></Normal Text><br/> | ||||
| 682 | <Normal Text>h3</Normal Text><br/> | ||||
| 683 | <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/> | ||||
| 684 | <Normal Text></Normal Text><br/> | ||||
| 685 | <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/> | ||||
| 686 | <Normal Text></Normal Text><br/> | ||||
| 687 | <Normal Text>h3</Normal Text><br/> | ||||
| 688 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>:</Normal Text><br/> | ||||
| 689 | <Normal Text> </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>18</Number><Unit>px</Unit><br/> | ||||
| 690 | <Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/> | ||||
| 691 | <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/> | ||||
| 692 | <Normal Text></Normal Text><br/> | ||||
| 693 | <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/> | ||||
| 694 | <Comment>/// removed.</Comment><br/> | ||||
| 695 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>remove-where</Function><Normal Text>(</Normal Text><Variable>$list</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$condition</Variable><Normal Text>)</Normal Text><br/> | ||||
| 696 | <Normal Text> </Normal Text><Variable>$new-list</Variable><Normal Text>: ()</Normal Text><br/> | ||||
| 697 | <Normal Text> </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Function>list-separator(</Function><Variable>$list</Variable><Function>)</Function><br/> | ||||
| 698 | <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/> | ||||
| 699 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Operator>not</Operator><Normal Text> </Normal Text><Function>call(</Function><Variable>$condition</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$element</Variable><Function>)</Function><br/> | ||||
| 700 | <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/> | ||||
| 701 | <Normal Text></Normal Text><br/> | ||||
| 702 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$new-list</Variable><br/> | ||||
| 703 | <Normal Text></Normal Text><br/> | ||||
| 704 | <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/> | ||||
| 705 | <Normal Text></Normal Text><br/> | ||||
| 706 | <Normal Text>content</Normal Text><br/> | ||||
| 707 | <Normal Text> </Normal Text><At Rule>@function</At Rule><Normal Text> </Normal Text><Function>contains-helvetica</Function><Normal Text>(</Normal Text><Variable>$string</Variable><Normal Text>)</Normal Text><br/> | ||||
| 708 | <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/> | ||||
| 709 | <Normal Text></Normal Text><br/> | ||||
| 710 | <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/> | ||||
| 711 | <Normal Text></Normal Text><br/> | ||||
| 712 | <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/> | ||||
| 713 | <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/> | ||||
| 714 | <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/> | ||||
| 715 | <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/> | ||||
| 716 | <Normal Text></Normal Text><br/> | ||||
| 717 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> == Helvetica </Normal Text><Comment>// true</Comment><br/> | ||||
| 718 | <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/> | ||||
| 719 | <Normal Text></Normal Text><br/> | ||||
| 720 | <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/> | ||||
| 721 | <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/> | ||||
| 722 | <Normal Text></Normal Text><br/> | ||||
| 723 | <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/> | ||||
| 724 | <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/> | ||||
| 725 | <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/> | ||||
| 726 | <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/> | ||||
| 727 | <Normal Text></Normal Text><br/> | ||||
| 728 | <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/> | ||||
| 729 | <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/> | ||||
| 730 | <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/> | ||||
| 731 | <Normal Text></Normal Text><br/> | ||||
| 732 | <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/> | ||||
| 733 | <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/> | ||||
| 734 | <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/> | ||||
| 735 | <Normal Text></Normal Text><br/> | ||||
| 736 | <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/> | ||||
| 737 | <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/> | ||||
| 738 | <Normal Text></Normal Text><br/> | ||||
| 739 | <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/> | ||||
| 740 | <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/> | ||||
| 741 | <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/> | ||||
| 742 | <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/> | ||||
| 743 | <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/> | ||||
| 744 | <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/> | ||||
| 745 | <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/> | ||||
| 746 | <Normal Text></Normal Text><br/> | ||||
| 747 | <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/> | ||||
| 748 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><Normal Text> </Normal Text><Comment>// 0.5</Comment><br/> | ||||
| 749 | <Normal Text></Normal Text><br/> | ||||
| 750 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty</Function><Normal Text>()</Normal Text><br/> | ||||
| 751 | <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/> | ||||
| 752 | <Normal Text></Normal Text><br/> | ||||
| 753 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty()</Function><Normal Text> </Normal Text><Comment>// 0.5</Comment><br/> | ||||
| 754 | <Normal Text></Normal Text><br/> | ||||
| 755 | <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/> | ||||
| 756 | <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/> | ||||
| 757 | <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/> | ||||
| 758 | <Normal Text></Normal Text><br/> | ||||
| 759 | <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/> | ||||
| 760 | <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/> | ||||
| 761 | <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/> | ||||
| 762 | <Comment>// (read "pixel-degrees per second-em")</Comment><br/> | ||||
| 763 | <Comment></Comment><br/> | ||||
| 764 | <Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/> | ||||
| 765 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text> </Normal Text><Comment>// 20deg/s</Comment><br/> | ||||
| 766 | <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/> | ||||
| 767 | <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/> | ||||
| 768 | <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/> | ||||
| 769 | <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/> | ||||
| 770 | <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/> | ||||
| 771 | <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/> | ||||
| 772 | <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/> | ||||
| 773 | <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/> | ||||
| 774 | <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/> | ||||
| 775 | <Normal Text></Normal Text><br/> | ||||
| 776 | <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/> | ||||
| 777 | <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/> | ||||
| 778 | <Normal Text></Normal Text><br/> | ||||
| 779 | <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/> | ||||
| 780 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> moz </Normal Text><Comment>// -moz</Comment><br/> | ||||
| 781 | <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/> | ||||
| 782 | <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/> | ||||
| 783 | <Normal Text></Normal Text><br/> | ||||
| 784 | <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/> | ||||
| 785 | <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/> | ||||
| 786 | <Normal Text></Normal Text><br/> | ||||
| 787 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Operator>or</Operator><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text> </Normal Text><Comment>// true</Comment><br/> | ||||
| 788 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text> </Normal Text><Operator>or</Operator><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text> </Normal Text><Comment>// false</Comment><br/> | ||||
| 789 | <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/> | ||||
| 790 | <Normal Text></Normal Text><br/> | ||||
| 791 | <Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#f2ece4</Color><br/> | ||||
| 792 | <Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#e1d7d2</Color><br/> | ||||
| 793 | <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/> | ||||
| 794 | <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/> | ||||
| 795 | <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/> | ||||
| 796 | <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/> | ||||
| 797 | <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/> | ||||
| 798 | <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/> | ||||
| 799 | <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/> | ||||
| 800 | <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/> | ||||
| 801 | <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/> | ||||
| 802 | <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/> | ||||
| 803 | <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>: space) </Normal Text><Comment>// blue red green</Comment><br/> | ||||
| 804 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/> | ||||
| 805 | <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/> | ||||
| 806 | <Normal Text></Normal Text><br/> | ||||
| 807 | <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/> | ||||
| 808 | <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/> | ||||
| 809 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/> | ||||
| 810 | <Normal Text></Normal Text><br/> | ||||
| 811 | <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/> | ||||
| 812 | <Normal Text></Normal Text><br/> | ||||
| 813 | <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/> | ||||
| 814 | <Normal Text></Normal Text><br/> | ||||
| 815 | <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/> | ||||
| 816 | <Normal Text></Normal Text><br/> | ||||
| 817 | <Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/> | ||||
| 818 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/> | ||||
| 819 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 820 | <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/> | ||||
| 821 | <Normal Text> </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/> | ||||
| 822 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/> | ||||
| 823 | <Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/> | ||||
| 824 | <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/> | ||||