70 lines
1.6 KiB
HTML
70 lines
1.6 KiB
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>
|
||
|
||
<h2>Known failures</h2>
|
||
<p>There are certain edge cases where Prism will fail.
|
||
There are always such cases in every regex-based syntax highlighter.
|
||
However, Prism dares to be open and honest about them.
|
||
If a failure is listed here, it doesn’t mean it will never be fixed. This is more of a “known bugs” list, just with a certain type of bug.
|
||
</p>
|
||
|
||
<h3>At-rules looking like variables</h3>
|
||
<pre><code>@import "some file.less";</code></pre>
|
||
|
||
<h3>At-rules containing interpolation</h3>
|
||
<pre><code>@import "@{themes}/tidal-wave.less";</code></pre>
|
||
|
||
<h3>extend is not highlighted consistently</h3>
|
||
<pre><code>nav ul {
|
||
&:extend(.inline);
|
||
background: blue;
|
||
}
|
||
.a:extend(.b) {}</code></pre> |