Changeset View
Changeset View
Standalone View
Standalone View
autotests/folding/highlight.sass.fold
- This file was added.
1 | <indentfold>html, | ||||
---|---|---|---|---|---|
2 | body, | ||||
3 | ul, | ||||
4 | ol | ||||
5 | margin: 0 | ||||
6 | padding: 0 | ||||
7 | | ||||
8 | @import reset | ||||
9 | body | ||||
10 | font: 100% Helvetica, sans-serif | ||||
11 | background-color: #efefef | ||||
12 | | ||||
13 | $font-stack: Helvetica, sans-serif | ||||
14 | $primary-color: #333 | ||||
15 | | ||||
16 | body | ||||
17 | font: 100% $font-stack | ||||
18 | color: $primary-color | ||||
19 | .container | ||||
20 | width: 100% | ||||
21 | | ||||
22 | article[role="main"] | ||||
23 | float: left | ||||
24 | width: 600px / 960px * 100% | ||||
25 | | ||||
26 | %message-shared | ||||
27 | border: 1px solid #ccc | ||||
28 | padding: 10px | ||||
29 | color: #333 | ||||
30 | | ||||
31 | .message | ||||
32 | @extend %message-shared | ||||
33 | | ||||
34 | .success | ||||
35 | @extend %message-shared | ||||
36 | border-color: green | ||||
37 | | ||||
38 | =transform($property) | ||||
39 | -webkit-transform: $property | ||||
40 | -ms-transform: $property | ||||
41 | transform: $property | ||||
42 | .box | ||||
43 | +transform(rotate(30deg)) | ||||
44 | | ||||
45 | // This comment won't be included in the CSS. | ||||
46 | This is also commented out. | ||||
47 | #a | ||||
48 | /* But this comment will, except in compressed mode. | ||||
49 | | ||||
50 | /* It can also contain interpolation: | ||||
51 | 1 + 1 = #{1 + 1} | ||||
52 | 1 + 1 = #{1 + 1} | ||||
53 | 1 + 1 = #{1 + 1} | ||||
54 | #a | ||||
55 | | ||||
56 | // But this comment will, except in compressed mode. | ||||
57 | | ||||
58 | // It can also contain interpolation: | ||||
59 | 1 + 1 = #{1 + 1} | ||||
60 | 1 + 1 = #{1 + 1} | ||||
61 | 1 + 1 = #{1 + 1} | ||||
62 | #a | ||||
63 | | ||||
64 | /*! This comment will be included even in compressed mode. | ||||
65 | | ||||
66 | #a | ||||
67 | | ||||
68 | /**/ | ||||
69 | | ||||
70 | p .sans | ||||
71 | font: Helvetica, /* Inline comments must be closed. */ sans-serif | ||||
72 | | ||||
73 | p .sans | ||||
74 | font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment | ||||
75 | | ||||
76 | /// Computes an exponent. | ||||
77 | /// | ||||
78 | /// @param {number} $base | ||||
79 | /// The number to multiply by itself. | ||||
80 | /// @param {integer (unitless)} $exponent | ||||
81 | /// The number of `$base`s to multiply together. | ||||
82 | /// @return {number} `$base` to the power of `$exponent`. | ||||
83 | @function pow($base, $exponent) | ||||
84 | $result: 1 | ||||
85 | @for $_ from 1 through $exponent | ||||
86 | $result: $result * $base | ||||
87 | | ||||
88 | @return $result | ||||
89 | | ||||
90 | $roboto-font-path: "../fonts/roboto" | ||||
91 | | ||||
92 | @font-face | ||||
93 | // This is parsed as a normal function call that takes a quoted string. | ||||
94 | src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2") | ||||
95 | src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2") | ||||
96 | src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2") | ||||
97 | | ||||
98 | font-family: "Roboto" | ||||
99 | font-weight: 100 | ||||
100 | | ||||
101 | .logo | ||||
102 | $width: 800px | ||||
103 | width: $width | ||||
104 | position: absolute | ||||
105 | left: calc(50% - #{$width / 2}) | ||||
106 | top: 0 | ||||
107 | | ||||
108 | $padding: 12px | ||||
109 | | ||||
110 | .post | ||||
111 | // Since these max() calls don't use any Sass features other than | ||||
112 | // interpolation, they're compiled to CSS max() calls. | ||||
113 | padding-left: max(#{$padding}, env(safe-area-inset-left)) | ||||
114 | padding-right: max(#{$padding}, env(safe-area-inset-right)) | ||||
115 | | ||||
116 | | ||||
117 | .sidebar | ||||
118 | // Since these refer to a Sass variable without interpolation, they call | ||||
119 | // Sass's built-in max() function. | ||||
120 | padding-left: max($padding, 20px) | ||||
121 | padding-right: max($padding, 20px) | ||||
122 | | ||||
123 | .circle | ||||
124 | $size: 100px | ||||
125 | width: $size | ||||
126 | height: $size | ||||
127 | border-radius: $size / 2 | ||||
128 | | ||||
129 | @mixin prefix($property, $value, $prefixes) | ||||
130 | @each $prefix in $prefixes | ||||
131 | -#{$prefix}-#{$property}: $value | ||||
132 | | ||||
133 | #{$property}: $value | ||||
134 | | ||||
135 | | ||||
136 | .gray | ||||
137 | @include prefix(filter, grayscale(50%), moz webkit) | ||||
138 | | ||||
139 | .enlarge | ||||
140 | font-size: 14px | ||||
141 | transition: | ||||
142 | property: font-size | ||||
143 | duration: 4s | ||||
144 | delay: 2s | ||||
145 | | ||||
146 | &:hover | ||||
147 | font-size: 36px | ||||
148 | | ||||
149 | .info-page | ||||
150 | margin: auto | ||||
151 | bottom: 10px | ||||
152 | top: 2px | ||||
153 | | ||||
154 | $rounded-corners: false | ||||
155 | | ||||
156 | .button | ||||
157 | border: 1px solid black | ||||
158 | border-radius: if($rounded-corners, 5px, null) | ||||
159 | | ||||
160 | $primary: #81899b | ||||
161 | $accent: #ab2e | ||||
162 | $warn: #dfa612aa | ||||
163 | | ||||
164 | :root | ||||
165 | --primary: #{$primary} | ||||
166 | --accent: #{$accent} | ||||
167 | --warn: #{$warn} | ||||
168 | | ||||
169 | // Even though this looks like a Sass variable, it's valid CSS so it's not | ||||
170 | // evaluated. | ||||
171 | --consumed-by-js: $primary | ||||
172 | | ||||
173 | $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto | ||||
174 | $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas | ||||
175 | | ||||
176 | :root | ||||
177 | --font-family-sans-serif: #{inspect($font-family-sans-serif)} | ||||
178 | --font-family-monospace: #{inspect($font-family-monospace)} | ||||
179 | | ||||
180 | .alert | ||||
181 | // The parent selector can be used to add pseudo-classes to the outer | ||||
182 | // selector. | ||||
183 | &:hover | ||||
184 | font-weight: bold | ||||
185 | | ||||
186 | | ||||
187 | // It can also be used to style the outer selector in a certain context, such | ||||
188 | // as a body set to use a right-to-left language. | ||||
189 | [dir=rtl] & | ||||
190 | margin-left: 0 | ||||
191 | margin-right: 10px | ||||
192 | | ||||
193 | | ||||
194 | // You can even use it as an argument to pseudo-class selectors. | ||||
195 | :not(&) | ||||
196 | opacity: 0.8 | ||||
197 | | ||||
198 | @mixin unify-parent($child) | ||||
199 | @at-root #{selector-unify(&, $child)} | ||||
200 | @content | ||||
201 | | ||||
202 | | ||||
203 | | ||||
204 | .wrapper .field | ||||
205 | @include unify-parent("input") | ||||
206 | | ||||
207 | @mixin app-background($color) | ||||
208 | #{if(&, '&.app-background', '.app-background')} | ||||
209 | background-color: $color | ||||
210 | color: rgba(#fff, 0.75) | ||||
211 | | ||||
212 | @include app-background(#036) | ||||
213 | | ||||
214 | .sidebar | ||||
215 | @include app-background(#c6538c) | ||||
216 | | ||||
217 | .accordion | ||||
218 | max-width: 600px | ||||
219 | margin: 4rem auto | ||||
220 | | ||||
221 | &__copy | ||||
222 | display: none | ||||
223 | padding: 1rem 1.5rem 2rem 1.5rem | ||||
224 | line-height: 1.6 | ||||
225 | font-size: 14px | ||||
226 | | ||||
227 | &--open | ||||
228 | display: block | ||||
229 | | ||||
230 | | ||||
231 | .alert:hover, %strong-alert | ||||
232 | font-weight: bold | ||||
233 | | ||||
234 | %strong-alert:hover | ||||
235 | color: red | ||||
236 | | ||||
237 | %toolbelt | ||||
238 | box-sizing: border-box | ||||
239 | border-top: 1px rgba(#000, .12) solid | ||||
240 | | ||||
241 | &:hover | ||||
242 | border: 2px rgba(#000, .5) solid | ||||
243 | | ||||
244 | .action-buttons | ||||
245 | @extend %toolbelt | ||||
246 | color: #4285f4 | ||||
247 | | ||||
248 | $border-dark: rgba($base-color, 0.88) | ||||
249 | $black: #000 !default | ||||
250 | $border-radius: 0.25rem !default | ||||
251 | $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default | ||||
252 | $box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default | ||||
253 | $border-radius: 0.1rem | ||||
254 | | ||||
255 | @import 'library' | ||||
256 | | ||||
257 | $global-variable: global value | ||||
258 | | ||||
259 | // This would fail, because $local-variable isn't in scope: | ||||
260 | // local: $local-variable | ||||
261 | | ||||
262 | $theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107) | ||||
263 | | ||||
264 | .alert | ||||
265 | // Instead of $theme-color-#{warning} | ||||
266 | background-color: map-get($theme-colors, "warning") | ||||
267 | | ||||
268 | @mixin corner-icon($name, $top-or-bottom, $left-or-right) | ||||
269 | .icon-#{$name} | ||||
270 | background-image: url("/icons/#{$name}.svg") | ||||
271 | position: absolute | ||||
272 | #{$top-or-bottom}: 0 | ||||
273 | #{$left-or-right}: 0 | ||||
274 | | ||||
275 | @include corner-icon("mail", top, right) | ||||
276 | | ||||
277 | @mixin inline-animation($duration) | ||||
278 | $name: inline-#{unique-id()} | ||||
279 | | ||||
280 | @keyframes #{$name} | ||||
281 | @content | ||||
282 | | ||||
283 | animation-name: $name | ||||
284 | animation-duration: $duration | ||||
285 | animation-iteration-count: infinite | ||||
286 | | ||||
287 | | ||||
288 | .pulse | ||||
289 | @include inline-animation(2s) | ||||
290 | from | ||||
291 | background-color: yellow | ||||
292 | to | ||||
293 | background-color: red | ||||
294 | | ||||
295 | .example | ||||
296 | unquoted: #{"string"} | ||||
297 | | ||||
298 | & & | ||||
299 | padding: | ||||
300 | bottom: 0 | ||||
301 | left: 0 | ||||
302 | | ||||
303 | // style.sass | ||||
304 | @import 'foundation/code', 'foundation/lists' | ||||
305 | | ||||
306 | @import "theme.css" | ||||
307 | @import "http://fonts.googleapis.com/css?family=Droid+Sans" | ||||
308 | @import url(theme) | ||||
309 | @import "landscape" screen and (orientation: landscape) | ||||
310 | | ||||
311 | @mixin google-font($family) | ||||
312 | @import url("http://fonts.googleapis.com/css?family=#{$family}") | ||||
313 | | ||||
314 | @include google-font("Droid Sans") | ||||
315 | | ||||
316 | @mixin horizontal-list | ||||
317 | @include reset-list | ||||
318 | | ||||
319 | li | ||||
320 | display: inline-block | ||||
321 | margin: | ||||
322 | left: -2px | ||||
323 | right: 2em | ||||
324 | | ||||
325 | nav ul | ||||
326 | @include horizontal-list | ||||
327 | | ||||
328 | @mixin rtl($property, $ltr-value, $rtl-value) | ||||
329 | #{$property}: $ltr-value | ||||
330 | | ||||
331 | [dir=rtl] & | ||||
332 | #{$property}: $rtl-value | ||||
333 | | ||||
334 | .sidebar | ||||
335 | @include rtl(float, left, right) | ||||
336 | | ||||
337 | @mixin replace-text($image, $x: 50%, $y: 50%) | ||||
338 | text-indent: -99999em | ||||
339 | overflow: hidden | ||||
340 | text-align: left | ||||
341 | | ||||
342 | background: | ||||
343 | image: $image | ||||
344 | repeat: no-repeat | ||||
345 | position: $x $y | ||||
346 | | ||||
347 | .mail-icon | ||||
348 | @include replace-text(url("/images/mail.svg"), 0) | ||||
349 | | ||||
350 | @include order(150px, "input.name", "input.address", "input.zip") | ||||
351 | | ||||
352 | @mixin syntax-colors($args...) | ||||
353 | @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) | ||||
354 | | ||||
355 | @each $name, $color in keywords($args) | ||||
356 | pre span.stx-#{$name} | ||||
357 | color: $color | ||||
358 | | ||||
359 | @include syntax-colors($string: #080, $comment: #800, $variable: #60b) | ||||
360 | | ||||
361 | @mixin media($types...) | ||||
362 | @each $type in $types | ||||
363 | @media #{$type} | ||||
364 | @content($type) | ||||
365 | | ||||
366 | @include media(screen, print) using ($type) | ||||
367 | h1 | ||||
368 | font-size: 40px | ||||
369 | @if $type == print | ||||
370 | font-family: Calluna | ||||
371 | | ||||
372 | =reset-list | ||||
373 | margin: 0 | ||||
374 | padding: 0 | ||||
375 | list-style: none | ||||
376 | | ||||
377 | =horizontal-list | ||||
378 | +reset-list | ||||
379 | | ||||
380 | li | ||||
381 | display: inline-block | ||||
382 | margin: | ||||
383 | left: -2px | ||||
384 | right: 2em | ||||
385 | | ||||
386 | nav ul | ||||
387 | +horizontal-list | ||||
388 | @function pow($base, $exponent) | ||||
389 | $result: 1 | ||||
390 | @for $_ from 1 through $exponent | ||||
391 | $result: $result * $base | ||||
392 | | ||||
393 | @return $result | ||||
394 | | ||||
395 | .sidebar | ||||
396 | float: left | ||||
397 | margin-left: pow(4, 3) * 1px | ||||
398 | | ||||
399 | @function sum($numbers...) | ||||
400 | $sum: 0 | ||||
401 | @each $number in $numbers | ||||
402 | $sum: $sum + $number | ||||
403 | | ||||
404 | @return $sum | ||||
405 | | ||||
406 | .micro | ||||
407 | width: sum(50px, 30px, 100px) | ||||
408 | @function str-insert($string, $insert, $index) | ||||
409 | // Avoid making new strings if we don't need to. | ||||
410 | @if str-length($string) == 0 | ||||
411 | @return $insert | ||||
412 | | ||||
413 | $before: str-slice($string, 0, $index) | ||||
414 | $after: str-slice($string, $index) | ||||
415 | @return $before + $insert + $after | ||||
416 | | ||||
417 | .error | ||||
418 | border: 1px #f00 | ||||
419 | background-color: #fdd | ||||
420 | | ||||
421 | &--serious | ||||
422 | @extend .error | ||||
423 | border-width: 3px | ||||
424 | | ||||
425 | @mixin reflexive-position($property, $value) | ||||
426 | @if $property != left and $property != right | ||||
427 | @error "Property #{$property} must be either left or right." | ||||
428 | | ||||
429 | $left-value: if($property == right, initial, $value) | ||||
430 | $right-value: if($property == right, $value, initial) | ||||
431 | | ||||
432 | left: $left-value | ||||
433 | right: $right-value | ||||
434 | [dir=rtl] & | ||||
435 | left: $right-value | ||||
436 | right: $left-value | ||||
437 | | ||||
438 | $known-prefixes: webkit, moz, ms, o | ||||
439 | | ||||
440 | @mixin prefix($property, $value, $prefixes) | ||||
441 | @each $prefix in $prefixes | ||||
442 | @if not index($known-prefixes, $prefix) | ||||
443 | @warn "Unknown prefix #{$prefix}." | ||||
444 | | ||||
445 | | ||||
446 | -#{$prefix}-#{$property}: $value | ||||
447 | | ||||
448 | #{$property}: $value | ||||
449 | | ||||
450 | | ||||
451 | .tilt | ||||
452 | // Oops, we typo'd "webkit" as "wekbit"! | ||||
453 | @include prefix(transform, rotate(15deg), wekbit ms) | ||||
454 | | ||||
455 | @mixin inset-divider-offset($offset, $padding) | ||||
456 | $divider-offset: (2 * $padding) + $offset | ||||
457 | @debug "divider offset: #{$divider-offset}" | ||||
458 | | ||||
459 | margin-left: $divider-offset | ||||
460 | width: calc(100% - #{$divider-offset}) | ||||
461 | | ||||
462 | @mixin unify-parent($child) | ||||
463 | @at-root #{selector-unify(&, $child)} | ||||
464 | @content | ||||
465 | | ||||
466 | | ||||
467 | .square-av | ||||
468 | @include avatar(100px, $circle: false) | ||||
469 | .circle-av | ||||
470 | @include avatar(100px, $circle: true) | ||||
471 | | ||||
472 | @mixin theme-colors($light-theme: true) | ||||
473 | @if $light-theme | ||||
474 | background-color: $light-background | ||||
475 | color: $light-text | ||||
476 | @else | ||||
477 | background-color: $dark-background | ||||
478 | color: $dark-text | ||||
479 | | ||||
480 | .banner | ||||
481 | @include theme-colors($light-theme: true) | ||||
482 | body.dark & | ||||
483 | @include theme-colors($light-theme: false) | ||||
484 | | ||||
485 | @mixin triangle($size, $color, $direction) | ||||
486 | height: 0 | ||||
487 | width: 0 | ||||
488 | | ||||
489 | border-color: transparent | ||||
490 | border-style: solid | ||||
491 | border-width: $size / 2 | ||||
492 | | ||||
493 | @if $direction == up | ||||
494 | border-bottom-color: $color | ||||
495 | @else if $direction == right | ||||
496 | border-left-color: $color | ||||
497 | @else if $direction == down | ||||
498 | border-top-color: $color | ||||
499 | @else if $direction == left | ||||
500 | border-right-color: $color | ||||
501 | @else | ||||
502 | @error "Unknown direction #{$direction}." | ||||
503 | | ||||
504 | @each $size in $sizes | ||||
505 | .icon-#{$size} | ||||
506 | font-size: $size | ||||
507 | height: $size | ||||
508 | width: $size | ||||
509 | | ||||
510 | $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f") | ||||
511 | | ||||
512 | @each $name, $glyph in $icons | ||||
513 | .icon-#{$name}:before | ||||
514 | display: inline-block | ||||
515 | font-family: "Icon Font" | ||||
516 | content: $glyph | ||||
517 | | ||||
518 | $icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px | ||||
519 | | ||||
520 | @each $name, $glyph, $size in $icons | ||||
521 | .icon-#{$name}:before | ||||
522 | display: inline-block | ||||
523 | font-family: "Icon Font" | ||||
524 | content: $glyph | ||||
525 | font-size: $size | ||||
526 | | ||||
527 | @for $i from 1 through 3 | ||||
528 | ul:nth-child(3n + #{$i}) | ||||
529 | background-color: lighten($base-color, $i * 5%) | ||||
530 | | ||||
531 | /// Divides `$value` by `$ratio` until it's below `$base`. | ||||
532 | @function scale-below($value, $base, $ratio: 1.618) | ||||
533 | @while $value > $base | ||||
534 | $value: $value / $ratio | ||||
535 | @return $value | ||||
536 | | ||||
537 | @namespace svg url(http://www.w3.org/2000/svg) | ||||
538 | | ||||
539 | @font-face | ||||
540 | font-family: "Open Sans" | ||||
541 | src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2") | ||||
542 | | ||||
543 | @counter-style thumbs | ||||
544 | system: cyclic | ||||
545 | symbols: "\1F44D" | ||||
546 | | ||||
547 | @mixin sticky-position | ||||
548 | position: fixed | ||||
549 | @supports (position: sticky) | ||||
550 | position: sticky | ||||
551 | | ||||
552 | @media (hover: hover) | ||||
553 | .button:hover | ||||
554 | border: 2px solid black | ||||
555 | | ||||
556 | @media (color) | ||||
557 | border-color: #036 | ||||
558 | | ||||
559 | @keyframes slide-in | ||||
560 | from | ||||
561 | margin-left: 100% | ||||
562 | width: 300% | ||||
563 | | ||||
564 | | ||||
565 | 70% | ||||
566 | margin-left: 90% | ||||
567 | width: 150% | ||||
568 | | ||||
569 | | ||||
570 | to | ||||
571 | margin-left: 0% | ||||
572 | width: 100% | ||||
573 | | ||||
574 | @debug 100 // 100 | ||||
575 | @debug 0.8 // 0.8 | ||||
576 | @debug 16px // 16px | ||||
577 | @debug 5px * 2px // 10px*px (read "square pixels") | ||||
578 | @debug 5.2e3 // 5200 | ||||
579 | @debug 6e-2 // 0.06 | ||||
580 | @debug 4px * 6px // 24px*px (read "square pixels") | ||||
581 | @debug 5px / 2s // 2.5px/s (read "pixels per second") | ||||
582 | @debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em | ||||
583 | // (read "pixel-degrees per second-em") | ||||
584 | | ||||
585 | $degrees-per-second: 20deg/1s | ||||
586 | @debug $degrees-per-second // 20deg/s | ||||
587 | @debug 1 / $degrees-per-second // 0.05s/deg | ||||
588 | $transition-speed: 1s/50px | ||||
589 | | ||||
590 | @debug unquote(".widget:hover") // .widget:hover | ||||
591 | @debug quote(bold) // "bold" | ||||
592 | @debug 0.012345678912345 // 0.0123456789 | ||||
593 | @debug 0.01234567891 == 0.01234567899 // true | ||||
594 | @debug 1.00000000009 // 1 | ||||
595 | @debug 0.99999999991 // 1 | ||||
596 | @debug "\"" // '"' | ||||
597 | @debug \.widget // \.widget | ||||
598 | @debug "\a" // "\a" (a string containing only a newline) | ||||
599 | @debug "line1\a line2" // "line1\a line2" (foo and bar are separated by a newline) | ||||
600 | @debug "Nat + Liz \1F46D" // "Nat + Liz 👭" | ||||
601 | @debug "Helvetica Neue" // "Helvetica Neue" | ||||
602 | @debug "C:\\Program Files" // "C:\\Program Files" | ||||
603 | @debug "\"Don't Fear the Reaper\"" // "\"Don't Fear the Reaper\"" | ||||
604 | @debug "line1\a line2" // "line1\a line2" | ||||
605 | | ||||
606 | $roboto-variant: "Mono" | ||||
607 | @debug "Roboto #{$roboto-variant}" // "Roboto Mono" | ||||
608 | @debug bold // bold | ||||
609 | @debug -webkit-flex // -webkit-flex | ||||
610 | @debug --123 // --123 | ||||
611 | | ||||
612 | $prefix: ms | ||||
613 | @debug -#{$prefix}-flex // -ms-flex | ||||
614 | @debug \1F46D // 👭 | ||||
615 | @debug \21 // \! | ||||
616 | @debug \7Fx // \7f x | ||||
617 | @debug str-length(\7Fx) // 5 | ||||
618 | @debug str-index("Helvetica Neue", "Helvetica") // 1 | ||||
619 | @debug str-index("Helvetica Neue", "Neue") // 11 | ||||
620 | @debug str-slice("Roboto Mono", -4) // "Mono" | ||||
621 | @debug #f2ece4 // #f2ece4 | ||||
622 | @debug #b37399aa // rgba(179, 115, 153, 67%) | ||||
623 | @debug midnightblue // #191970 | ||||
624 | @debug rgb(204, 102, 153) // #c69 | ||||
625 | @debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8) | ||||
626 | @debug hsl(228, 7%, 86%) // #dadbdf | ||||
627 | @debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7) | ||||
628 | $venus: #998099 | ||||
629 | | ||||
630 | @debug scale-color($venus, $lightness: +15%) // #a893a8 | ||||
631 | @debug mix($venus, midnightblue) // #594d85 | ||||
632 | @debug nth(10px 12px 16px, 2) // 12px | ||||
633 | @debug nth([line1, line2, line3], -1) // line3 | ||||
634 | $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms) | ||||
635 | | ||||
636 | @function prefixes-for-browsers($browsers) | ||||
637 | $prefixes: () | ||||
638 | @each $browser in $browsers | ||||
639 | $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser)) | ||||
640 | | ||||
641 | @return $prefixes | ||||
642 | | ||||
643 | @debug prefixes-for-browsers("firefox" "ie") // moz ms | ||||
644 | @mixin syntax-colors($args...) | ||||
645 | @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) | ||||
646 | | ||||
647 | @each $name, $color in keywords($args) | ||||
648 | pre span.stx-#{$name} | ||||
649 | color: $color | ||||
650 | | ||||
651 | @include syntax-colors($string: #080, $comment: #800, $variable: #60b); | ||||
652 | $font-weights: ("regular": 400, "medium": 500, "bold": 700) | ||||
653 | | ||||
654 | @debug map-get($font-weights, "medium") // 500 | ||||
655 | @debug map-get($font-weights, "extra-bold") // null | ||||
656 | $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f") | ||||
657 | | ||||
658 | @each $name, $glyph in $icons | ||||
659 | .icon-#{$name}:before | ||||
660 | display: inline-block | ||||
661 | font-family: "Icon Font" | ||||
662 | content: $glyph | ||||
663 | | ||||
664 | $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms) | ||||
665 | | ||||
666 | @mixin add-browser-prefix($browser, $prefix) | ||||
667 | $prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix)) | ||||
668 | | ||||
669 | @include add-browser-prefix("opera", o) | ||||
670 | @debug $prefixes-by-browser | ||||
671 | // ("firefox": moz, "safari": webkit, "ie": ms, "opera": o) | ||||
672 | @debug 1px == 2px // false | ||||
673 | @debug 1px == 1px // true | ||||
674 | @debug 10px < 3px // false | ||||
675 | @debug comparable(100px, 3in) // true | ||||
676 | | ||||
677 | @debug str-index("Helvetica Neue", "Roboto") // null | ||||
678 | @debug map-get(("large": 20px), "small") // null | ||||
679 | @debug & // null | ||||
680 | $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas") | ||||
681 | | ||||
682 | h3 | ||||
683 | font: 18px bold map-get($fonts, "sans") | ||||
684 | | ||||
685 | $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas") | ||||
686 | | ||||
687 | h3 | ||||
688 | font: | ||||
689 | size: 18px | ||||
690 | weight: bold | ||||
691 | family: map-get($fonts, "sans") | ||||
692 | | ||||
693 | copy of $list with all elements for which $condition returns `true` | ||||
694 | /// removed. | ||||
695 | @function remove-where($list, $condition) | ||||
696 | $new-list: () | ||||
697 | $separator: list-separator($list) | ||||
698 | @each $element in $list | ||||
699 | @if not call($condition, $element) | ||||
700 | $new-list: append($new-list, $element, $separator: $separator) | ||||
701 | | ||||
702 | @return $new-list | ||||
703 | | ||||
704 | $fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif | ||||
705 | | ||||
706 | content | ||||
707 | @function contains-helvetica($string) | ||||
708 | @return str-index($string, "Helvetica") | ||||
709 | | ||||
710 | font-family: remove-where($fonts, get-function("contains-helvetica")) | ||||
711 | | ||||
712 | @debug 1px == 1px // true | ||||
713 | @debug 1px != 1em // true | ||||
714 | @debug 1 != 1px // true | ||||
715 | @debug 96px == 1in // true | ||||
716 | | ||||
717 | @debug "Helvetica" == Helvetica // true | ||||
718 | @debug "Helvetica" != "Arial" // true | ||||
719 | | ||||
720 | @debug hsl(34, 35%, 92.1%) == #f2ece4 // true | ||||
721 | @debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8) // true | ||||
722 | | ||||
723 | @debug (5px 7px 10px) == (5px 7px 10px) // true | ||||
724 | @debug (5px 7px 10px) != (10px 14px 20px) // true | ||||
725 | @debug (5px 7px 10px) != (5px, 7px, 10px) // true | ||||
726 | @debug (5px 7px 10px) != [5px 7px 10px] // true | ||||
727 | | ||||
728 | $theme: ("venus": #998099, "nebula": #d2e1dd) | ||||
729 | @debug $theme == ("venus": #998099, "nebula": #d2e1dd) // true | ||||
730 | @debug $theme != ("venus": #998099, "iron": #dadbdf) // true | ||||
731 | | ||||
732 | @debug true == true // true | ||||
733 | @debug true != false // true | ||||
734 | @debug null != false // true | ||||
735 | | ||||
736 | @debug get-function("rgba") == get-function("rgba") // true | ||||
737 | @debug get-function("rgba") != get-function("hsla") // true | ||||
738 | | ||||
739 | @debug 10s + 15s // 25s | ||||
740 | @debug 1in - 10px // 0.8958333333in | ||||
741 | @debug 5px * 3px // 15px*px | ||||
742 | @debug (12px/4px) // 3 | ||||
743 | @debug 1in % 9px // 0.0625in | ||||
744 | @debug 15px / 30px // 15px/30px | ||||
745 | @debug (10px + 5px) / 30px // 0.5 | ||||
746 | | ||||
747 | $result: 15px / 30px | ||||
748 | @debug $result // 0.5 | ||||
749 | | ||||
750 | @function fifteen-divided-by-thirty() | ||||
751 | @return 15px / 30px | ||||
752 | | ||||
753 | @debug fifteen-divided-by-thirty() // 0.5 | ||||
754 | | ||||
755 | @debug (15px/30px) // 0.5 | ||||
756 | @debug (bold 15px/30px sans-serif) // bold 15px/30px sans-serif | ||||
757 | @debug 15px/30px + 1 // 1.5 | ||||
758 | | ||||
759 | @debug 4px * 6px // 24px*px (read "square pixels") | ||||
760 | @debug 5px / 2s // 2.5px/s (read "pixels per second") | ||||
761 | @debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em | ||||
762 | // (read "pixel-degrees per second-em") | ||||
763 | | ||||
764 | $degrees-per-second: 20deg/1s | ||||
765 | @debug $degrees-per-second // 20deg/s | ||||
766 | @debug 1 / $degrees-per-second // 0.05s/deg | ||||
767 | @debug 100 > 50 // true | ||||
768 | @debug 10px < 17px // true | ||||
769 | @debug 96px >= 1in // true | ||||
770 | @debug 1000ms <= 1s // true | ||||
771 | @debug "Helvetica" + " Neue" // "Helvetica Neue" | ||||
772 | @debug sans- + serif // sans-serif | ||||
773 | @debug #{10px + 5px} / 30px // 15px/30px | ||||
774 | @debug sans - serif // sans-serif | ||||
775 | | ||||
776 | @debug "Elapsed time: " + 10s // "Elapsed time: 10s"; | ||||
777 | @debug true + " is a boolean value" // "true is a boolean value"; | ||||
778 | | ||||
779 | @debug / 15px // /15px | ||||
780 | @debug - moz // -moz | ||||
781 | @debug not true // false | ||||
782 | @debug not false // true | ||||
783 | | ||||
784 | @debug true and true // true | ||||
785 | @debug true and false // false | ||||
786 | | ||||
787 | @debug true or false // true | ||||
788 | @debug false or false // false | ||||
789 | @debug var(--main-bg-color) // var(--main-bg-color) | ||||
790 | | ||||
791 | $primary: #f2ece4 | ||||
792 | $accent: #e1d7d2 | ||||
793 | @debug radial-gradient($primary, $accent) // radial-gradient(#f2ece4, #e1d7d2) | ||||
794 | @debug str-index("Helvetica Neue", "Helvetica") // 1 | ||||
795 | @debug str-index("Helvetica Neue", "Neue") // 11 | ||||
796 | @debug comparable(2px, 1px) // true | ||||
797 | @debug comparable(100px, 3em) // false | ||||
798 | @debug comparable(10cm, 3mm) // true | ||||
799 | @debug append(10px 20px, 30px) // 10px 20px 30px | ||||
800 | @debug append((blue, red), green) // blue, red, green | ||||
801 | @debug append(10px 20px, 30px 40px) // 10px 20px (30px 40px) | ||||
802 | @debug append(10px, 20px, $separator: comma) // 10px, 20px | ||||
803 | @debug append((blue, red), green, $separator: space) // blue red green | ||||
804 | @mixin syntax-colors($args...) | ||||
805 | @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) | ||||
806 | | ||||
807 | @each $name, $color in keywords($args) | ||||
808 | pre span.stx-#{$name} | ||||
809 | color: $color | ||||
810 | | ||||
811 | @include syntax-colors($string: #080, $comment: #800, $variable: #60b); | ||||
812 | | ||||
813 | $font-weights: ("regular": 400, "medium": 500, "bold": 700) | ||||
814 | | ||||
815 | @debug map-values($font-weights) // 400, 500, 700 | ||||
816 | | ||||
817 | .icon-#{$name} | ||||
818 | position: absolute | ||||
819 | #{$top-or-bottom}: 0 | ||||
820 | -#{$prefix}-#{$property}: $value | ||||
821 | .icon-#{$name} | ||||
822 | position: absolute | ||||
823 | #{$top-or-bottom}: 0 | ||||
824 | -#{$prefix}-#{$property}-image: $value |