Differential D14603 Diff 39067 autotests/html/review128925-2.scss.html

Changeset View

Standalone View

View Options

autotests/html/review128925-2.scss.html

Show All 23 Lines
24<span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> DEBUG</span> 24​<span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> DEBUG</span>
25<span style="color:#898887;"> * body {</span> 25​<span style="color:#898887;"> * body {</span>
26<span style="color:#898887;"> * margin: 0 !important;</span> 26​<span style="color:#898887;"> * margin: 0 !important;</span>
27<span style="color:#898887;"> * }</span> 27​<span style="color:#898887;"> * }</span>
28<span style="color:#898887;"> */</span> 28​<span style="color:#898887;"> */</span>
29 29​
30<span style="color:#898887;">// Comments in special positions</span> 30​<span style="color:#898887;">// Comments in special positions</span>
31 31​
32<span style="color:#0057ae;">$color</span>: <span style="color:#b08000;">black</span> <span style="color:#898887;">/* comment here */</span>; 32​<span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">black</span> <span style="color:#898887;">/* comment here */</span>;
33 33​
34header<span style="color:#898887;">/* comment here */</span><span style="color:#644a9b;">.active</span> <span style="color:#898887;">/* comment here */</span> { 34​header<span style="color:#898887;">/* comment here */</span><span style="color:#644a9b;">.active</span> <span style="color:#898887;">/* comment here */</span> {
35 <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#898887;">/* comment here */</span> <span style="color:#b08000;">blue</span><span style="color:#898887;">/* comment here */</span>; 35​ <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#898887;">/* comment here */</span> <span style="color:#aa5500;">blue</span><span style="color:#898887;">/* comment here */</span>;
36 <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#898887;">/* comment here */</span>, 36​ <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#898887;">/* comment here */</span>,
37 <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#898887;">/* comment here */</span> 37​ <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#898887;">/* comment here */</span>
38 <span style="color:#b08000;">sans-serif</span><span style="color:#898887;">/* comment here */</span>; 38​ <span style="color:#b08000;">sans-serif</span><span style="color:#898887;">/* comment here */</span>;
39} 39​}
40 40​
41<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="color:#898887;">/* comment here */</span> and (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300px</span> <span style="color:#898887;">/* comment here */</span>) <span style="color:#898887;">/* comment here */</span> {<span style="color:#898887;">/* comment here */</span>} 41​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#898887;">/* comment here */</span>) <span style="color:#898887;">/* comment here */</span> {<span style="color:#898887;">/* comment here */</span>}
42 42​
43 43​
44<span style="color:#898887;">// Strings with special content</span> 44​<span style="color:#898887;">// Strings with special content</span>
45 45​
46<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;{} $variable /* comment */&quot;</span>; 46​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;{} $variable /* comment */&quot;</span>;
47<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;{}&quot;</span>; 47​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;{}&quot;</span>;
48 48​
49<span style="color:#898887;">// Without extra breaklines and spaces</span> 49​<span style="color:#898887;">// Without extra breaklines and spaces</span>
50 50​
51pre<span style="color:#644a9b;">.primary</span><span style="color:#b08000;font-style:italic;">:hover</span><span style="color:#644a9b;">.large</span><span style="color:#b08000;font-style:italic;">:nth-child</span>(2n-1){<span style="font-weight:bold;">font-size</span>:<span style="color:#0057ae;">$default-font-size</span>;<span style="font-weight:bold;">font-family</span>:<span style="color:#bf0303;">&quot;Noto Sans&quot;</span>;<span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#b08000;">1px</span> <span style="color:#b08000;">1px</span> <span style="color:#b08000;">3px</span> <span style="color:#644a9b;font-weight:bold;">rgba</span>(<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0.3</span>)} 51​pre<span style="color:#644a9b;">.primary</span><span style="color:#b08000;font-style:italic;">:hover</span><span style="color:#644a9b;">.large</span><span style="color:#b08000;font-style:italic;">:nth-child(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#0057ae;">$default-font-size</span>;<span style="font-weight:bold;">font-family</span>:<span style="color:#bf0303;">&quot;Noto Sans&quot;</span>;<span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span>}
52 52​
53<span style="color:#898887;">// With unnecessary breaklines and spaces</span> 53​<span style="color:#898887;">// With unnecessary breaklines and spaces</span>
54 54​
55blockquote <span style="color:#644a9b;">.ref</span> 55​blockquote <span style="color:#644a9b;">.ref</span>
56 { 56​ {
57 <span style="font-weight:bold;">flex</span> : <span style="color:#b08000;">0</span> <span style="color:#b08000;">1</span> <span style="color:#b08000;">30%</span>; 57​ <span style="font-weight:bold;">flex</span> : <span style="color:#b08000;">0</span> <span style="color:#b08000;">1</span> <span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>;
58 <span style="font-weight:bold;">flex-wrap</span> : wrap; 58​ <span style="font-weight:bold;">flex-wrap</span> : wrap;
59 } 59​ }
60 60​
61<span style="color:#644a9b;">.sidebar</span> { 61​<span style="color:#644a9b;">.sidebar</span> {
62 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300px</span>; } 62​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>; }
63 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> and (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) { 63​ <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) {
64 <span style="color:#644a9b;">.sidebar</span> { 64​ <span style="color:#644a9b;">.sidebar</span> {
65 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500px</span>; } } 65​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>; } }
66 66​
67<span style="color:#898887;">// Variable interpolation: #{}</span> 67​<span style="color:#898887;">// Variable interpolation: #{}</span>
68 68​
69<span style="color:#0057ae;">$name</span>: foo; 69​<span style="color:#0057ae;">$name</span>: foo;
70<span style="color:#0057ae;">$attr</span>: border; 70​<span style="color:#0057ae;">$attr</span>: border;
71p<span style="color:#644a9b;">.</span><span style="color:#0057ae;">#{$name}</span> { 71​p<span style="color:#644a9b;">.</span><span style="color:#0057ae;">#{$name}</span> {
72 <span style="color:#0057ae;">#{$attr}</span>-color: <span style="color:#b08000;">blue</span>; 72​ <span style="color:#0057ae;">#{$attr}</span>-color: <span style="color:#aa5500;">blue</span>;
73} 73​}
74 74​
75p { 75​p {
76 <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12px</span>; 76​ <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>;
77 <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30px</span>; 77​ <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>;
78 <span style="font-weight:bold;">font</span>: <span style="color:#0057ae;">#{$font-size}</span>/<span style="color:#0057ae;">#{$line-height}</span>; 78​ <span style="font-weight:bold;">font</span>: <span style="color:#0057ae;">#{$font-size}</span>/<span style="color:#0057ae;">#{$line-height}</span>;
79} 79​}
80 80​
81<span style="color:#898887;">// Special selectors: HTML5 allows user defined tags</span> 81​<span style="color:#898887;">// Special selectors: HTML5 allows user defined tags</span>
82 82​
83header { 83​header {
84 flex { 84​ flex {
85 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300px</span>; 85​ <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>;
86 } 86​ }
87} 87​}
88</pre></body></html> 88​</pre></body></html>