Skip to content

Commit 373b6b7

Browse files
CIAvashalecthomas
CIAvash
authored and
alecthomas
committed
Fix SCSS properties, add missing operator and keywords
1 parent a09abba commit 373b6b7

File tree

3 files changed

+2211
-5
lines changed

3 files changed

+2211
-5
lines changed

Diff for: ‎lexers/s/scss.go

+12-5
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,16 @@ func scssRules() Rules {
2727
{`/\*.*?\*/`, CommentMultiline, nil},
2828
{`@import`, Keyword, Push("value")},
2929
{`@for`, Keyword, Push("for")},
30-
{`@(debug|warn|if|while)`, Keyword, Push("value")},
31-
{`(@mixin)( [\w-]+)`, ByGroups(Keyword, NameFunction), Push("value")},
30+
{`@each`, Keyword, Push("each")},
31+
{`@(debug|warn|else if|if|while|return)`, Keyword, Push("value")},
32+
{`(@(?:mixin|function))( [\w-]+)`, ByGroups(Keyword, NameFunction), Push("value")},
3233
{`(@include)( [\w-]+)`, ByGroups(Keyword, NameDecorator), Push("value")},
3334
{`@extend`, Keyword, Push("selector")},
3435
{`(@media)(\s+)`, ByGroups(Keyword, Text), Push("value")},
3536
{`@[\w-]+`, Keyword, Push("selector")},
3637
{`(\$[\w-]*\w)([ \t]*:)`, ByGroups(NameVariable, Operator), Push("value")},
38+
{`#\{`, LiteralStringInterpol, Push("interpolation")},
39+
{`[^\s:="\[]+(?=[ \t]*(?:#{|[^{])+?;)`, NameAttribute, Push("attr")},
3740
Default(Push("selector")),
3841
},
3942
"attr": {
@@ -80,15 +83,15 @@ func scssRules() Rules {
8083
{`[ \t]+`, Text, nil},
8184
{`\:`, NameDecorator, Push("pseudo-class")},
8285
{`\.`, NameClass, Push("class")},
83-
{`\#`, NameNamespace, Push("id")},
84-
{`[\w-]+`, NameTag, nil},
8586
{`#\{`, LiteralStringInterpol, Push("interpolation")},
87+
{`\#`, NameNamespace, Push("id")},
8688
{`&`, Keyword, nil},
87-
{`[~^*!&\[\]()<>|+=@:,./?-]`, Operator, nil},
89+
{`[~^*!&\[\]()<>|+=@:,./?%-]`, Operator, nil},
8890
{`"`, LiteralStringDouble, Push("string-double")},
8991
{`'`, LiteralStringSingle, Push("string-single")},
9092
{`\n`, Text, nil},
9193
{`[;{}]`, Punctuation, Pop(1)},
94+
{`[\w-]+`, NameTag, nil},
9295
},
9396
"string-double": {
9497
{`(\\.|#(?=[^\n{])|[^\n"#])+`, LiteralStringDouble, nil},
@@ -124,5 +127,9 @@ func scssRules() Rules {
124127
{`(from|to|through)`, OperatorWord, nil},
125128
Include("value"),
126129
},
130+
"each": {
131+
{`in`, OperatorWord, nil},
132+
Include("value"),
133+
},
127134
}
128135
}

Diff for: ‎lexers/testdata/scss.actual

