Warning, /frameworks/syntax-highlighting/autotests/folding/highlight.sass.fold is written in an unsupported language. File is not indexed.
0001 <indentfold>html, 0002 body, 0003 ul, 0004 ol 0005 margin: 0 0006 padding: 0 0007 0008 @import reset 0009 body 0010 font: 100% Helvetica, sans-serif 0011 background-color: #efefef 0012 0013 $font-stack: Helvetica, sans-serif 0014 $primary-color: #333 0015 0016 body 0017 font: 100% $font-stack 0018 color: $primary-color 0019 .container 0020 width: 100% 0021 0022 article[role="main"] 0023 float: left 0024 width: 600px / 960px * 100% 0025 0026 %message-shared 0027 border: 1px solid #ccc 0028 padding: 10px 0029 color: #333 0030 0031 .message 0032 @extend %message-shared 0033 0034 .success 0035 @extend %message-shared 0036 border-color: green 0037 0038 =transform($property) 0039 -webkit-transform: $property 0040 -ms-transform: $property 0041 transform: $property 0042 .box 0043 +transform(rotate(30deg)) 0044 0045 // This comment won't be included in the CSS. 0046 This is also commented out. 0047 #a 0048 /* But this comment will, except in compressed mode. 0049 0050 /* It can also contain interpolation: 0051 1 + 1 = #{1 + 1} 0052 1 + 1 = #{1 + 1} 0053 1 + 1 = #{1 + 1} 0054 #a 0055 0056 // But this comment will, except in compressed mode. 0057 0058 // It can also contain interpolation: 0059 1 + 1 = #{1 + 1} 0060 1 + 1 = #{1 + 1} 0061 1 + 1 = #{1 + 1} 0062 #a 0063 0064 /*! This comment will be included even in compressed mode. 0065 0066 #a 0067 0068 /**/ 0069 0070 p .sans 0071 font: Helvetica, /* Inline comments must be closed. */ sans-serif 0072 0073 p .sans 0074 font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment 0075 0076 /// Computes an exponent. 0077 /// 0078 /// @param {number} $base 0079 /// The number to multiply by itself. 0080 /// @param {integer (unitless)} $exponent 0081 /// The number of `$base`s to multiply together. 0082 /// @return {number} `$base` to the power of `$exponent`. 0083 @function pow($base, $exponent) 0084 $result: 1 0085 @for $_ from 1 through $exponent 0086 $result: $result * $base 0087 0088 @return $result 0089 0090 $roboto-font-path: "../fonts/roboto" 0091 0092 @font-face 0093 // This is parsed as a normal function call that takes a quoted string. 0094 src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2") 0095 src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2") 0096 src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2") 0097 0098 font-family: "Roboto" 0099 font-weight: 100 0100 0101 .logo 0102 $width: 800px 0103 width: $width 0104 position: absolute 0105 left: calc(50% - #{$width / 2}) 0106 top: 0 0107 0108 $padding: 12px 0109 0110 .post 0111 // Since these max() calls don't use any Sass features other than 0112 // interpolation, they're compiled to CSS max() calls. 0113 padding-left: max(#{$padding}, env(safe-area-inset-left)) 0114 padding-right: max(#{$padding}, env(safe-area-inset-right)) 0115 0116 0117 .sidebar 0118 // Since these refer to a Sass variable without interpolation, they call 0119 // Sass's built-in max() function. 0120 padding-left: max($padding, 20px) 0121 padding-right: max($padding, 20px) 0122 0123 .circle 0124 $size: 100px 0125 width: $size 0126 height: $size 0127 border-radius: $size / 2 0128 0129 @mixin prefix($property, $value, $prefixes) 0130 @each $prefix in $prefixes 0131 -#{$prefix}-#{$property}: $value 0132 0133 #{$property}: $value 0134 0135 0136 .gray 0137 @include prefix(filter, grayscale(50%), moz webkit) 0138 0139 .enlarge 0140 font-size: 14px 0141 transition: 0142 property: font-size 0143 duration: 4s 0144 delay: 2s 0145 0146 &:hover 0147 font-size: 36px 0148 0149 .info-page 0150 margin: auto 0151 bottom: 10px 0152 top: 2px 0153 0154 $rounded-corners: false 0155 0156 .button 0157 border: 1px solid black 0158 border-radius: if($rounded-corners, 5px, null) 0159 0160 $primary: #81899b 0161 $accent: #ab2e 0162 $warn: #dfa612aa 0163 0164 :root 0165 --primary: #{$primary} 0166 --accent: #{$accent} 0167 --warn: #{$warn} 0168 0169 // Even though this looks like a Sass variable, it's valid CSS so it's not 0170 // evaluated. 0171 --consumed-by-js: $primary 0172 0173 $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto 0174 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas 0175 0176 :root 0177 --font-family-sans-serif: #{inspect($font-family-sans-serif)} 0178 --font-family-monospace: #{inspect($font-family-monospace)} 0179 0180 .alert 0181 // The parent selector can be used to add pseudo-classes to the outer 0182 // selector. 0183 &:hover 0184 font-weight: bold 0185 0186 0187 // It can also be used to style the outer selector in a certain context, such 0188 // as a body set to use a right-to-left language. 0189 [dir=rtl] & 0190 margin-left: 0 0191 margin-right: 10px 0192 0193 0194 // You can even use it as an argument to pseudo-class selectors. 0195 :not(&) 0196 opacity: 0.8 0197 0198 @mixin unify-parent($child) 0199 @at-root #{selector-unify(&, $child)} 0200 @content 0201 0202 0203 0204 .wrapper .field 0205 @include unify-parent("input") 0206 0207 @mixin app-background($color) 0208 #{if(&, '&.app-background', '.app-background')} 0209 background-color: $color 0210 color: rgba(#fff, 0.75) 0211 0212 @include app-background(#036) 0213 0214 .sidebar 0215 @include app-background(#c6538c) 0216 0217 .accordion 0218 max-width: 600px 0219 margin: 4rem auto 0220 0221 &__copy 0222 display: none 0223 padding: 1rem 1.5rem 2rem 1.5rem 0224 line-height: 1.6 0225 font-size: 14px 0226 0227 &--open 0228 display: block 0229 0230 0231 .alert:hover, %strong-alert 0232 font-weight: bold 0233 0234 %strong-alert:hover 0235 color: red 0236 0237 %toolbelt 0238 box-sizing: border-box 0239 border-top: 1px rgba(#000, .12) solid 0240 0241 &:hover 0242 border: 2px rgba(#000, .5) solid 0243 0244 .action-buttons 0245 @extend %toolbelt 0246 color: #4285f4 0247 0248 $border-dark: rgba($base-color, 0.88) 0249 $black: #000 !default 0250 $border-radius: 0.25rem !default 0251 $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default 0252 $box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default 0253 $border-radius: 0.1rem 0254 0255 @import 'library' 0256 0257 $global-variable: global value 0258 0259 // This would fail, because $local-variable isn't in scope: 0260 // local: $local-variable 0261 0262 $theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107) 0263 0264 .alert 0265 // Instead of $theme-color-#{warning} 0266 background-color: map-get($theme-colors, "warning") 0267 0268 @mixin corner-icon($name, $top-or-bottom, $left-or-right) 0269 .icon-#{$name} 0270 background-image: url("/icons/#{$name}.svg") 0271 position: absolute 0272 #{$top-or-bottom}: 0 0273 #{$left-or-right}: 0 0274 0275 @include corner-icon("mail", top, right) 0276 0277 @mixin inline-animation($duration) 0278 $name: inline-#{unique-id()} 0279 0280 @keyframes #{$name} 0281 @content 0282 0283 animation-name: $name 0284 animation-duration: $duration 0285 animation-iteration-count: infinite 0286 0287 0288 .pulse 0289 @include inline-animation(2s) 0290 from 0291 background-color: yellow 0292 to 0293 background-color: red 0294 0295 .example 0296 unquoted: #{"string"} 0297 0298 & & 0299 padding: 0300 bottom: 0 0301 left: 0 0302 0303 // style.sass 0304 @import 'foundation/code', 'foundation/lists' 0305 0306 @import "theme.css" 0307 @import "http://fonts.googleapis.com/css?family=Droid+Sans" 0308 @import url(theme) 0309 @import "landscape" screen and (orientation: landscape) 0310 0311 @mixin google-font($family) 0312 @import url("http://fonts.googleapis.com/css?family=#{$family}") 0313 0314 @include google-font("Droid Sans") 0315 0316 @mixin horizontal-list 0317 @include reset-list 0318 0319 li 0320 display: inline-block 0321 margin: 0322 left: -2px 0323 right: 2em 0324 0325 nav ul 0326 @include horizontal-list 0327 0328 @mixin rtl($property, $ltr-value, $rtl-value) 0329 #{$property}: $ltr-value 0330 0331 [dir=rtl] & 0332 #{$property}: $rtl-value 0333 0334 .sidebar 0335 @include rtl(float, left, right) 0336 0337 @mixin replace-text($image, $x: 50%, $y: 50%) 0338 text-indent: -99999em 0339 overflow: hidden 0340 text-align: left 0341 0342 background: 0343 image: $image 0344 repeat: no-repeat 0345 position: $x $y 0346 0347 .mail-icon 0348 @include replace-text(url("/images/mail.svg"), 0) 0349 0350 @include order(150px, "input.name", "input.address", "input.zip") 0351 0352 @mixin syntax-colors($args...) 0353 @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) 0354 0355 @each $name, $color in keywords($args) 0356 pre span.stx-#{$name} 0357 color: $color 0358 0359 @include syntax-colors($string: #080, $comment: #800, $variable: #60b) 0360 0361 @mixin media($types...) 0362 @each $type in $types 0363 @media #{$type} 0364 @content($type) 0365 0366 @include media(screen, print) using ($type) 0367 h1 0368 font-size: 40px 0369 @if $type == print 0370 font-family: Calluna 0371 0372 =reset-list 0373 margin: 0 0374 padding: 0 0375 list-style: none 0376 0377 =horizontal-list 0378 +reset-list 0379 0380 li 0381 display: inline-block 0382 margin: 0383 left: -2px 0384 right: 2em 0385 0386 nav ul 0387 +horizontal-list 0388 @function pow($base, $exponent) 0389 $result: 1 0390 @for $_ from 1 through $exponent 0391 $result: $result * $base 0392 0393 @return $result 0394 0395 .sidebar 0396 float: left 0397 margin-left: pow(4, 3) * 1px 0398 0399 @function sum($numbers...) 0400 $sum: 0 0401 @each $number in $numbers 0402 $sum: $sum + $number 0403 0404 @return $sum 0405 0406 .micro 0407 width: sum(50px, 30px, 100px) 0408 @function str-insert($string, $insert, $index) 0409 // Avoid making new strings if we don't need to. 0410 @if str-length($string) == 0 0411 @return $insert 0412 0413 $before: str-slice($string, 0, $index) 0414 $after: str-slice($string, $index) 0415 @return $before + $insert + $after 0416 0417 .error 0418 border: 1px #f00 0419 background-color: #fdd 0420 0421 &--serious 0422 @extend .error 0423 border-width: 3px 0424 0425 @mixin reflexive-position($property, $value) 0426 @if $property != left and $property != right 0427 @error "Property #{$property} must be either left or right." 0428 0429 $left-value: if($property == right, initial, $value) 0430 $right-value: if($property == right, $value, initial) 0431 0432 left: $left-value 0433 right: $right-value 0434 [dir=rtl] & 0435 left: $right-value 0436 right: $left-value 0437 0438 $known-prefixes: webkit, moz, ms, o 0439 0440 @mixin prefix($property, $value, $prefixes) 0441 @each $prefix in $prefixes 0442 @if not index($known-prefixes, $prefix) 0443 @warn "Unknown prefix #{$prefix}." 0444 0445 0446 -#{$prefix}-#{$property}: $value 0447 0448 #{$property}: $value 0449 0450 0451 .tilt 0452 // Oops, we typo'd "webkit" as "wekbit"! 0453 @include prefix(transform, rotate(15deg), wekbit ms) 0454 0455 @mixin inset-divider-offset($offset, $padding) 0456 $divider-offset: (2 * $padding) + $offset 0457 @debug "divider offset: #{$divider-offset}" 0458 0459 margin-left: $divider-offset 0460 width: calc(100% - #{$divider-offset}) 0461 0462 @mixin unify-parent($child) 0463 @at-root #{selector-unify(&, $child)} 0464 @content 0465 0466 0467 .square-av 0468 @include avatar(100px, $circle: false) 0469 .circle-av 0470 @include avatar(100px, $circle: true) 0471 0472 @mixin theme-colors($light-theme: true) 0473 @if $light-theme 0474 background-color: $light-background 0475 color: $light-text 0476 @else 0477 background-color: $dark-background 0478 color: $dark-text 0479 0480 .banner 0481 @include theme-colors($light-theme: true) 0482 body.dark & 0483 @include theme-colors($light-theme: false) 0484 0485 @mixin triangle($size, $color, $direction) 0486 height: 0 0487 width: 0 0488 0489 border-color: transparent 0490 border-style: solid 0491 border-width: $size / 2 0492 0493 @if $direction == up 0494 border-bottom-color: $color 0495 @else if $direction == right 0496 border-left-color: $color 0497 @else if $direction == down 0498 border-top-color: $color 0499 @else if $direction == left 0500 border-right-color: $color 0501 @else 0502 @error "Unknown direction #{$direction}." 0503 0504 @each $size in $sizes 0505 .icon-#{$size} 0506 font-size: $size 0507 height: $size 0508 width: $size 0509 0510 $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f") 0511 0512 @each $name, $glyph in $icons 0513 .icon-#{$name}:before 0514 display: inline-block 0515 font-family: "Icon Font" 0516 content: $glyph 0517 0518 $icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px 0519 0520 @each $name, $glyph, $size in $icons 0521 .icon-#{$name}:before 0522 display: inline-block 0523 font-family: "Icon Font" 0524 content: $glyph 0525 font-size: $size 0526 0527 @for $i from 1 through 3 0528 ul:nth-child(3n + #{$i}) 0529 background-color: lighten($base-color, $i * 5%) 0530 0531 /// Divides `$value` by `$ratio` until it's below `$base`. 0532 @function scale-below($value, $base, $ratio: 1.618) 0533 @while $value > $base 0534 $value: $value / $ratio 0535 @return $value 0536 0537 @namespace svg url(http://www.w3.org/2000/svg) 0538 0539 @font-face 0540 font-family: "Open Sans" 0541 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2") 0542 0543 @counter-style thumbs 0544 system: cyclic 0545 symbols: "\1F44D" 0546 0547 @mixin sticky-position 0548 position: fixed 0549 @supports (position: sticky) 0550 position: sticky 0551 0552 @media (hover: hover) 0553 .button:hover 0554 border: 2px solid black 0555 0556 @media (color) 0557 border-color: #036 0558 0559 @keyframes slide-in 0560 from 0561 margin-left: 100% 0562 width: 300% 0563 0564 0565 70% 0566 margin-left: 90% 0567 width: 150% 0568 0569 0570 to 0571 margin-left: 0% 0572 width: 100% 0573 0574 @debug 100 // 100 0575 @debug 0.8 // 0.8 0576 @debug 16px // 16px 0577 @debug 5px * 2px // 10px*px (read "square pixels") 0578 @debug 5.2e3 // 5200 0579 @debug 6e-2 // 0.06 0580 @debug 4px * 6px // 24px*px (read "square pixels") 0581 @debug 5px / 2s // 2.5px/s (read "pixels per second") 0582 @debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em 0583 // (read "pixel-degrees per second-em") 0584 0585 $degrees-per-second: 20deg/1s 0586 @debug $degrees-per-second // 20deg/s 0587 @debug 1 / $degrees-per-second // 0.05s/deg 0588 $transition-speed: 1s/50px 0589 0590 @debug unquote(".widget:hover") // .widget:hover 0591 @debug quote(bold) // "bold" 0592 @debug 0.012345678912345 // 0.0123456789 0593 @debug 0.01234567891 == 0.01234567899 // true 0594 @debug 1.00000000009 // 1 0595 @debug 0.99999999991 // 1 0596 @debug "\"" // '"' 0597 @debug \.widget // \.widget 0598 @debug "\a" // "\a" (a string containing only a newline) 0599 @debug "line1\a line2" // "line1\a line2" (foo and bar are separated by a newline) 0600 @debug "Nat + Liz \1F46D" // "Nat + Liz ðŸ‘" 0601 @debug "Helvetica Neue" // "Helvetica Neue" 0602 @debug "C:\\Program Files" // "C:\\Program Files" 0603 @debug "\"Don't Fear the Reaper\"" // "\"Don't Fear the Reaper\"" 0604 @debug "line1\a line2" // "line1\a line2" 0605 0606 $roboto-variant: "Mono" 0607 @debug "Roboto #{$roboto-variant}" // "Roboto Mono" 0608 @debug bold // bold 0609 @debug -webkit-flex // -webkit-flex 0610 @debug --123 // --123 0611 0612 $prefix: ms 0613 @debug -#{$prefix}-flex // -ms-flex 0614 @debug \1F46D // 👠0615 @debug \21 // \! 0616 @debug \7Fx // \7f x 0617 @debug str-length(\7Fx) // 5 0618 @debug str-index("Helvetica Neue", "Helvetica") // 1 0619 @debug str-index("Helvetica Neue", "Neue") // 11 0620 @debug str-slice("Roboto Mono", -4) // "Mono" 0621 @debug #f2ece4 // #f2ece4 0622 @debug #b37399aa // rgba(179, 115, 153, 67%) 0623 @debug midnightblue // #191970 0624 @debug rgb(204, 102, 153) // #c69 0625 @debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8) 0626 @debug hsl(228, 7%, 86%) // #dadbdf 0627 @debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7) 0628 $venus: #998099 0629 0630 @debug scale-color($venus, $lightness: +15%) // #a893a8 0631 @debug mix($venus, midnightblue) // #594d85 0632 @debug nth(10px 12px 16px, 2) // 12px 0633 @debug nth([line1, line2, line3], -1) // line3 0634 $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms) 0635 0636 @function prefixes-for-browsers($browsers) 0637 $prefixes: () 0638 @each $browser in $browsers 0639 $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser)) 0640 0641 @return $prefixes 0642 0643 @debug prefixes-for-browsers("firefox" "ie") // moz ms 0644 @mixin syntax-colors($args...) 0645 @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) 0646 0647 @each $name, $color in keywords($args) 0648 pre span.stx-#{$name} 0649 color: $color 0650 0651 @include syntax-colors($string: #080, $comment: #800, $variable: #60b); 0652 $font-weights: ("regular": 400, "medium": 500, "bold": 700) 0653 0654 @debug map-get($font-weights, "medium") // 500 0655 @debug map-get($font-weights, "extra-bold") // null 0656 $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f") 0657 0658 @each $name, $glyph in $icons 0659 .icon-#{$name}:before 0660 display: inline-block 0661 font-family: "Icon Font" 0662 content: $glyph 0663 0664 $prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms) 0665 0666 @mixin add-browser-prefix($browser, $prefix) 0667 $prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix)) 0668 0669 @include add-browser-prefix("opera", o) 0670 @debug $prefixes-by-browser 0671 // ("firefox": moz, "safari": webkit, "ie": ms, "opera": o) 0672 @debug 1px == 2px // false 0673 @debug 1px == 1px // true 0674 @debug 10px < 3px // false 0675 @debug comparable(100px, 3in) // true 0676 0677 @debug str-index("Helvetica Neue", "Roboto") // null 0678 @debug map-get(("large": 20px), "small") // null 0679 @debug & // null 0680 $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas") 0681 0682 h3 0683 font: 18px bold map-get($fonts, "sans") 0684 0685 $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas") 0686 0687 h3 0688 font: 0689 size: 18px 0690 weight: bold 0691 family: map-get($fonts, "sans") 0692 0693 copy of $list with all elements for which $condition returns `true` 0694 /// removed. 0695 @function remove-where($list, $condition) 0696 $new-list: () 0697 $separator: list-separator($list) 0698 @each $element in $list 0699 @if not call($condition, $element) 0700 $new-list: append($new-list, $element, $separator: $separator) 0701 0702 @return $new-list 0703 0704 $fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif 0705 0706 content 0707 @function contains-helvetica($string) 0708 @return str-index($string, "Helvetica") 0709 0710 font-family: remove-where($fonts, get-function("contains-helvetica")) 0711 0712 @debug 1px == 1px // true 0713 @debug 1px != 1em // true 0714 @debug 1 != 1px // true 0715 @debug 96px == 1in // true 0716 0717 @debug "Helvetica" == Helvetica // true 0718 @debug "Helvetica" != "Arial" // true 0719 0720 @debug hsl(34, 35%, 92.1%) == #f2ece4 // true 0721 @debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8) // true 0722 0723 @debug (5px 7px 10px) == (5px 7px 10px) // true 0724 @debug (5px 7px 10px) != (10px 14px 20px) // true 0725 @debug (5px 7px 10px) != (5px, 7px, 10px) // true 0726 @debug (5px 7px 10px) != [5px 7px 10px] // true 0727 0728 $theme: ("venus": #998099, "nebula": #d2e1dd) 0729 @debug $theme == ("venus": #998099, "nebula": #d2e1dd) // true 0730 @debug $theme != ("venus": #998099, "iron": #dadbdf) // true 0731 0732 @debug true == true // true 0733 @debug true != false // true 0734 @debug null != false // true 0735 0736 @debug get-function("rgba") == get-function("rgba") // true 0737 @debug get-function("rgba") != get-function("hsla") // true 0738 0739 @debug 10s + 15s // 25s 0740 @debug 1in - 10px // 0.8958333333in 0741 @debug 5px * 3px // 15px*px 0742 @debug (12px/4px) // 3 0743 @debug 1in % 9px // 0.0625in 0744 @debug 15px / 30px // 15px/30px 0745 @debug (10px + 5px) / 30px // 0.5 0746 0747 $result: 15px / 30px 0748 @debug $result // 0.5 0749 0750 @function fifteen-divided-by-thirty() 0751 @return 15px / 30px 0752 0753 @debug fifteen-divided-by-thirty() // 0.5 0754 0755 @debug (15px/30px) // 0.5 0756 @debug (bold 15px/30px sans-serif) // bold 15px/30px sans-serif 0757 @debug 15px/30px + 1 // 1.5 0758 0759 @debug 4px * 6px // 24px*px (read "square pixels") 0760 @debug 5px / 2s // 2.5px/s (read "pixels per second") 0761 @debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em 0762 // (read "pixel-degrees per second-em") 0763 0764 $degrees-per-second: 20deg/1s 0765 @debug $degrees-per-second // 20deg/s 0766 @debug 1 / $degrees-per-second // 0.05s/deg 0767 @debug 100 > 50 // true 0768 @debug 10px < 17px // true 0769 @debug 96px >= 1in // true 0770 @debug 1000ms <= 1s // true 0771 @debug "Helvetica" + " Neue" // "Helvetica Neue" 0772 @debug sans- + serif // sans-serif 0773 @debug #{10px + 5px} / 30px // 15px/30px 0774 @debug sans - serif // sans-serif 0775 0776 @debug "Elapsed time: " + 10s // "Elapsed time: 10s"; 0777 @debug true + " is a boolean value" // "true is a boolean value"; 0778 0779 @debug / 15px // /15px 0780 @debug - moz // -moz 0781 @debug not true // false 0782 @debug not false // true 0783 0784 @debug true and true // true 0785 @debug true and false // false 0786 0787 @debug true or false // true 0788 @debug false or false // false 0789 @debug var(--main-bg-color) // var(--main-bg-color) 0790 0791 $primary: #f2ece4 0792 $accent: #e1d7d2 0793 @debug radial-gradient($primary, $accent) // radial-gradient(#f2ece4, #e1d7d2) 0794 @debug str-index("Helvetica Neue", "Helvetica") // 1 0795 @debug str-index("Helvetica Neue", "Neue") // 11 0796 @debug comparable(2px, 1px) // true 0797 @debug comparable(100px, 3em) // false 0798 @debug comparable(10cm, 3mm) // true 0799 @debug append(10px 20px, 30px) // 10px 20px 30px 0800 @debug append((blue, red), green) // blue, red, green 0801 @debug append(10px 20px, 30px 40px) // 10px 20px (30px 40px) 0802 @debug append(10px, 20px, $separator: comma) // 10px, 20px 0803 @debug append((blue, red), green, $separator: space) // blue red green 0804 @mixin syntax-colors($args...) 0805 @debug keywords($args) // (string: #080, comment: #800, $variable: $60b) 0806 0807 @each $name, $color in keywords($args) 0808 pre span.stx-#{$name} 0809 color: $color 0810 0811 @include syntax-colors($string: #080, $comment: #800, $variable: #60b); 0812 0813 $font-weights: ("regular": 400, "medium": 500, "bold": 700) 0814 0815 @debug map-values($font-weights) // 400, 500, 700 0816 0817 .icon-#{$name} 0818 position: absolute 0819 #{$top-or-bottom}: 0 0820 -#{$prefix}-#{$property}: $value 0821 .icon-#{$name} 0822 position: absolute 0823 #{$top-or-bottom}: 0 0824 -#{$prefix}-#{$property}-image: $value