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