+338
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
$roboto-font-path: "../fonts/roboto";
2+
3+
@font-face {
4+
// This is parsed as a normal function call that takes a quoted string.
5+
src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");
6+
7+
font-family: "Roboto";
8+
font-weight: 100;
9+
}
10+
11+
@use 'base';
12+
$primary-color: red;
13+
.inverse {
14+
background-color: base.$primary-color;
15+
color: white;
16+
}
17+
18+
ul > {
19+
li {
20+
list-style-type: none;
21+
}
22+
}
23+
24+
h2 {
25+
+ p {
26+
border-top: 1px solid gray;
27+
}
28+
}
29+
30+
p {
31+
~ {
32+
span {
33+
opacity: 0.8;
34+
}
35+
}
36+
}
37+
38+
.button {
39+
border: 1px solid black;
40+
border-radius: if($rounded-corners, 5px, null);
41+
}
42+
43+
$base-color: #036;
44+
45+
@for $i from 1 through 3 {
46+
ul:nth-child(3n + #{$i}) {
47+
background-color: lighten($base-color, $i * 5%);
48+
}
49+
}
50+
51+
@function scale-below($value, $base, $ratio: 1.618) {
52+
@while $value > $base {
53+
$value: $value / $ratio;
54+
}
55+
@return $value;
56+
}
57+
58+
$normal-font-size: 16px;
59+
sup {
60+
font-size: scale-below(20px, 16px);
61+
}
62+
63+
$sizes: 40px, 50px, 80px;
64+
65+
@each $size in $sizes {
66+
.icon-#{$size} {
67+
font-size: $size;
68+
height: $size;
69+
width: $size;
70+
}
71+
}
72+
73+
@each $name, $glyph in $icons {
74+
.icon-#{$name}:before {
75+
display: inline-block;
76+
font-family: "Icon Font";
77+
content: $glyph;
78+
}
79+
}
80+
81+
$icons:
82+
"eye" "\f112" 12px,
83+
"start" "\f12e" 16px,
84+
"stop" "\f12f" 10px;
85+
86+
@each $name, $glyph, $size in $icons {
87+
.icon-#{$name}:before {
88+
display: inline-block;
89+
font-family: "Icon Font";
90+
content: $glyph;
91+
font-size: $size;
92+
}
93+
}
94+
95+
@mixin triangle($size, $color, $direction) {
96+
height: 0;
97+
width: 0;
98+
99+
border-color: transparent;
100+
border-style: solid;
101+
border-width: $size / 2;
102+
103+
@if $direction == up {
104+
border-bottom-color: $color;
105+
} @else if $direction == right {
106+
border-left-color: $color;
107+
} @else if $direction == down {
108+
border-top-color: $color;
109+
} @else if $direction == left {
110+
border-right-color: $color;
111+
} @else {
112+
@error "Unknown direction #{$direction}.";
113+
}
114+
}
115+
116+
.next {
117+
@include triangle(5px, black, right);
118+
}
119+
120+
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
121+
122+
@each $name, $glyph in $icons {
123+
.icon-#{$name}:before {
124+
display: inline-block;
125+
font-family: "Icon Font";
126+
content: $glyph;
127+
}
128+
}
129+
130+
/* This CSS will print because %message-shared is extended. */
131+
%message-shared {
132+
border: 1px solid #ccc;
133+
padding: 10px;
134+
color: #333;
135+
}
136+
137+
// This CSS won't print because %equal-heights is never extended.
138+
%equal-heights {
139+
display: flex;
140+
flex-wrap: wrap;
141+
}
142+
143+
.message {
144+
@extend %message-shared;
145+
}
146+
147+
.success {
148+
@extend %message-shared;
149+
border-color: green;
150+
}
151+
152+
.error {
153+
@extend %message-shared;
154+
border-color: red;
155+
}
156+
157+
.warning {
158+
@extend %message-shared;
159+
border-color: yellow;
160+
}
161+
162+
$grid-gutter-width : 1rem;
163+
164+
// lightbox
165+
$lightbox_small_maxHeight: calc(100vh - 1rem);
166+
$lightbox_small_maxWidth: calc(100vw - 1rem);
167+
168+
$lightbox_medium_mediaMinWidth: 400px;
169+
$lightbox_medium_maxHeight: 90vh;
170+
$lightbox_medium_maxWidth: 90vw;
171+
172+
$lightbox_large_mediaMinWidth: 1200px;
173+
$lightbox_large_maxHeight: 90vh;
174+
$lightbox_large_maxWidth: 70vw;
175+
176+
$lightbox_xxl_mediaMinWidth: 1600px;
177+
$lightbox_xxl_maxHeight: 90vh;
178+
$lightbox_xxl_maxWidth: 1100px;
179+
180+
$lightbox_padding: $grid-gutter-width / 2;
181+
$lightbox_header-height: 1rem;
182+
$lightbox_border_radius: 3px;
183+
184+
// lightbox colors
185+
$eee: #eee;
186+
$lightbox_close-color: #333;
187+
$lightbox_background_content: white;
188+
$lightbox_background_header: #f5f5f5;
189+
$lightbox_border: 1px solid $eee;
190+
$lightbox_overlay_color: transparentize(black, .4);
191+
$lightbox_shadow: 0 2px 5px rgba(0, 0, 0, .2);
192+
193+
.hffLightbox {
194+
@mixin lb_styles_background {
195+
background: $lightbox_overlay_color;
196+
}
197+
@mixin lb_styles {
198+
border-radius: $lightbox_border_radius;
199+
border: $lightbox_border;
200+
background: $lightbox_background_content;
201+
box-shadow: 0 2px 5px $lightbox_shadow;
202+
}
203+
@mixin lb_styles-header {
204+
background: $lightbox_background_header;
205+
border-bottom: $lightbox_border;
206+
}
207+
@mixin lb_styles-headline {
208+
font-weight: bold;
209+
}
210+
@mixin lb_styles-content {
211+
}
212+
213+
&, & * {
214+
box-sizing: border-box;
215+
}
216+
position: fixed;
217+
height: 200vh;
218+
width: 200vw;
219+
left: -50vw;
220+
top: -50vh;
221+
@include lb_styles_background();
222+
z-index: 1000;
223+
224+
&-wrapper {
225+
transition: all ease-in-out .5s;
226+
animation-name: fadeInLightbox;
227+
animation-duration: .5s;
228+
overflow: hidden;
229+
left: 50%;
230+
top: 50%;
231+
max-width: 2000px;
232+
max-height: $lightbox_small_maxHeight;
233+
width: $lightbox_small_maxWidth;
234+
position: absolute;
235+
transform: translate(-50%, -50%);
236+
@include lb_styles();
237+
}
238+
&-content {
239+
overflow: auto;
240+
@include lb_styles-content();
241+
max-height: calc(#{$lightbox_small_maxHeight} - 4rem);
242+
}
243+
&-header {
244+
overflow: hidden;
245+
@include lb_styles-header();
246+
&-headline{
247+
line-height: 1rem;
248+
padding-right: calc(#{$lightbox_header-height} * 2);
249+
overflow: hidden;
250+
text-overflow: ellipsis;
251+
max-height: $lightbox_header-height;
252+
text-transform: uppercase;
253+
@include lb_styles-headline();
254+
}
255+
}
256+
&-footer > .class {
257+
258+
}
259+
&-footer .class {
260+
261+
}
262+
&-footer, .class > #id {
263+
264+
}
265+
&-content, &-header, &-footer {
266+
padding: $lightbox_padding;
267+
}
268+
&-close {
269+
cursor: pointer;
270+
position: absolute;
271+
right: $lightbox_padding;
272+
top: $lightbox_padding;
273+
width: $lightbox_header-height;
274+
height: $lightbox_header-height;
275+
opacity: 0.7;
276+
text-indent: -1000;
277+
font-size: 0;
278+
&:hover {
279+
opacity: 1;
280+
}
281+
&:before, &:after {
282+
position: absolute;
283+
left: 50%;
284+
top: 0;
285+
transform: translate(-50%, -50%);
286+
content: ' ';
287+
height: $lightbox_header-height;
288+
width: 2px;
289+
background-color: $lightbox_close-color;
290+
}
291+
&:before {
292+
transform: rotate(45deg);
293+
}
294+
&:after {
295+
transform: rotate(-45deg);
296+
}
297+
}
298+
}
299+
300+
@media (min-width: #{$lightbox_medium_mediaMinWidth}) {
301+
.hffLightbox-wrapper {
302+
max-height: $lightbox_medium_maxHeight;
303+
width: $lightbox_medium_maxWidth;
304+
}
305+
.hffLightbox-content {
306+
max-height: calc(#{$lightbox_medium_maxHeight} - 4rem);
307+
}
308+
}
309+
310+
@media (min-width: #{$lightbox_large_mediaMinWidth}) {
311+
.hffLightbox-wrapper {
312+
max-height: $lightbox_large_maxHeight;
313+
width: $lightbox_large_maxWidth;
314+
}
315+
.hffLightbox-content {
316+
max-height: calc(#{$lightbox_large_maxHeight} - 4rem);
317+
}
318+
}
319+
$wrapper: 'wrapper';
320+
$max: 'max';
321+
$hffLightBox: '.hfflightbox';
322+
$hffLightBox2: '.hfflightbox';
323+
@media (min-width: #{$lightbox_xxl_mediaMinWidth}) {
324+
.hffLightbox-#{$wrapper} {
325+
max-height: $lightbox_xxl_maxHeight;
326+
#{$max}-height: $lightbox_xxl_maxHeight;
327+
width: $lightbox_xxl_maxWidth;
328+
}
329+
.hffLightbox-content {
330+
max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
331+
}
332+
#{$hffLightBox}-content {
333+
max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
334+
}
335+
.#{$hffLightBox2}-content {
336+
max-height: calc(#{$lightbox_xxl_maxHeight} - 4rem);
337+
}
338+
}

0 commit comments

Comments
 (0)