feat: add missing KF6 framework recipes
This commit is contained in:
+708
@@ -0,0 +1,708 @@
|
||||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<title>highlight.less</title>
|
||||
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (LESSCSS) - Theme (Breeze Dark)"/>
|
||||
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
|
||||
<span style="color:#7a7c7d">/**</span>
|
||||
<span style="color:#7a7c7d"> * Less syntax highlighting test file</span>
|
||||
<span style="color:#7a7c7d"> *</span>
|
||||
<span style="color:#7a7c7d"> * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)</span>
|
||||
<span style="color:#7a7c7d"> *</span>
|
||||
<span style="color:#7a7c7d"> * @see http://lesscss.org/features/</span>
|
||||
<span style="color:#7a7c7d"> */</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@color</span>; <span style="color:#27aeae">@padding</span>; <span style="color:#27aeae">@margin</span>: <span style="color:#f67400">2</span>) {
|
||||
<span style="font-style:italic">colorr</span>: <span style="color:#27aeae">@color</span>;
|
||||
padding-3<span style="color:#c45b00">:</span> <span style="color:#27ae60">@padding</span>;
|
||||
<span style="font-weight:bold">margin</span>: <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span>;
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@my-ruleset:</span> {
|
||||
<span style="color:#8e44ad">.my-selector</span> {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
};
|
||||
|
||||
<span style="color:#27aeae">@bacon:</span> <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
<span style="color:#27aeae">@beacon:</span> background-color;
|
||||
<span style="color:#27aeae">@baecon:</span> <span style="color:#27aeae">@{w}</span> + <span style="color:#27aeae">@w</span>;
|
||||
|
||||
<span style="color:#8e44ad">.noStar</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.class</span> <span style="color:#27ae60;font-weight:bold">#sh</span><span style="color:#c45b00">:extend</span>(<span style="color:#27ae60;font-weight:bold">#hhh</span>) ) {}
|
||||
<span style="color:#8e44ad">.noStar</span><span style="color:#c45b00">:nth-child</span>(w: <span style="color:#27aeae;font-weight:bold">red</span>) {}
|
||||
|
||||
<span style="color:#27ae60">@media</span> (<span style="font-weight:bold">max-width</span>: <span style="color:#27aeae">@width2</span>) <span style="color:#fdbc4b;font-weight:bold">and</span> handheld {
|
||||
<span style="font-weight:bold">height</span>: <span style="color:#7f8c8d">auto</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.test</span> <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@color</span> = <span style="color:#27aeae;font-weight:bold">blue</span>) <span style="color:#8e44ad">.ffff</span> {<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;}
|
||||
|
||||
<span style="color:#8e44ad">.foo</span> (<span style="color:#27aeae">@bg</span>: <span style="color:#27aeae;font-weight:bold">#f5f5f5</span>, <span style="color:#27aeae">@color</span>: <span style="color:#27aeae;font-weight:bold">#900</span>) {
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae">@bg</span>;
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@color</span>;
|
||||
|
||||
<span style="color:#8e44ad">.x</span> {
|
||||
<span style="font-style:italic">x</span>: <span style="color:#27aeae">@nn</span>;
|
||||
<span style="font-style:italic">a</span>: <span style="color:#27aeae;font-weight:bold">white</span> <span style="color:#27aeae">@{nn@{ww}}</span>;
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Variables</span>
|
||||
|
||||
<span style="color:#27aeae">@link-color:</span> <span style="color:#27aeae;font-weight:bold">#428bca</span>; <span style="color:#7a7c7d">// sea blue</span>
|
||||
<span style="color:#27aeae">@link-color-hover:</span> <span style="color:#7f8c8d">darken</span>(<span style="color:#27aeae">@link-color</span>, <span style="color:#f67400">10</span><span style="color:#2980b9">%</span>);
|
||||
|
||||
a, <span style="color:#8e44ad">.link</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@link-color</span>;
|
||||
}
|
||||
|
||||
a<span style="color:#c45b00">:hover</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@link-color-hover</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.widget</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">#fff</span>;
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae">@link-color</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Variable interpolation</span>
|
||||
|
||||
<span style="color:#27aeae">@my-selector:</span> banner;
|
||||
|
||||
<span style="color:#8e44ad">.</span><span style="color:#27aeae">@{my-selector}</span> <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@s</span> = <span style="color:#7f8c8d">calc</span>(<span style="color:#f44f4f">"s"</span>); <span style="color:#27aeae">@{s}</span> = <span style="color:#7f8c8d">calc</span>(<span style="color:#f44f4f">"dddd"</span>)) {
|
||||
<span style="font-weight:bold">font-weight</span>: <span style="color:#f67400">bold</span>;
|
||||
<span style="font-weight:bold">line-height</span>+: <span style="color:#f67400">40</span><span style="color:#2980b9">px</span>;
|
||||
<span style="font-weight:bold">margin</span>: <span style="color:#f67400">0</span> <span style="color:#7f8c8d">auto</span>;
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@images:</span> <span style="color:#f44f4f">"../img"</span>;
|
||||
|
||||
body {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">#444</span>;
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"</span><span style="color:#27aeae">@{images}</span><span style="color:#f44f4f">/white-sand.png"</span>);
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@themes:</span> <span style="color:#f44f4f">"../../src/themes"</span>;
|
||||
|
||||
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"</span><span style="color:#27aeae">@{themes}</span><span style="color:#f44f4f">/tidal-wave.less"</span>;
|
||||
|
||||
<span style="color:#27aeae">@property:</span> <span style="color:#f67400">color</span>;
|
||||
|
||||
<span style="color:#8e44ad">.widget</span> {
|
||||
<span style="color:#27aeae">@{property}</span>: <span style="color:#27aeae;font-weight:bold">#0ee</span>;
|
||||
<span style="font-style:italic">background-</span><span style="color:#27aeae">@{property}</span>: <span style="color:#27aeae;font-weight:bold">#999</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Variable names</span>
|
||||
|
||||
<span style="color:#27aeae">@fnord:</span> <span style="color:#f44f4f">"I am fnord."</span>;
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#f44f4f">"fnord"</span>;
|
||||
|
||||
<span style="color:#8e44ad">.variable-names-example</span> {
|
||||
<span style="font-weight:bold">content</span>: <span style="color:#27aeae">@@var</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Lazy Evaluation</span>
|
||||
|
||||
<span style="color:#8e44ad">.lazy-eval</span> {
|
||||
<span style="font-weight:bold">width</span>: <span style="color:#27aeae">@var</span>;
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#27aeae">@a</span>;
|
||||
<span style="color:#27aeae">@a:</span> <span style="color:#f67400">9</span><span style="color:#2980b9">%</span>;
|
||||
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#f67400">0</span>;
|
||||
<span style="color:#8e44ad">.class</span> {
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#f67400">1</span>;
|
||||
<span style="color:#8e44ad">.brass</span> {
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#f67400">2</span>;
|
||||
<span style="font-style:italic">three</span>: <span style="color:#27aeae">@var</span>;
|
||||
<span style="color:#27aeae">@var:</span> <span style="color:#f67400">3</span>;
|
||||
}
|
||||
<span style="font-style:italic">one</span>: <span style="color:#27aeae">@var</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Default Variables</span>
|
||||
|
||||
<span style="color:#27aeae">@base-color:</span> <span style="color:#27aeae;font-weight:bold">green</span>;
|
||||
<span style="color:#27aeae">@dark-color:</span> <span style="color:#7f8c8d">darken</span>(<span style="color:#27aeae">@base-color</span>, <span style="color:#f67400">10</span><span style="color:#2980b9">%</span>);
|
||||
|
||||
<span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"library.less"</span>;
|
||||
<span style="color:#27aeae">@base-color:</span> <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
|
||||
<span style="color:#7a7c7d">// Extend</span>
|
||||
|
||||
nav ul {
|
||||
&<span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.inline</span>);
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.inline</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Extend Syntax</span>
|
||||
|
||||
<span style="color:#8e44ad">.e</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.f</span>) {}
|
||||
<span style="color:#8e44ad">.e</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.g</span>) {}
|
||||
|
||||
<span style="color:#8e44ad">.e</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.f</span>, <span style="color:#8e44ad">.g</span>) {}
|
||||
|
||||
<span style="color:#7a7c7d">// Extend Attached to Selector</span>
|
||||
|
||||
<span style="color:#8e44ad">.big-division</span>,
|
||||
<span style="color:#8e44ad">.big-bag</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.bag</span>),
|
||||
<span style="color:#8e44ad">.big-bucket</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.bucket</span>) {
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Extend Inside Ruleset</span>
|
||||
|
||||
pre<span style="color:#c45b00">:hover</span>,
|
||||
<span style="color:#8e44ad">.some-class</span> {
|
||||
&<span style="color:#c45b00">:extend</span>(div pre);
|
||||
}
|
||||
|
||||
pre<span style="color:#c45b00">:hover:extend</span>(div pre),
|
||||
<span style="color:#8e44ad">.some-class</span><span style="color:#c45b00">:extend</span>(div pre) {}
|
||||
|
||||
<span style="color:#7a7c7d">// Extending Nested Selectors</span>
|
||||
|
||||
<span style="color:#8e44ad">.bucket</span> {
|
||||
tr {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
}
|
||||
<span style="color:#8e44ad">.some-class</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.bucket</span> tr) {}
|
||||
|
||||
<span style="color:#7a7c7d">// Exact Matching with Extend</span>
|
||||
|
||||
*<span style="color:#8e44ad">.class</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.noStar</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.class</span>) {}
|
||||
|
||||
link<span style="color:#c45b00">:hover:visited</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.selector</span><span style="color:#c45b00">:extend</span>(link<span style="color:#c45b00">:visited:hover</span>) {}
|
||||
|
||||
<span style="color:#7a7c7d">// nth Expression</span>
|
||||
|
||||
<span style="color:#c45b00">:nth-child</span>(<span style="color:#f67400">1</span>n<span style="color:#f67400">+3</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.child</span><span style="color:#c45b00">:extend</span>(<span style="color:#c45b00">:nth-child</span>(n+3)) {}
|
||||
|
||||
<span style="color:#0099ff;font-weight:bold">[title=identifier]</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#0099ff;font-weight:bold">[title=</span><span style="color:#f44f4f">'identifier'</span><span style="color:#0099ff;font-weight:bold">]</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#0099ff;font-weight:bold">[title=</span><span style="color:#f44f4f">"identifier"</span><span style="color:#0099ff;font-weight:bold">]</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.noQuote</span><span style="color:#c45b00">:extend</span>(<span style="color:#0099ff;font-weight:bold">[title=identifier]</span>) {}
|
||||
<span style="color:#8e44ad">.singleQuote</span><span style="color:#c45b00">:extend</span>(<span style="color:#0099ff;font-weight:bold">[title=</span><span style="color:#f44f4f">'identifier'</span><span style="color:#0099ff;font-weight:bold">]</span>) {}
|
||||
<span style="color:#8e44ad">.doubleQuote</span><span style="color:#c45b00">:extend</span>(<span style="color:#0099ff;font-weight:bold">[title=</span><span style="color:#f44f4f">"identifier"</span><span style="color:#0099ff;font-weight:bold">]</span>) {}
|
||||
|
||||
<span style="color:#7a7c7d">// Extend "all"</span>
|
||||
|
||||
<span style="color:#8e44ad">.a.b.test</span>,
|
||||
<span style="color:#8e44ad">.test.c</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">orange</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.test</span> {
|
||||
&<span style="color:#c45b00">:hover</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.replacement</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.test</span> all) {}
|
||||
|
||||
<span style="color:#7a7c7d">// Selector Interpolation with Extend</span>
|
||||
|
||||
<span style="color:#8e44ad">.bucket</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
<span style="color:#27aeae">@{variable}</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.bucket</span>) {}
|
||||
<span style="color:#27aeae">@variable:</span> <span style="color:#f67400">.</span>selector;
|
||||
|
||||
<span style="color:#7a7c7d">// Scoping / Extend Inside @media</span>
|
||||
|
||||
<span style="color:#27ae60">@media</span> <span style="color:#f67400">print</span> {
|
||||
<span style="color:#8e44ad">.screenClass</span><span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.selector</span>) {}
|
||||
<span style="color:#8e44ad">.selector</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
}
|
||||
<span style="color:#8e44ad">.selector</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
<span style="color:#27ae60">@media</span> <span style="color:#f67400">screen</span> {
|
||||
<span style="color:#8e44ad">.selector</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Use Cases for Extend</span>
|
||||
|
||||
<span style="color:#8e44ad">.animal</span> {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">white</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.bear</span> {
|
||||
&<span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.animal</span>);
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">brown</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.my-inline-block</span> {
|
||||
<span style="font-weight:bold">display</span>: <span style="color:#f67400">inline-block</span>;
|
||||
<span style="font-weight:bold">font-size</span>: <span style="color:#f67400">0</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.thing1</span> {
|
||||
&<span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.my-inline-block</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.thing2</span> {
|
||||
&<span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.my-inline-block</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Mixins</span>
|
||||
|
||||
<span style="color:#8e44ad">.a</span>, <span style="color:#27ae60;font-weight:bold">#b</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin-class</span> {
|
||||
<span style="color:#8e44ad">.a</span>();
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin-id</span> {
|
||||
<span style="color:#27ae60;font-weight:bold">#b</span>();
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Not Outputting the Mixin</span>
|
||||
|
||||
<span style="color:#8e44ad">.my-mixin</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.my-other-mixin</span>() {
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae;font-weight:bold">white</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.class</span> {
|
||||
<span style="color:#8e44ad">.my-mixin</span>;
|
||||
<span style="color:#8e44ad">.my-other-mixin</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Selectors in Mixins</span>
|
||||
|
||||
<span style="color:#8e44ad">.my-hover-mixin</span>() {
|
||||
&<span style="color:#c45b00">:hover</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">red</span>;
|
||||
}
|
||||
}
|
||||
button {
|
||||
<span style="color:#8e44ad">.my-hover-mixin</span>();
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Namespaces</span>
|
||||
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> {
|
||||
<span style="color:#8e44ad">.inner</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.c</span> {
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> > <span style="color:#8e44ad">.inner</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.d</span> {
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> > <span style="color:#8e44ad">.inner</span>;
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> > <span style="color:#8e44ad">.inner</span>();
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> <span style="color:#8e44ad">.inner</span>;
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span> <span style="color:#8e44ad">.inner</span>();
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span><span style="color:#8e44ad">.inner</span>;
|
||||
<span style="color:#27ae60;font-weight:bold">#outer</span><span style="color:#8e44ad">.inner</span>();
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Guarded Namespaces</span>
|
||||
|
||||
<span style="color:#27ae60;font-weight:bold">#namespace</span> <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@mode</span>=huge) {
|
||||
<span style="color:#8e44ad">.mixin</span>() { <span style="color:#7a7c7d">/* */</span> }
|
||||
}
|
||||
|
||||
<span style="color:#27ae60;font-weight:bold">#namespace</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>() <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@mode</span>=huge) { <span style="color:#7a7c7d">/* */</span> }
|
||||
}
|
||||
|
||||
<span style="color:#27ae60;font-weight:bold">#sp_1</span> <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">default</span>()) {
|
||||
<span style="color:#27ae60;font-weight:bold">#sp_2</span> <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">default</span>()) {
|
||||
<span style="color:#8e44ad">.mixin</span>() <span style="color:#fdbc4b;font-weight:bold">when not</span>(<span style="color:#7f8c8d">default</span>()) { <span style="color:#7a7c7d">/* */</span> }
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// The !important keyword</span>
|
||||
|
||||
<span style="color:#8e44ad">.foo</span> (<span style="color:#27aeae">@bg</span>: <span style="color:#27aeae;font-weight:bold">#f5f5f5</span>, <span style="color:#27aeae">@color</span>: <span style="color:#27aeae;font-weight:bold">#900</span>) {
|
||||
<span style="font-weight:bold">background</span>: <span style="color:#27aeae">@bg</span>;
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@color</span> <span style="color:#2980b9">!important</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.unimportant</span> {
|
||||
<span style="color:#8e44ad">.foo</span>();
|
||||
}
|
||||
<span style="color:#8e44ad">.important</span> {
|
||||
<span style="color:#8e44ad">.foo</span>() <span style="color:#2980b9">!important</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Parametric Mixins</span>
|
||||
|
||||
<span style="color:#8e44ad">.border-radius</span>(<span style="color:#27aeae">@radius</span>) {
|
||||
<span style="font-weight:bold;font-style:italic">-webkit-border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
<span style="font-weight:bold;font-style:italic">-moz-border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
<span style="font-weight:bold">border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
}
|
||||
|
||||
<span style="color:#27ae60;font-weight:bold">#header</span> {
|
||||
<span style="color:#8e44ad">.border-radius</span>(<span style="color:#f67400">4</span><span style="color:#2980b9">px</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.button</span> {
|
||||
<span style="color:#8e44ad">.border-radius</span>(<span style="color:#f67400">6</span><span style="color:#2980b9">px</span>);
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.border-radius</span>(<span style="color:#27aeae">@radius</span>: <span style="color:#f67400">5</span><span style="color:#2980b9">px</span>) {
|
||||
<span style="font-weight:bold;font-style:italic">-webkit-border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
<span style="font-weight:bold;font-style:italic">-moz-border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
<span style="font-weight:bold">border-radius</span>: <span style="color:#27aeae">@radius</span>;
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.wrap</span>() {
|
||||
<span style="font-style:italic">text-wrap</span>: <span style="color:#f67400">wrap</span>;
|
||||
<span style="font-weight:bold">white-space</span>: -moz-pre-wrap;
|
||||
<span style="font-weight:bold">white-space</span>: <span style="color:#f67400">pre-wrap</span>;
|
||||
<span style="font-style:italic">word-wrap</span>: <span style="color:#f67400">break-word</span>;
|
||||
}
|
||||
|
||||
pre { <span style="color:#8e44ad">.wrap</span> }
|
||||
|
||||
<span style="color:#7a7c7d">// Mixins with Multiple Parameters</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@color</span>) {
|
||||
color-1<span style="color:#c45b00">:</span> <span style="color:#27ae60">@color</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@color</span>; <span style="color:#27aeae">@padding</span>: <span style="color:#f67400">2</span>) {
|
||||
color-2<span style="color:#c45b00">:</span> <span style="color:#27ae60">@color</span>;
|
||||
padding-2<span style="color:#c45b00">:</span> <span style="color:#27ae60">@padding</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@color</span>; <span style="color:#27aeae">@padding</span>; <span style="color:#27aeae">@margin</span>: <span style="color:#f67400">2</span>) {
|
||||
color-3<span style="color:#c45b00">:</span> <span style="color:#27ae60">@color</span>;
|
||||
padding-3<span style="color:#c45b00">:</span> <span style="color:#27ae60">@padding</span>;
|
||||
<span style="font-weight:bold">margin</span>: <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span> <span style="color:#27aeae">@margin</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.some</span> <span style="color:#8e44ad">.selector</span> div {
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae;font-weight:bold">#008000</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Named parameters</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@color</span>: <span style="color:#27aeae;font-weight:bold">black</span>; <span style="color:#27aeae">@margin</span>: <span style="color:#f67400">10</span><span style="color:#2980b9">px</span>; <span style="color:#27aeae">@padding</span>: <span style="color:#f67400">20</span><span style="color:#2980b9">px</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@color</span>;
|
||||
<span style="font-weight:bold">margin</span>: <span style="color:#27aeae">@margin</span>;
|
||||
<span style="font-weight:bold">padding</span>: <span style="color:#27aeae">@padding</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.class1</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@margin</span>: <span style="color:#f67400">20</span><span style="color:#2980b9">px</span>; <span style="color:#27aeae">@color</span>: <span style="color:#27aeae;font-weight:bold">#33acfe</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.class2</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae;font-weight:bold">#efca44</span>; <span style="color:#27aeae">@padding</span>: <span style="color:#f67400">40</span><span style="color:#2980b9">px</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// The @arguments Variable</span>
|
||||
|
||||
<span style="color:#8e44ad">.box-shadow</span>(<span style="color:#27aeae">@x</span>: <span style="color:#f67400">0</span>; <span style="color:#27aeae">@y</span>: <span style="color:#f67400">0</span>; <span style="color:#27aeae">@blur</span>: <span style="color:#f67400">1</span><span style="color:#2980b9">px</span>; <span style="color:#27aeae">@color</span>: <span style="color:#27aeae;font-weight:bold">#000</span>) {
|
||||
<span style="font-weight:bold;font-style:italic">-webkit-box-shadow</span>: <span style="color:#27aeae">@arguments</span>;
|
||||
<span style="font-weight:bold;font-style:italic">-moz-box-shadow</span>: <span style="color:#27aeae">@arguments</span>;
|
||||
<span style="font-weight:bold">box-shadow</span>: <span style="color:#27aeae">@arguments</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.big-block</span> {
|
||||
<span style="color:#8e44ad">.box-shadow</span>(<span style="color:#f67400">2</span><span style="color:#2980b9">px</span>; <span style="color:#f67400">5</span><span style="color:#2980b9">px</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Advanced Arguments and the @rest Variable</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#f67400">...</span>) {} <span style="color:#7a7c7d">// matches 0-N arguments</span>
|
||||
<span style="color:#8e44ad">.mixin</span>() {} <span style="color:#7a7c7d">// matches exactly 0 arguments</span>
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@a</span>: <span style="color:#f67400">1</span>) {} <span style="color:#7a7c7d">// matches 0-1 arguments</span>
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@a</span>: <span style="color:#f67400">1</span>; <span style="color:#f67400">...</span>) {} <span style="color:#7a7c7d">// matches 0-N arguments</span>
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@a</span>; <span style="color:#f67400">...</span>) {} <span style="color:#7a7c7d">// matches 1-N arguments</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@a</span>; <span style="color:#27aeae">@rest</span><span style="color:#f67400">...</span>) {
|
||||
<span style="color:#7a7c7d">// @rest is bound to arguments after @a</span>
|
||||
<span style="color:#7a7c7d">// @arguments is bound to all arguments</span>
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Pattern-matching</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@s</span>; <span style="color:#27aeae">@color</span>) { <span style="color:#8e44ad">...</span> }
|
||||
|
||||
<span style="color:#8e44ad">.class</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@switch</span>; <span style="color:#27aeae;font-weight:bold">#888</span>);
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#f67400">dark</span>; <span style="color:#27aeae">@color</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#7f8c8d">darken</span>(<span style="color:#27aeae">@color</span>, <span style="color:#f67400">10</span><span style="color:#2980b9">%</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#f67400">light</span>; <span style="color:#27aeae">@color</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#7f8c8d">lighten</span>(<span style="color:#27aeae">@color</span>, <span style="color:#f67400">10</span><span style="color:#2980b9">%</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@_</span>; <span style="color:#27aeae">@color</span>) {
|
||||
<span style="font-weight:bold">display</span>: <span style="color:#f67400">block</span>;
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@switch:</span> <span style="color:#f67400">light</span>;
|
||||
|
||||
<span style="color:#8e44ad">.class</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>(<span style="color:#27aeae">@switch</span>; <span style="color:#27aeae;font-weight:bold">#888</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Mixins as Functions</span>
|
||||
|
||||
<span style="color:#8e44ad">.average</span>(<span style="color:#27aeae">@x</span>, <span style="color:#27aeae">@y</span>) {
|
||||
<span style="color:#27aeae">@average:</span> ((<span style="color:#27aeae">@x</span> + <span style="color:#27aeae">@y</span>) / <span style="color:#f67400">2</span>);
|
||||
}
|
||||
|
||||
div {
|
||||
<span style="color:#8e44ad">.average</span>(<span style="color:#f67400">16</span><span style="color:#2980b9">px</span>, <span style="color:#f67400">50</span><span style="color:#2980b9">px</span>); <span style="color:#7a7c7d">// "call" the mixin</span>
|
||||
<span style="font-weight:bold">padding</span>: <span style="color:#27aeae">@average</span>; <span style="color:#7a7c7d">// use its "return" value</span>
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Passing Rulesets to Mixins</span>
|
||||
|
||||
<span style="color:#7a7c7d">// declare detached ruleset</span>
|
||||
<span style="color:#27aeae">@detached-ruleset:</span> { <span style="font-weight:bold">background</span>: <span style="color:#27aeae;font-weight:bold">red</span>; };
|
||||
|
||||
<span style="color:#7a7c7d">// use detached ruleset</span>
|
||||
<span style="color:#8e44ad">.top</span> {
|
||||
<span style="color:#27ae60">@detached-ruleset</span>();
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.desktop-and-old-ie</span>(<span style="color:#27aeae">@rules</span>) {
|
||||
<span style="color:#27ae60">@media</span> <span style="color:#f67400">screen</span> <span style="color:#fdbc4b;font-weight:bold">and</span> (<span style="font-weight:bold">min-width</span>: <span style="color:#f67400">1200</span><span style="color:#2980b9">px</span>) { <span style="color:#27ae60">@rules</span>(); }
|
||||
html<span style="color:#8e44ad">.lt-ie9</span> & { <span style="color:#27ae60">@rules</span>(); }
|
||||
}
|
||||
|
||||
header {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
|
||||
<span style="color:#8e44ad">.desktop-and-old-ie</span>({
|
||||
background-color: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
});
|
||||
}
|
||||
|
||||
<span style="color:#27aeae">@my-ruleset:</span> {
|
||||
<span style="color:#8e44ad">.my-selector</span> {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
};
|
||||
|
||||
<span style="color:#27aeae">@my-ruleset:</span> {
|
||||
<span style="color:#8e44ad">.my-selector</span> {
|
||||
<span style="color:#27ae60">@media</span> tv {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
}
|
||||
};
|
||||
<span style="color:#27ae60">@media</span> (<span style="font-weight:bold">orientation</span>:<span style="color:#f67400">portrait</span>) {
|
||||
<span style="color:#27ae60">@my-ruleset</span>();
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Scoping</span>
|
||||
|
||||
<span style="color:#27aeae">@detached-ruleset:</span> {
|
||||
<span style="font-style:italic">caller-variable</span>: <span style="color:#27aeae">@caller-variable</span>; <span style="color:#7a7c7d">// variable is undefined here</span>
|
||||
<span style="color:#8e44ad">.caller-mixin</span>(); <span style="color:#7a7c7d">// mixin is undefined here</span>
|
||||
};
|
||||
|
||||
selector {
|
||||
<span style="color:#7a7c7d">// use detached ruleset</span>
|
||||
<span style="color:#27ae60">@detached-ruleset</span>();
|
||||
|
||||
<span style="color:#7a7c7d">// define variable and mixin needed inside the detached ruleset</span>
|
||||
<span style="color:#27aeae">@caller-variable:</span> value;
|
||||
<span style="color:#8e44ad">.caller-mixin</span>() {
|
||||
<span style="font-style:italic">variable</span>: declaration;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">/*</span>
|
||||
<span style="color:#7a7c7d"> * reference: use a Less file but do not output it</span>
|
||||
<span style="color:#7a7c7d">inline: include the source file in the output but do not process it</span>
|
||||
<span style="color:#7a7c7d">less: treat the file as a Less file, no matter what the file extension</span>
|
||||
<span style="color:#7a7c7d">css: treat the file as a CSS file, no matter what the file extension</span>
|
||||
<span style="color:#7a7c7d">once: only include the file once (this is default behavior)</span>
|
||||
<span style="color:#7a7c7d">multiple: include the file multiple times</span>
|
||||
<span style="color:#7a7c7d">optional: continue compiling when file is not found</span>
|
||||
<span style="color:#7a7c7d"> */</span>
|
||||
|
||||
<span style="color:#27ae60">@import</span> (<span style="color:#f67400">optional</span>, reference) <span style="color:#f44f4f">"foo.less"</span>;
|
||||
|
||||
<span style="color:#7a7c7d">// Mixin Guards</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">lightness</span>(<span style="color:#27aeae">@a</span>) >= <span style="color:#f67400">50</span><span style="color:#2980b9">%</span>) {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">lightness</span>(<span style="color:#27aeae">@a</span>) < <span style="color:#f67400">50</span><span style="color:#2980b9">%</span>) {
|
||||
<span style="font-weight:bold">background-color</span>: <span style="color:#27aeae;font-weight:bold">white</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae">@a</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Guard Comparison Operators</span>
|
||||
|
||||
<span style="color:#8e44ad">.truth</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@a</span>) { }
|
||||
<span style="color:#8e44ad">.truth</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@a</span> = <span style="color:#f67400">true</span>) { }
|
||||
|
||||
<span style="color:#7a7c7d">// </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">FIXME</span><span style="color:#7a7c7d">: @media as variable</span>
|
||||
<span style="color:#27aeae">@media:</span> mobile;
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@media</span> = mobile) { }
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@media</span> = desktop) { }
|
||||
|
||||
<span style="color:#8e44ad">.max</span> (<span style="color:#27aeae">@a</span>; <span style="color:#27aeae">@b</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@a</span> > <span style="color:#27aeae">@b</span>) { <span style="font-weight:bold">width</span>: <span style="color:#27aeae">@a</span> }
|
||||
<span style="color:#8e44ad">.max</span> (<span style="color:#27aeae">@a</span>; <span style="color:#27aeae">@b</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@a</span> < <span style="color:#27aeae">@b</span>) { <span style="font-weight:bold">width</span>: <span style="color:#27aeae">@b</span> }
|
||||
|
||||
<span style="color:#7a7c7d">// Guard Logical Operators</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">isnumber</span>(<span style="color:#27aeae">@a</span>)) and (<span style="color:#27aeae">@a</span> > <span style="color:#f67400">0</span>) { }
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@a</span> > <span style="color:#f67400">10</span>), (<span style="color:#27aeae">@a</span> < <span style="color:#f67400">-10</span>) { }
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@b</span>) <span style="color:#fdbc4b;font-weight:bold">when not</span> (<span style="color:#27aeae">@b</span> > <span style="color:#f67400">0</span>) { }
|
||||
|
||||
<span style="color:#7a7c7d">// Type Checking Functions</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>; <span style="color:#27aeae">@b</span>: <span style="color:#f67400">0</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">isnumber</span>(<span style="color:#27aeae">@b</span>)) { }
|
||||
<span style="color:#8e44ad">.mixin</span> (<span style="color:#27aeae">@a</span>; <span style="color:#27aeae">@b</span>: <span style="color:#27aeae;font-weight:bold">black</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#7f8c8d">iscolor</span>(<span style="color:#27aeae">@b</span>)) {}
|
||||
|
||||
button <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@my-option</span> = <span style="color:#f67400">true</span>) {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">white</span>;
|
||||
|
||||
& <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@my-option</span> = <span style="color:#f67400">true</span>) {
|
||||
button {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">white</span>;
|
||||
}
|
||||
a {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Loops</span>
|
||||
|
||||
<span style="color:#8e44ad">.loop</span>(<span style="color:#27aeae">@counter</span>) <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@counter</span> > <span style="color:#f67400">0</span>) {
|
||||
<span style="color:#8e44ad">.loop</span>((<span style="color:#27aeae">@counter</span> - <span style="color:#f67400">1</span>)); <span style="color:#7a7c7d">// next iteration</span>
|
||||
<span style="font-weight:bold">width</span>: (<span style="color:#f67400">10</span><span style="color:#2980b9">px</span> * <span style="color:#27aeae">@counter</span>); <span style="color:#7a7c7d">// code for each iteration</span>
|
||||
}
|
||||
|
||||
div {
|
||||
<span style="color:#8e44ad">.loop</span>(<span style="color:#f67400">5</span>); <span style="color:#7a7c7d">// launch the loop</span>
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Merge</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>() {
|
||||
<span style="font-weight:bold">box-shadow</span>+: <span style="color:#f67400">inset</span> <span style="color:#f67400">0</span> <span style="color:#f67400">0</span> <span style="color:#f67400">10</span><span style="color:#2980b9">px</span> <span style="color:#27aeae;font-weight:bold">#555</span>;
|
||||
}
|
||||
<span style="color:#8e44ad">.myclass</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>();
|
||||
<span style="font-weight:bold">box-shadow</span>+: <span style="color:#f67400">0</span> <span style="color:#f67400">0</span> <span style="color:#f67400">20</span><span style="color:#2980b9">px</span> <span style="color:#27aeae;font-weight:bold">black</span>;
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Space</span>
|
||||
|
||||
<span style="color:#8e44ad">.mixin</span>() {
|
||||
<span style="font-weight:bold">transform</span>+_: <span style="color:#7f8c8d">scale</span>(<span style="color:#f67400">2</span>);
|
||||
}
|
||||
<span style="color:#8e44ad">.myclass</span> {
|
||||
<span style="color:#8e44ad">.mixin</span>();
|
||||
<span style="font-weight:bold">transform</span>+_: <span style="color:#7f8c8d">rotate</span>(<span style="color:#f67400">15</span><span style="color:#2980b9">deg</span>);
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Parent Selectors</span>
|
||||
|
||||
a {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
&<span style="color:#c45b00">:hover</span> {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.button</span> {
|
||||
&-ok {
|
||||
<span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"ok.png"</span>);
|
||||
}
|
||||
&-cancel {
|
||||
<span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"cancel.png"</span>);
|
||||
}
|
||||
|
||||
&-custom {
|
||||
<span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"custom.png"</span>);
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.link</span> {
|
||||
& + & {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
|
||||
& & {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>;
|
||||
}
|
||||
|
||||
&& {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
|
||||
&, &ish {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">cyan</span>;
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#8e44ad">.grand</span> {
|
||||
<span style="color:#8e44ad">.parent</span> {
|
||||
& > & {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>;
|
||||
}
|
||||
|
||||
& & {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>;
|
||||
}
|
||||
|
||||
&& {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>;
|
||||
}
|
||||
|
||||
&, &ish {
|
||||
<span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">cyan</span>;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Changing Selector Order</span>
|
||||
|
||||
<span style="color:#8e44ad">.header</span> {
|
||||
<span style="color:#8e44ad">.menu</span> {
|
||||
<span style="font-weight:bold">border-radius</span>: <span style="color:#f67400">5</span><span style="color:#2980b9">px</span>;
|
||||
<span style="color:#8e44ad">.no-borderradius</span> & {
|
||||
<span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">'images/button-background.png'</span>);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<span style="color:#7a7c7d">// Combinatorial Explosion</span>
|
||||
|
||||
p, a, ul, li {
|
||||
<span style="font-weight:bold">border-top</span>: <span style="color:#f67400">2</span><span style="color:#2980b9">px</span> <span style="color:#f67400">dotted</span> <span style="color:#27aeae;font-weight:bold">#366</span>;
|
||||
& + & {
|
||||
<span style="font-weight:bold">border-top</span>: <span style="color:#f67400">0</span>;
|
||||
}
|
||||
}
|
||||
</pre></body></html>
|
||||
Reference in New Issue
Block a user