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