51 lines
911 B
HTML
51 lines
911 B
HTML
<h2>Comments</h2>
|
|
<pre><code>// Single line comment
|
|
/* Multi-line
|
|
comment */</code></pre>
|
|
|
|
<h2>Variables</h2>
|
|
<pre><code>@nice-blue: #5B83AD;
|
|
@light-blue: @nice-blue + #111;</code></pre>
|
|
|
|
<h2>At-rules</h2>
|
|
<pre><code>@media screen and (min-width: 320px) {}</code></pre>
|
|
|
|
<h2>Mixins</h2>
|
|
<pre><code>.bordered {
|
|
border-top: dotted 1px black;
|
|
border-bottom: solid 2px black;
|
|
}
|
|
#menu a {
|
|
.bordered;
|
|
}
|
|
#header a {
|
|
color: orange;
|
|
#bundle > .button;
|
|
}</code></pre>
|
|
|
|
<h2>Mixins with parameters</h2>
|
|
<pre><code>.foo (@bg: #f5f5f5, @color: #900) {
|
|
background: @bg;
|
|
color: @color;
|
|
}
|
|
.bar {
|
|
.foo();
|
|
}
|
|
.class1 {
|
|
.mixin(@margin: 20px; @color: #33acfe);
|
|
}
|
|
.class2 {
|
|
.mixin(#efca44; @padding: 40px);
|
|
}</code></pre>
|
|
|
|
<h2>Interpolation</h2>
|
|
<pre><code>@mySelector: banner;
|
|
.@{mySelector} {
|
|
font-weight: bold;
|
|
}
|
|
@property: color;
|
|
.widget {
|
|
@{property}: #0ee;
|
|
background-@{property}: #999;
|
|
}</code></pre>
|