832 lines
108 KiB
HTML
832 lines
108 KiB
HTML
<!DOCTYPE html>
|
|
<html><head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>highlight.sass</title>
|
|
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (SASS) - Theme (Breeze Dark)"/>
|
|
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
|
|
html<span style="color:#3f8058">,</span>
|
|
body<span style="color:#3f8058">,</span>
|
|
ul<span style="color:#3f8058">,</span>
|
|
ol
|
|
<span style="font-weight:bold">margin</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">padding</span>: <span style="color:#f67400">0</span>
|
|
|
|
<span style="color:#27ae60">@import</span> reset
|
|
body
|
|
<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>
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">#efefef</span>
|
|
|
|
<span style="color:#27aeae">$font-stack</span>: Helvetica<span style="color:#3f8058">,</span> <span style="color:#f67400">sans-serif</span>
|
|
<span style="color:#27aeae">$primary-color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
body
|
|
<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>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$primary-color</span>
|
|
<span style="color:#8e44ad">.container</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span>
|
|
|
|
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>
|
|
<span style="font-weight:bold">float</span>: <span style="color:#f67400">left</span>
|
|
<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>
|
|
|
|
<span style="color:#7f8c8d">%message-shared</span>
|
|
<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>
|
|
<span style="font-weight:bold">padding</span>: <span style="color:#f67400">10</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">#333</span>
|
|
|
|
<span style="color:#8e44ad">.message</span>
|
|
<span style="color:#27ae60">@extend</span> <span style="color:#3f8058">%</span>message-shared
|
|
|
|
<span style="color:#8e44ad">.success</span>
|
|
<span style="color:#27ae60">@extend</span> <span style="color:#3f8058">%</span>message-shared
|
|
<span style="font-weight:bold">border-color</span>: <span style="color:#27aeae;font-weight:bold">green</span>
|
|
|
|
<span style="color:#27ae60">=</span><span style="color:#8e44ad">transform</span>(<span style="color:#27aeae">$property</span>)
|
|
-webkit-transform: <span style="color:#27aeae">$property</span>
|
|
-ms-transform: <span style="color:#27aeae">$property</span>
|
|
<span style="font-weight:bold">transform</span>: <span style="color:#27aeae">$property</span>
|
|
<span style="color:#8e44ad">.box</span>
|
|
<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>
|
|
|
|
<span style="color:#7a7c7d">// This comment won't be included in the CSS.</span>
|
|
<span style="color:#7a7c7d"> This is also commented out.</span>
|
|
<span style="color:#27ae60;font-weight:bold">#a</span>
|
|
<span style="color:#7a7c7d">/* But this comment will, except in compressed mode.</span>
|
|
|
|
<span style="color:#7a7c7d">/* It can also contain interpolation:</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#27ae60;font-weight:bold">#a</span>
|
|
|
|
<span style="color:#7a7c7d">// But this comment will, except in compressed mode.</span>
|
|
|
|
<span style="color:#7a7c7d">// It can also contain interpolation:</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#7a7c7d"> 1 + 1 = #{1 + 1}</span>
|
|
<span style="color:#27ae60;font-weight:bold">#a</span>
|
|
|
|
<span style="color:#7a7c7d">/*! This comment will be included even in compressed mode.</span>
|
|
|
|
<span style="color:#27ae60;font-weight:bold">#a</span>
|
|
|
|
<span style="color:#7a7c7d">/**/</span>
|
|
|
|
p <span style="color:#8e44ad">.sans</span>
|
|
<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>
|
|
|
|
p <span style="color:#8e44ad">.sans</span>
|
|
<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>
|
|
|
|
<span style="color:#7a7c7d">/// Computes an exponent.</span>
|
|
<span style="color:#7a7c7d">///</span>
|
|
<span style="color:#7a7c7d">/// @param {number} $base</span>
|
|
<span style="color:#7a7c7d">/// The number to multiply by itself.</span>
|
|
<span style="color:#7a7c7d">/// @param {integer (unitless)} $exponent</span>
|
|
<span style="color:#7a7c7d">/// The number of `$base`s to multiply together.</span>
|
|
<span style="color:#7a7c7d">/// @return {number} `$base` to the power of `$exponent`.</span>
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$result</span>: <span style="color:#f67400">1</span>
|
|
<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>
|
|
<span style="color:#27aeae">$result</span>: <span style="color:#27aeae">$result</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$base</span>
|
|
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$result</span>
|
|
|
|
<span style="color:#27aeae">$roboto-font-path</span>: <span style="color:#f44f4f">"../fonts/roboto"</span>
|
|
|
|
<span style="color:#27ae60">@font-face</span>
|
|
<span style="color:#7a7c7d">// This is parsed as a normal function call that takes a quoted string.</span>
|
|
<span style="font-weight:bold">src</span>: <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>
|
|
<span style="font-weight:bold">src</span>: <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>
|
|
<span style="font-weight:bold">src</span>: <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>
|
|
|
|
<span style="font-weight:bold">font-family</span>: <span style="color:#f44f4f">"Roboto"</span>
|
|
<span style="font-weight:bold">font-weight</span>: <span style="color:#f67400">100</span>
|
|
|
|
<span style="color:#8e44ad">.logo</span>
|
|
<span style="color:#27aeae">$width</span>: <span style="color:#f67400">800</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#27aeae">$width</span>
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">absolute</span>
|
|
<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>
|
|
<span style="font-weight:bold">top</span>: <span style="color:#f67400">0</span>
|
|
|
|
<span style="color:#27aeae">$padding</span>: <span style="color:#f67400">12</span><span style="color:#2980b9">px</span>
|
|
|
|
<span style="color:#8e44ad">.post</span>
|
|
<span style="color:#7a7c7d">// Since these max() calls don't use any Sass features other than</span>
|
|
<span style="color:#7a7c7d">// interpolation, they're compiled to CSS max() calls.</span>
|
|
<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>
|
|
<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>
|
|
|
|
|
|
<span style="color:#8e44ad">.sidebar</span>
|
|
<span style="color:#7a7c7d">// Since these refer to a Sass variable without interpolation, they call</span>
|
|
<span style="color:#7a7c7d">// Sass's built-in max() function.</span>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.circle</span>
|
|
<span style="color:#27aeae">$size</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#27aeae">$size</span>
|
|
<span style="font-weight:bold">height</span>: <span style="color:#27aeae">$size</span>
|
|
<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>
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$prefix</span> in <span style="color:#27aeae">$prefixes</span>
|
|
-<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>
|
|
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span>: <span style="color:#27aeae">$value</span>
|
|
|
|
|
|
<span style="color:#8e44ad">.gray</span>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.enlarge</span>
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#f67400">14</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">transition</span>:
|
|
<span style="font-weight:bold">property</span>: font-size
|
|
<span style="font-weight:bold">duration</span>: <span style="color:#f67400">4</span><span style="color:#2980b9">s</span>
|
|
<span style="font-weight:bold">delay</span>: <span style="color:#f67400">2</span><span style="color:#2980b9">s</span>
|
|
|
|
<span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span>
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#f67400">36</span><span style="color:#2980b9">px</span>
|
|
|
|
<span style="color:#8e44ad">.info-page</span>
|
|
<span style="font-weight:bold">margin</span>: <span style="color:#7f8c8d">auto</span>
|
|
<span style="font-weight:bold">bottom</span>: <span style="color:#f67400">10</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">top</span>: <span style="color:#f67400">2</span><span style="color:#2980b9">px</span>
|
|
|
|
<span style="color:#27aeae">$rounded-corners</span>: <span style="color:#7f8c8d">false</span>
|
|
|
|
<span style="color:#8e44ad">.button</span>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#27aeae">$primary</span>: <span style="color:#27aeae;font-weight:bold">#81899b</span>
|
|
<span style="color:#27aeae">$accent</span>: <span style="color:#27aeae;font-weight:bold">#ab2e</span>
|
|
<span style="color:#27aeae">$warn</span>: <span style="color:#27aeae;font-weight:bold">#dfa612aa</span>
|
|
|
|
<span style="color:#c45b00;font-style:italic">:root</span>
|
|
<span style="color:#27aeae">--primary</span>: <span style="color:#3f8058">#{</span><span style="color:#27aeae">$primary</span><span style="color:#3f8058">}</span>
|
|
<span style="color:#27aeae">--accent</span>: <span style="color:#3f8058">#{</span><span style="color:#27aeae">$accent</span><span style="color:#3f8058">}</span>
|
|
<span style="color:#27aeae">--warn</span>: <span style="color:#3f8058">#{</span><span style="color:#27aeae">$warn</span><span style="color:#3f8058">}</span>
|
|
|
|
<span style="color:#7a7c7d">// Even though this looks like a Sass variable, it's valid CSS so it's not</span>
|
|
<span style="color:#7a7c7d">// evaluated.</span>
|
|
<span style="color:#27aeae">--consumed-by-js</span>: <span style="color:#27aeae">$primary</span>
|
|
|
|
<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
|
|
<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
|
|
|
|
<span style="color:#c45b00;font-style:italic">:root</span>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.alert</span>
|
|
<span style="color:#7a7c7d">// The parent selector can be used to add pseudo-classes to the outer</span>
|
|
<span style="color:#7a7c7d">// selector.</span>
|
|
<span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span>
|
|
<span style="font-weight:bold">font-weight</span>: <span style="color:#f67400">bold</span>
|
|
|
|
|
|
<span style="color:#7a7c7d">// It can also be used to style the outer selector in a certain context, such</span>
|
|
<span style="color:#7a7c7d">// as a body set to use a right-to-left language.</span>
|
|
<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>
|
|
<span style="font-weight:bold">margin-left</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">margin-right</span>: <span style="color:#f67400">10</span><span style="color:#2980b9">px</span>
|
|
|
|
|
|
<span style="color:#7a7c7d">// You can even use it as an argument to pseudo-class selectors.</span>
|
|
<span style="color:#c45b00;font-style:italic">:not(&)</span>
|
|
<span style="font-weight:bold">opacity</span>: <span style="color:#f67400">0.8</span>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#27aeae">$child</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
<span style="color:#27ae60">@content</span>
|
|
|
|
|
|
|
|
<span style="color:#8e44ad">.wrapper</span> <span style="color:#8e44ad">.field</span>
|
|
<span style="color:#27ae60">@include</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#f44f4f">"input"</span><span style="color:#8e44ad">)</span>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">app-background(</span><span style="color:#27aeae">$color</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae">$color</span>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.sidebar</span>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.accordion</span>
|
|
<span style="font-weight:bold">max-width</span>: <span style="color:#f67400">600</span><span style="color:#2980b9">px</span>
|
|
<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>
|
|
|
|
<span style="color:#3f8058">&</span>__copy
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">none</span>
|
|
<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>
|
|
<span style="font-weight:bold">line-height</span>: <span style="color:#f67400">1.6</span>
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#f67400">14</span><span style="color:#2980b9">px</span>
|
|
|
|
<span style="color:#3f8058">&</span>--open
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">block</span>
|
|
|
|
|
|
<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>
|
|
<span style="font-weight:bold">font-weight</span>: <span style="color:#f67400">bold</span>
|
|
|
|
<span style="color:#7f8c8d">%strong-alert</span><span style="color:#c45b00;font-style:italic">:hover</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>
|
|
|
|
<span style="color:#7f8c8d">%toolbelt</span>
|
|
<span style="font-weight:bold">box-sizing</span>: <span style="color:#f67400">border-box</span>
|
|
<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>
|
|
|
|
<span style="color:#3f8058">&</span><span style="color:#c45b00;font-style:italic">:hover</span>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.action-buttons</span>
|
|
<span style="color:#27ae60">@extend</span> <span style="color:#3f8058">%</span>toolbelt
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">#4285f4</span>
|
|
|
|
<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>
|
|
<span style="color:#27aeae">$black</span>: <span style="color:#27aeae;font-weight:bold">#000</span> <span style="color:#2980b9">!default</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#27aeae">$border-radius</span>: <span style="color:#f67400">0.1</span><span style="color:#2980b9">rem</span>
|
|
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">'library'</span>
|
|
|
|
<span style="color:#27aeae">$global-variable</span>: global value
|
|
|
|
<span style="color:#7a7c7d">// This would fail, because $local-variable isn't in scope:</span>
|
|
<span style="color:#7a7c7d">// local: $local-variable</span>
|
|
|
|
<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>)
|
|
|
|
<span style="color:#8e44ad">.alert</span>
|
|
<span style="color:#7a7c7d">// Instead of $theme-color-#{warning}</span>
|
|
<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>
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<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>
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">absolute</span>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$top-or-bottom</span><span style="color:#3f8058">}</span>: <span style="color:#f67400">0</span>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$left-or-right</span><span style="color:#3f8058">}</span>: <span style="color:#f67400">0</span>
|
|
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">inline-animation(</span><span style="color:#27aeae">$duration</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$name</span>: inline-<span style="color:#3f8058">#{</span><span style="color:#8e44ad">unique-id()</span><span style="color:#3f8058">}</span>
|
|
|
|
<span style="color:#27ae60">@keyframes</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="color:#27ae60">@content</span>
|
|
|
|
<span style="font-weight:bold">animation-name</span>: <span style="color:#27aeae">$name</span>
|
|
<span style="font-weight:bold">animation-duration</span>: <span style="color:#27aeae">$duration</span>
|
|
<span style="font-weight:bold">animation-iteration-count</span>: <span style="color:#f67400">infinite</span>
|
|
|
|
|
|
<span style="color:#8e44ad">.pulse</span>
|
|
<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>
|
|
from
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">yellow</span>
|
|
to
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">red</span>
|
|
|
|
<span style="color:#8e44ad">.example</span>
|
|
unquoted: <span style="color:#3f8058">#{</span><span style="color:#f44f4f">"string"</span><span style="color:#3f8058">}</span>
|
|
|
|
<span style="color:#3f8058">&</span> <span style="color:#3f8058">&</span>
|
|
<span style="font-weight:bold">padding</span>:
|
|
<span style="font-weight:bold">bottom</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">left</span>: <span style="color:#f67400">0</span>
|
|
|
|
<span style="color:#7a7c7d">// style.sass</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">'foundation/code'</span>, <span style="color:#f44f4f">'foundation/lists'</span>
|
|
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"theme.css"</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"http://fonts.googleapis.com/css?family=Droid+Sans"</span>
|
|
<span style="color:#27ae60">@import</span> <span style="color:#8e44ad">url(</span><span style="color:#f44f4f">theme</span><span style="color:#8e44ad">)</span>
|
|
<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>)
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">google-font(</span><span style="color:#27aeae">$family</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</span> horizontal-list
|
|
<span style="color:#27ae60">@include</span> reset-list
|
|
|
|
li
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>
|
|
<span style="font-weight:bold">margin</span>:
|
|
<span style="font-weight:bold">left</span>: <span style="color:#3f8058">-</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">right</span>: <span style="color:#f67400">2</span><span style="color:#2980b9">em</span>
|
|
|
|
nav ul
|
|
<span style="color:#27ae60">@include</span> horizontal-list
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span>: <span style="color:#27aeae">$ltr-value</span>
|
|
|
|
<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>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span>: <span style="color:#27aeae">$rtl-value</span>
|
|
|
|
<span style="color:#8e44ad">.sidebar</span>
|
|
<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>
|
|
|
|
<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:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$y</span>: <span style="color:#f67400">50</span><span style="color:#2980b9">%</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
<span style="font-weight:bold">overflow</span>: <span style="color:#f67400">hidden</span>
|
|
<span style="font-weight:bold">text-align</span>: <span style="color:#f67400">left</span>
|
|
|
|
<span style="font-weight:bold">background</span>:
|
|
<span style="font-weight:bold">image</span>: <span style="color:#27aeae">$image</span>
|
|
<span style="font-weight:bold">repeat</span>: <span style="color:#f67400">no-repeat</span>
|
|
<span style="font-weight:bold">position</span>: <span style="color:#27aeae">$x</span> <span style="color:#27aeae">$y</span>
|
|
|
|
<span style="color:#8e44ad">.mail-icon</span>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">syntax-colors(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
|
|
<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>
|
|
pre span<span style="color:#8e44ad">.stx-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$color</span>
|
|
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">media(</span><span style="color:#27aeae">$types</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$type</span> in <span style="color:#27aeae">$types</span>
|
|
<span style="color:#27ae60">@media</span> <span style="color:#3f8058">#{</span><span style="color:#27aeae">$type</span><span style="color:#3f8058">}</span>
|
|
<span style="color:#27ae60">@content</span>(<span style="color:#27aeae">$type</span>)
|
|
|
|
<span style="color:#27ae60">@include</span> <span style="color:#8e44ad">media(</span><span style="color:#f67400">screen</span><span style="color:#3f8058">,</span> print<span style="color:#8e44ad">)</span> using (<span style="color:#27aeae">$type</span>)
|
|
h1
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#f67400">40</span><span style="color:#2980b9">px</span>
|
|
<span style="color:#27ae60">@if</span> <span style="color:#27aeae">$type</span> == <span style="color:#f67400">print</span>
|
|
<span style="font-weight:bold">font-family</span>: Calluna
|
|
|
|
<span style="color:#27ae60">=</span><span style="color:#8e44ad">reset-list</span>
|
|
<span style="font-weight:bold">margin</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">padding</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">list-style</span>: <span style="color:#f67400">none</span>
|
|
|
|
<span style="color:#27ae60">=</span><span style="color:#8e44ad">horizontal-list</span>
|
|
<span style="color:#27ae60">+</span>reset-list
|
|
|
|
li
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>
|
|
<span style="font-weight:bold">margin</span>:
|
|
<span style="font-weight:bold">left</span>: <span style="color:#3f8058">-</span><span style="color:#f67400">2</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">right</span>: <span style="color:#f67400">2</span><span style="color:#2980b9">em</span>
|
|
|
|
nav ul
|
|
<span style="color:#27ae60">+</span>horizontal-list
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$result</span>: <span style="color:#f67400">1</span>
|
|
<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>
|
|
<span style="color:#27aeae">$result</span>: <span style="color:#27aeae">$result</span> <span style="color:#3f8058">*</span> <span style="color:#27aeae">$base</span>
|
|
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$result</span>
|
|
|
|
<span style="color:#8e44ad">.sidebar</span>
|
|
<span style="font-weight:bold">float</span>: <span style="color:#f67400">left</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@function</span> <span style="color:#8e44ad">sum(</span><span style="color:#27aeae">$numbers</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$sum</span>: <span style="color:#f67400">0</span>
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$number</span> in <span style="color:#27aeae">$numbers</span>
|
|
<span style="color:#27aeae">$sum</span>: <span style="color:#27aeae">$sum</span> <span style="color:#3f8058">+</span> <span style="color:#27aeae">$number</span>
|
|
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$sum</span>
|
|
|
|
<span style="color:#8e44ad">.micro</span>
|
|
<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>
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#7a7c7d">// Avoid making new strings if we don't need to.</span>
|
|
<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:#f67400">0</span>
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$insert</span>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.error</span>
|
|
<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>
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">#fdd</span>
|
|
|
|
<span style="color:#3f8058">&</span>--serious
|
|
<span style="color:#27ae60">@extend</span> .error
|
|
<span style="font-weight:bold">border-width</span>: <span style="color:#f67400">3</span><span style="color:#2980b9">px</span>
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@if</span> <span style="color:#27aeae">$property</span> <span style="color:#2980b9">!</span>= <span style="color:#f67400">left</span> <span style="font-weight:bold">and</span> <span style="color:#27aeae">$property</span> <span style="color:#2980b9">!</span>= <span style="color:#f67400">right</span>
|
|
<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>
|
|
|
|
<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:#7f8c8d">initial</span><span style="color:#3f8058">,</span> <span style="color:#27aeae">$value</span><span style="color:#8e44ad">)</span>
|
|
<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:#7f8c8d">initial</span><span style="color:#8e44ad">)</span>
|
|
|
|
<span style="font-weight:bold">left</span>: <span style="color:#27aeae">$left-value</span>
|
|
<span style="font-weight:bold">right</span>: <span style="color:#27aeae">$right-value</span>
|
|
<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>
|
|
<span style="font-weight:bold">left</span>: <span style="color:#27aeae">$right-value</span>
|
|
<span style="font-weight:bold">right</span>: <span style="color:#27aeae">$left-value</span>
|
|
|
|
<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
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$prefix</span> in <span style="color:#27aeae">$prefixes</span>
|
|
<span style="color:#27ae60">@if</span> <span style="font-weight:bold">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>
|
|
<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>
|
|
|
|
|
|
-<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>
|
|
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$property</span><span style="color:#3f8058">}</span>: <span style="color:#27aeae">$value</span>
|
|
|
|
|
|
<span style="color:#8e44ad">.tilt</span>
|
|
<span style="color:#7a7c7d">// Oops, we typo'd "webkit" as "wekbit"!</span>
|
|
<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>
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="font-weight:bold">margin-left</span>: <span style="color:#27aeae">$divider-offset</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">unify-parent(</span><span style="color:#27aeae">$child</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
<span style="color:#27ae60">@content</span>
|
|
|
|
|
|
<span style="color:#8e44ad">.square-av</span>
|
|
<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>
|
|
<span style="color:#8e44ad">.circle-av</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@mixin</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>
|
|
<span style="color:#27ae60">@if</span> <span style="color:#27aeae">$light-theme</span>
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae">$light-background</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$light-text</span>
|
|
<span style="color:#27ae60">@else</span>
|
|
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae">$dark-background</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$dark-text</span>
|
|
|
|
<span style="color:#8e44ad">.banner</span>
|
|
<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>
|
|
body<span style="color:#8e44ad">.dark</span> <span style="color:#3f8058">&</span>
|
|
<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>
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="font-weight:bold">height</span>: <span style="color:#f67400">0</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#f67400">0</span>
|
|
|
|
<span style="font-weight:bold">border-color</span>: <span style="color:#f67400">transparent</span>
|
|
<span style="font-weight:bold">border-style</span>: <span style="color:#f67400">solid</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@if</span> <span style="color:#27aeae">$direction</span> == up
|
|
<span style="font-weight:bold">border-bottom-color</span>: <span style="color:#27aeae">$color</span>
|
|
<span style="color:#27ae60">@else</span> if <span style="color:#27aeae">$direction</span> == <span style="color:#f67400">right</span>
|
|
<span style="font-weight:bold">border-left-color</span>: <span style="color:#27aeae">$color</span>
|
|
<span style="color:#27ae60">@else</span> if <span style="color:#27aeae">$direction</span> == down
|
|
<span style="font-weight:bold">border-top-color</span>: <span style="color:#27aeae">$color</span>
|
|
<span style="color:#27ae60">@else</span> if <span style="color:#27aeae">$direction</span> == <span style="color:#f67400">left</span>
|
|
<span style="font-weight:bold">border-right-color</span>: <span style="color:#27aeae">$color</span>
|
|
<span style="color:#27ae60">@else</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$size</span> in <span style="color:#27aeae">$sizes</span>
|
|
<span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$size</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#27aeae">$size</span>
|
|
<span style="font-weight:bold">height</span>: <span style="color:#27aeae">$size</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#27aeae">$size</span>
|
|
|
|
<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>)
|
|
|
|
<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>
|
|
<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>
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>
|
|
<span style="font-weight:bold">font-family</span>: <span style="color:#f44f4f">"Icon Font"</span>
|
|
<span style="font-weight:bold">content</span>: <span style="color:#27aeae">$glyph</span>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>
|
|
<span style="font-weight:bold">font-family</span>: <span style="color:#f44f4f">"Icon Font"</span>
|
|
<span style="font-weight:bold">content</span>: <span style="color:#27aeae">$glyph</span>
|
|
<span style="font-weight:bold">font-size</span>: <span style="color:#27aeae">$size</span>
|
|
|
|
<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>
|
|
ul<span style="color:#c45b00;font-style:italic">:nth-child(3n + #{$i})</span>
|
|
<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>
|
|
|
|
<span style="color:#7a7c7d">/// Divides `$value` by `$ratio` until it's below `$base`.</span>
|
|
<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:#f67400">1.618</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@while</span> <span style="color:#27aeae">$value</span> > <span style="color:#27aeae">$base</span>
|
|
<span style="color:#27aeae">$value</span>: <span style="color:#27aeae">$value</span> <span style="color:#3f8058">/</span> <span style="color:#27aeae">$ratio</span>
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$value</span>
|
|
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@font-face</span>
|
|
<span style="font-weight:bold">font-family</span>: <span style="color:#f44f4f">"Open Sans"</span>
|
|
<span style="font-weight:bold">src</span>: <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>
|
|
|
|
<span style="color:#27ae60">@counter-style</span> thumbs
|
|
<span style="font-weight:bold">system</span>: <span style="color:#f67400">cyclic</span>
|
|
<span style="font-weight:bold">symbols</span>: <span style="color:#f44f4f">"</span><span style="color:#3daee9">\1F44D</span><span style="color:#f44f4f">"</span>
|
|
|
|
<span style="color:#27ae60">@mixin</span> sticky-position
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">fixed</span>
|
|
<span style="color:#27ae60">@supports</span> (<span style="font-weight:bold">position</span>: <span style="color:#f67400">sticky</span>)
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">sticky</span>
|
|
|
|
<span style="color:#27ae60">@media</span> (<span style="font-weight:bold">hover</span>: <span style="color:#f67400">hover</span>)
|
|
<span style="color:#8e44ad">.button</span><span style="color:#c45b00;font-style:italic">:hover</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@media</span> (<span style="color:#f67400">color</span>)
|
|
<span style="font-weight:bold">border-color</span>: <span style="color:#27aeae;font-weight:bold">#036</span>
|
|
|
|
<span style="color:#27ae60">@keyframes</span> slide-in
|
|
from
|
|
<span style="font-weight:bold">margin-left</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#f67400">300</span><span style="color:#2980b9">%</span>
|
|
|
|
|
|
70%
|
|
<span style="font-weight:bold">margin-left</span>: <span style="color:#f67400">90</span><span style="color:#2980b9">%</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#f67400">150</span><span style="color:#2980b9">%</span>
|
|
|
|
|
|
to
|
|
<span style="font-weight:bold">margin-left</span>: <span style="color:#f67400">0</span><span style="color:#2980b9">%</span>
|
|
<span style="font-weight:bold">width</span>: <span style="color:#f67400">100</span><span style="color:#2980b9">%</span>
|
|
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">100</span> <span style="color:#7a7c7d">// 100</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">0.8</span> <span style="color:#7a7c7d">// 0.8</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">16</span><span style="color:#2980b9">px</span> <span style="color:#7a7c7d">// 16px</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">5.2e3</span> <span style="color:#7a7c7d">// 5200</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">6e-2</span> <span style="color:#7a7c7d">// 0.06</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#7a7c7d">// (read "pixel-degrees per second-em")</span>
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae">$degrees-per-second</span> <span style="color:#7a7c7d">// 20deg/s</span>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">0.012345678912345</span> <span style="color:#7a7c7d">// 0.0123456789</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">1.00000000009</span> <span style="color:#7a7c7d">// 1</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">0.99999999991</span> <span style="color:#7a7c7d">// 1</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> \.widget <span style="color:#7a7c7d">// \.widget</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f44f4f">"Helvetica Neue"</span> <span style="color:#7a7c7d">// "Helvetica Neue"</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#27aeae">$roboto-variant</span>: <span style="color:#f44f4f">"Mono"</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">bold</span> <span style="color:#7a7c7d">// bold</span>
|
|
<span style="color:#27ae60">@debug</span> -webkit-flex <span style="color:#7a7c7d">// -webkit-flex</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#3f8058">--</span><span style="color:#f67400">123</span> <span style="color:#7a7c7d">// --123</span>
|
|
|
|
<span style="color:#27aeae">$prefix</span>: ms
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> \1F46D <span style="color:#7a7c7d">// 👭</span>
|
|
<span style="color:#27ae60">@debug</span> \21 <span style="color:#7a7c7d">// \!</span>
|
|
<span style="color:#27ae60">@debug</span> \7Fx <span style="color:#7a7c7d">// \7f x</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae;font-weight:bold">#f2ece4</span> <span style="color:#7a7c7d">// #f2ece4</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae;font-weight:bold">midnightblue</span> <span style="color:#7a7c7d">// #191970</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#27aeae">$venus</span>: <span style="color:#27aeae;font-weight:bold">#998099</span>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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)
|
|
|
|
<span style="color:#27ae60">@function</span> <span style="color:#8e44ad">prefixes-for-browsers(</span><span style="color:#27aeae">$browsers</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$prefixes</span>: ()
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$browser</span> in <span style="color:#27aeae">$browsers</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$prefixes</span>
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">syntax-colors(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
|
|
<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>
|
|
pre span<span style="color:#8e44ad">.stx-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$color</span>
|
|
|
|
<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>;
|
|
<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>)
|
|
|
|
<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>
|
|
<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>
|
|
<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>)
|
|
|
|
<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>
|
|
<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>
|
|
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>
|
|
<span style="font-weight:bold">font-family</span>: <span style="color:#f44f4f">"Icon Font"</span>
|
|
<span style="font-weight:bold">content</span>: <span style="color:#27aeae">$glyph</span>
|
|
|
|
<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)
|
|
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<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>)
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae">$prefixes-by-browser</span>
|
|
<span style="color:#7a7c7d">// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#3f8058">&</span> <span style="color:#7a7c7d">// null</span>
|
|
<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>)
|
|
|
|
h3
|
|
<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>
|
|
|
|
<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>)
|
|
|
|
h3
|
|
<span style="font-weight:bold">font</span>:
|
|
<span style="font-weight:bold">size</span>: <span style="color:#f67400">18</span><span style="color:#2980b9">px</span>
|
|
<span style="font-weight:bold">weight</span>: <span style="color:#f67400">bold</span>
|
|
<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>
|
|
|
|
copy of $list with all elements for which $condition returns `true`
|
|
<span style="color:#7a7c7d">/// removed.</span>
|
|
<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><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27aeae">$new-list</span>: ()
|
|
<span style="color:#27aeae">$separator</span>: <span style="color:#8e44ad">list-separator(</span><span style="color:#27aeae">$list</span><span style="color:#8e44ad">)</span>
|
|
<span style="color:#27ae60">@each</span> <span style="color:#27aeae">$element</span> in <span style="color:#27aeae">$list</span>
|
|
<span style="color:#27ae60">@if</span> <span style="font-weight:bold">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>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@return</span> <span style="color:#27aeae">$new-list</span>
|
|
|
|
<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>
|
|
|
|
content
|
|
<span style="color:#27ae60">@function</span> <span style="color:#8e44ad">contains-helvetica(</span><span style="color:#27aeae">$string</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f44f4f">"Helvetica"</span> == Helvetica <span style="color:#7a7c7d">// true</span>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<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>)
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#7f8c8d">true</span> == <span style="color:#7f8c8d">true</span> <span style="color:#7a7c7d">// true</span>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae">$result</span> <span style="color:#7a7c7d">// 0.5</span>
|
|
|
|
<span style="color:#27ae60">@function</span> <span style="color:#8e44ad">fifteen-divided-by-thirty()</span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#8e44ad">fifteen-divided-by-thirty()</span> <span style="color:#7a7c7d">// 0.5</span>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<span style="color:#7a7c7d">// (read "pixel-degrees per second-em")</span>
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#27aeae">$degrees-per-second</span> <span style="color:#7a7c7d">// 20deg/s</span>
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#f67400">100</span> > <span style="color:#f67400">50</span> <span style="color:#7a7c7d">// true</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#3f8058">-</span> moz <span style="color:#7a7c7d">// -moz</span>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#7f8c8d">true</span> <span style="font-weight:bold">or</span> <span style="color:#7f8c8d">false</span> <span style="color:#7a7c7d">// true</span>
|
|
<span style="color:#27ae60">@debug</span> <span style="color:#7f8c8d">false</span> <span style="font-weight:bold">or</span> <span style="color:#7f8c8d">false</span> <span style="color:#7a7c7d">// false</span>
|
|
<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>
|
|
|
|
<span style="color:#27aeae">$primary</span>: <span style="color:#27aeae;font-weight:bold">#f2ece4</span>
|
|
<span style="color:#27aeae">$accent</span>: <span style="color:#27aeae;font-weight:bold">#e1d7d2</span>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<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>: <span style="color:#f67400">space</span>) <span style="color:#7a7c7d">// blue red green</span>
|
|
<span style="color:#27ae60">@mixin</span> <span style="color:#8e44ad">syntax-colors(</span><span style="color:#27aeae">$args</span><span style="color:#3f8058">...</span><span style="color:#8e44ad">)</span>
|
|
<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>
|
|
|
|
<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>
|
|
pre span<span style="color:#8e44ad">.stx-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">$color</span>
|
|
|
|
<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>;
|
|
|
|
<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>)
|
|
|
|
<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>
|
|
|
|
<span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">absolute</span>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$top-or-bottom</span><span style="color:#3f8058">}</span>: <span style="color:#f67400">0</span>
|
|
-<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>
|
|
<span style="color:#8e44ad">.icon-</span><span style="color:#3f8058">#{</span><span style="color:#27aeae">$name</span><span style="color:#3f8058">}</span>
|
|
<span style="font-weight:bold">position</span>: <span style="color:#f67400">absolute</span>
|
|
<span style="color:#3f8058">#{</span><span style="color:#27aeae">$top-or-bottom</span><span style="color:#3f8058">}</span>: <span style="color:#f67400">0</span>
|
|
-<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>
|
|
</pre></body></html>
|