1html, 2body, 3ul, 4ol 5 margin: 0 6 padding: 0 7 8@import reset 9body 10 font: 100% Helvetica, sans-serif 11 background-color: #efefef 12 13$font-stack: Helvetica, sans-serif 14$primary-color: #333 15 16body 17 font: 100% $font-stack 18 color: $primary-color 19.container 20 width: 100% 21 22article[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 70p .sans 71 font: Helvetica, /* Inline comments must be closed. */ sans-serif 72 73p .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 325nav 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 386nav 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 682h3 683 font: 18px bold map-get($fonts, "sans") 684 685$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas") 686 687h3 688 font: 689 size: 18px 690 weight: bold 691 family: map-get($fonts, "sans") 692 693copy 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 706content 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 825
