825 lines
19 KiB
Sass
825 lines
19 KiB
Sass
html,
|
|
body,
|
|
ul,
|
|
ol
|
|
margin: 0
|
|
padding: 0
|
|
|
|
@import reset
|
|
body
|
|
font: 100% Helvetica, sans-serif
|
|
background-color: #efefef
|
|
|
|
$font-stack: Helvetica, sans-serif
|
|
$primary-color: #333
|
|
|
|
body
|
|
font: 100% $font-stack
|
|
color: $primary-color
|
|
.container
|
|
width: 100%
|
|
|
|
article[role="main"]
|
|
float: left
|
|
width: 600px / 960px * 100%
|
|
|
|
%message-shared
|
|
border: 1px solid #ccc
|
|
padding: 10px
|
|
color: #333
|
|
|
|
.message
|
|
@extend %message-shared
|
|
|
|
.success
|
|
@extend %message-shared
|
|
border-color: green
|
|
|
|
=transform($property)
|
|
-webkit-transform: $property
|
|
-ms-transform: $property
|
|
transform: $property
|
|
.box
|
|
+transform(rotate(30deg))
|
|
|
|
// This comment won't be included in the CSS.
|
|
This is also commented out.
|
|
#a
|
|
/* But this comment will, except in compressed mode.
|
|
|
|
/* It can also contain interpolation:
|
|
1 + 1 = #{1 + 1}
|
|
1 + 1 = #{1 + 1}
|
|
1 + 1 = #{1 + 1}
|
|
#a
|
|
|
|
// But this comment will, except in compressed mode.
|
|
|
|
// It can also contain interpolation:
|
|
1 + 1 = #{1 + 1}
|
|
1 + 1 = #{1 + 1}
|
|
1 + 1 = #{1 + 1}
|
|
#a
|
|
|
|
/*! This comment will be included even in compressed mode.
|
|
|
|
#a
|
|
|
|
/**/
|
|
|
|
p .sans
|
|
font: Helvetica, /* Inline comments must be closed. */ sans-serif
|
|
|
|
p .sans
|
|
font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment
|
|
|
|
/// Computes an exponent.
|
|
///
|
|
/// @param {number} $base
|
|
/// The number to multiply by itself.
|
|
/// @param {integer (unitless)} $exponent
|
|
/// The number of `$base`s to multiply together.
|
|
/// @return {number} `$base` to the power of `$exponent`.
|
|
@function pow($base, $exponent)
|
|
$result: 1
|
|
@for $_ from 1 through $exponent
|
|
$result: $result * $base
|
|
|
|
@return $result
|
|
|
|
$roboto-font-path: "../fonts/roboto"
|
|
|
|
@font-face
|
|
// This is parsed as a normal function call that takes a quoted string.
|
|
src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")
|
|
src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")
|
|
src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")
|
|
|
|
font-family: "Roboto"
|
|
font-weight: 100
|
|
|
|
.logo
|
|
$width: 800px
|
|
width: $width
|
|
position: absolute
|
|
left: calc(50% - #{$width / 2})
|
|
top: 0
|
|
|
|
$padding: 12px
|
|
|
|
.post
|
|
// Since these max() calls don't use any Sass features other than
|
|
// interpolation, they're compiled to CSS max() calls.
|
|
padding-left: max(#{$padding}, env(safe-area-inset-left))
|
|
padding-right: max(#{$padding}, env(safe-area-inset-right))
|
|
|
|
|
|
.sidebar
|
|
// Since these refer to a Sass variable without interpolation, they call
|
|
// Sass's built-in max() function.
|
|
padding-left: max($padding, 20px)
|
|
padding-right: max($padding, 20px)
|
|
|
|
.circle
|
|
$size: 100px
|
|
width: $size
|
|
height: $size
|
|
border-radius: $size / 2
|
|
|
|
@mixin prefix($property, $value, $prefixes)
|
|
@each $prefix in $prefixes
|
|
-#{$prefix}-#{$property}: $value
|
|
|
|
#{$property}: $value
|
|
|
|
|
|
.gray
|
|
@include prefix(filter, grayscale(50%), moz webkit)
|
|
|
|
.enlarge
|
|
font-size: 14px
|
|
transition:
|
|
property: font-size
|
|
duration: 4s
|
|
delay: 2s
|
|
|
|
&:hover
|
|
font-size: 36px
|
|
|
|
.info-page
|
|
margin: auto
|
|
bottom: 10px
|
|
top: 2px
|
|
|
|
$rounded-corners: false
|
|
|
|
.button
|
|
border: 1px solid black
|
|
border-radius: if($rounded-corners, 5px, null)
|
|
|
|
$primary: #81899b
|
|
$accent: #ab2e
|
|
$warn: #dfa612aa
|
|
|
|
:root
|
|
--primary: #{$primary}
|
|
--accent: #{$accent}
|
|
--warn: #{$warn}
|
|
|
|
// Even though this looks like a Sass variable, it's valid CSS so it's not
|
|
// evaluated.
|
|
--consumed-by-js: $primary
|
|
|
|
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
|
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas
|
|
|
|
:root
|
|
--font-family-sans-serif: #{inspect($font-family-sans-serif)}
|
|
--font-family-monospace: #{inspect($font-family-monospace)}
|
|
|
|
.alert
|
|
// The parent selector can be used to add pseudo-classes to the outer
|
|
// selector.
|
|
&:hover
|
|
font-weight: bold
|
|
|
|
|
|
// It can also be used to style the outer selector in a certain context, such
|
|
// as a body set to use a right-to-left language.
|
|
[dir=rtl] &
|
|
margin-left: 0
|
|
margin-right: 10px
|
|
|
|
|
|
// You can even use it as an argument to pseudo-class selectors.
|
|
:not(&)
|
|
opacity: 0.8
|
|
|
|
@mixin unify-parent($child)
|
|
@at-root #{selector-unify(&, $child)}
|
|
@content
|
|
|
|
|
|
|
|
.wrapper .field
|
|
@include unify-parent("input")
|
|
|
|
@mixin app-background($color)
|
|
#{if(&, '&.app-background', '.app-background')}
|
|
background-color: $color
|
|
color: rgba(#fff, 0.75)
|
|
|
|
@include app-background(#036)
|
|
|
|
.sidebar
|
|
@include app-background(#c6538c)
|
|
|
|
.accordion
|
|
max-width: 600px
|
|
margin: 4rem auto
|
|
|
|
&__copy
|
|
display: none
|
|
padding: 1rem 1.5rem 2rem 1.5rem
|
|
line-height: 1.6
|
|
font-size: 14px
|
|
|
|
&--open
|
|
display: block
|
|
|
|
|
|
.alert:hover, %strong-alert
|
|
font-weight: bold
|
|
|
|
%strong-alert:hover
|
|
color: red
|
|
|
|
%toolbelt
|
|
box-sizing: border-box
|
|
border-top: 1px rgba(#000, .12) solid
|
|
|
|
&:hover
|
|
border: 2px rgba(#000, .5) solid
|
|
|
|
.action-buttons
|
|
@extend %toolbelt
|
|
color: #4285f4
|
|
|
|
$border-dark: rgba($base-color, 0.88)
|
|
$black: #000 !default
|
|
$border-radius: 0.25rem !default
|
|
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default
|
|
$box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default
|
|
$border-radius: 0.1rem
|
|
|
|
@import 'library'
|
|
|
|
$global-variable: global value
|
|
|
|
// This would fail, because $local-variable isn't in scope:
|
|
// local: $local-variable
|
|
|
|
$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)
|
|
|
|
.alert
|
|
// Instead of $theme-color-#{warning}
|
|
background-color: map-get($theme-colors, "warning")
|
|
|
|
@mixin corner-icon($name, $top-or-bottom, $left-or-right)
|
|
.icon-#{$name}
|
|
background-image: url("/icons/#{$name}.svg")
|
|
position: absolute
|
|
#{$top-or-bottom}: 0
|
|
#{$left-or-right}: 0
|
|
|
|
@include corner-icon("mail", top, right)
|
|
|
|
@mixin inline-animation($duration)
|
|
$name: inline-#{unique-id()}
|
|
|
|
@keyframes #{$name}
|
|
@content
|
|
|
|
animation-name: $name
|
|
animation-duration: $duration
|
|
animation-iteration-count: infinite
|
|
|
|
|
|
.pulse
|
|
@include inline-animation(2s)
|
|
from
|
|
background-color: yellow
|
|
to
|
|
background-color: red
|
|
|
|
.example
|
|
unquoted: #{"string"}
|
|
|
|
& &
|
|
padding:
|
|
bottom: 0
|
|
left: 0
|
|
|
|
// style.sass
|
|
@import 'foundation/code', 'foundation/lists'
|
|
|
|
@import "theme.css"
|
|
@import "http://fonts.googleapis.com/css?family=Droid+Sans"
|
|
@import url(theme)
|
|
@import "landscape" screen and (orientation: landscape)
|
|
|
|
@mixin google-font($family)
|
|
@import url("http://fonts.googleapis.com/css?family=#{$family}")
|
|
|
|
@include google-font("Droid Sans")
|
|
|
|
@mixin horizontal-list
|
|
@include reset-list
|
|
|
|
li
|
|
display: inline-block
|
|
margin:
|
|
left: -2px
|
|
right: 2em
|
|
|
|
nav ul
|
|
@include horizontal-list
|
|
|
|
@mixin rtl($property, $ltr-value, $rtl-value)
|
|
#{$property}: $ltr-value
|
|
|
|
[dir=rtl] &
|
|
#{$property}: $rtl-value
|
|
|
|
.sidebar
|
|
@include rtl(float, left, right)
|
|
|
|
@mixin replace-text($image, $x: 50%, $y: 50%)
|
|
text-indent: -99999em
|
|
overflow: hidden
|
|
text-align: left
|
|
|
|
background:
|
|
image: $image
|
|
repeat: no-repeat
|
|
position: $x $y
|
|
|
|
.mail-icon
|
|
@include replace-text(url("/images/mail.svg"), 0)
|
|
|
|
@include order(150px, "input.name", "input.address", "input.zip")
|
|
|
|
@mixin syntax-colors($args...)
|
|
@debug keywords($args) // (string: #080, comment: #800, $variable: $60b)
|
|
|
|
@each $name, $color in keywords($args)
|
|
pre span.stx-#{$name}
|
|
color: $color
|
|
|
|
@include syntax-colors($string: #080, $comment: #800, $variable: #60b)
|
|
|
|
@mixin media($types...)
|
|
@each $type in $types
|
|
@media #{$type}
|
|
@content($type)
|
|
|
|
@include media(screen, print) using ($type)
|
|
h1
|
|
font-size: 40px
|
|
@if $type == print
|
|
font-family: Calluna
|
|
|
|
=reset-list
|
|
margin: 0
|
|
padding: 0
|
|
list-style: none
|
|
|
|
=horizontal-list
|
|
+reset-list
|
|
|
|
li
|
|
display: inline-block
|
|
margin:
|
|
left: -2px
|
|
right: 2em
|
|
|
|
nav ul
|
|
+horizontal-list
|
|
@function pow($base, $exponent)
|
|
$result: 1
|
|
@for $_ from 1 through $exponent
|
|
$result: $result * $base
|
|
|
|
@return $result
|
|
|
|
.sidebar
|
|
float: left
|
|
margin-left: pow(4, 3) * 1px
|
|
|
|
@function sum($numbers...)
|
|
$sum: 0
|
|
@each $number in $numbers
|
|
$sum: $sum + $number
|
|
|
|
@return $sum
|
|
|
|
.micro
|
|
width: sum(50px, 30px, 100px)
|
|
@function str-insert($string, $insert, $index)
|
|
// Avoid making new strings if we don't need to.
|
|
@if str-length($string) == 0
|
|
@return $insert
|
|
|
|
$before: str-slice($string, 0, $index)
|
|
$after: str-slice($string, $index)
|
|
@return $before + $insert + $after
|
|
|
|
.error
|
|
border: 1px #f00
|
|
background-color: #fdd
|
|
|
|
&--serious
|
|
@extend .error
|
|
border-width: 3px
|
|
|
|
@mixin reflexive-position($property, $value)
|
|
@if $property != left and $property != right
|
|
@error "Property #{$property} must be either left or right."
|
|
|
|
$left-value: if($property == right, initial, $value)
|
|
$right-value: if($property == right, $value, initial)
|
|
|
|
left: $left-value
|
|
right: $right-value
|
|
[dir=rtl] &
|
|
left: $right-value
|
|
right: $left-value
|
|
|
|
$known-prefixes: webkit, moz, ms, o
|
|
|
|
@mixin prefix($property, $value, $prefixes)
|
|
@each $prefix in $prefixes
|
|
@if not index($known-prefixes, $prefix)
|
|
@warn "Unknown prefix #{$prefix}."
|
|
|
|
|
|
-#{$prefix}-#{$property}: $value
|
|
|
|
#{$property}: $value
|
|
|
|
|
|
.tilt
|
|
// Oops, we typo'd "webkit" as "wekbit"!
|
|
@include prefix(transform, rotate(15deg), wekbit ms)
|
|
|
|
@mixin inset-divider-offset($offset, $padding)
|
|
$divider-offset: (2 * $padding) + $offset
|
|
@debug "divider offset: #{$divider-offset}"
|
|
|
|
margin-left: $divider-offset
|
|
width: calc(100% - #{$divider-offset})
|
|
|
|
@mixin unify-parent($child)
|
|
@at-root #{selector-unify(&, $child)}
|
|
@content
|
|
|
|
|
|
.square-av
|
|
@include avatar(100px, $circle: false)
|
|
.circle-av
|
|
@include avatar(100px, $circle: true)
|
|
|
|
@mixin theme-colors($light-theme: true)
|
|
@if $light-theme
|
|
background-color: $light-background
|
|
color: $light-text
|
|
@else
|
|
background-color: $dark-background
|
|
color: $dark-text
|
|
|
|
.banner
|
|
@include theme-colors($light-theme: true)
|
|
body.dark &
|
|
@include theme-colors($light-theme: false)
|
|
|
|
@mixin triangle($size, $color, $direction)
|
|
height: 0
|
|
width: 0
|
|
|
|
border-color: transparent
|
|
border-style: solid
|
|
border-width: $size / 2
|
|
|
|
@if $direction == up
|
|
border-bottom-color: $color
|
|
@else if $direction == right
|
|
border-left-color: $color
|
|
@else if $direction == down
|
|
border-top-color: $color
|
|
@else if $direction == left
|
|
border-right-color: $color
|
|
@else
|
|
@error "Unknown direction #{$direction}."
|
|
|
|
@each $size in $sizes
|
|
.icon-#{$size}
|
|
font-size: $size
|
|
height: $size
|
|
width: $size
|
|
|
|
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
|
|
|
|
@each $name, $glyph in $icons
|
|
.icon-#{$name}:before
|
|
display: inline-block
|
|
font-family: "Icon Font"
|
|
content: $glyph
|
|
|
|
$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px
|
|
|
|
@each $name, $glyph, $size in $icons
|
|
.icon-#{$name}:before
|
|
display: inline-block
|
|
font-family: "Icon Font"
|
|
content: $glyph
|
|
font-size: $size
|
|
|
|
@for $i from 1 through 3
|
|
ul:nth-child(3n + #{$i})
|
|
background-color: lighten($base-color, $i * 5%)
|
|
|
|
/// Divides `$value` by `$ratio` until it's below `$base`.
|
|
@function scale-below($value, $base, $ratio: 1.618)
|
|
@while $value > $base
|
|
$value: $value / $ratio
|
|
@return $value
|
|
|
|
@namespace svg url(http://www.w3.org/2000/svg)
|
|
|
|
@font-face
|
|
font-family: "Open Sans"
|
|
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
|
|
|
|
@counter-style thumbs
|
|
system: cyclic
|
|
symbols: "\1F44D"
|
|
|
|
@mixin sticky-position
|
|
position: fixed
|
|
@supports (position: sticky)
|
|
position: sticky
|
|
|
|
@media (hover: hover)
|
|
.button:hover
|
|
border: 2px solid black
|
|
|
|
@media (color)
|
|
border-color: #036
|
|
|
|
@keyframes slide-in
|
|
from
|
|
margin-left: 100%
|
|
width: 300%
|
|
|
|
|
|
70%
|
|
margin-left: 90%
|
|
width: 150%
|
|
|
|
|
|
to
|
|
margin-left: 0%
|
|
width: 100%
|
|
|
|
@debug 100 // 100
|
|
@debug 0.8 // 0.8
|
|
@debug 16px // 16px
|
|
@debug 5px * 2px // 10px*px (read "square pixels")
|
|
@debug 5.2e3 // 5200
|
|
@debug 6e-2 // 0.06
|
|
@debug 4px * 6px // 24px*px (read "square pixels")
|
|
@debug 5px / 2s // 2.5px/s (read "pixels per second")
|
|
@debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em
|
|
// (read "pixel-degrees per second-em")
|
|
|
|
$degrees-per-second: 20deg/1s
|
|
@debug $degrees-per-second // 20deg/s
|
|
@debug 1 / $degrees-per-second // 0.05s/deg
|
|
$transition-speed: 1s/50px
|
|
|
|
@debug unquote(".widget:hover") // .widget:hover
|
|
@debug quote(bold) // "bold"
|
|
@debug 0.012345678912345 // 0.0123456789
|
|
@debug 0.01234567891 == 0.01234567899 // true
|
|
@debug 1.00000000009 // 1
|
|
@debug 0.99999999991 // 1
|
|
@debug "\"" // '"'
|
|
@debug \.widget // \.widget
|
|
@debug "\a" // "\a" (a string containing only a newline)
|
|
@debug "line1\a line2" // "line1\a line2" (foo and bar are separated by a newline)
|
|
@debug "Nat + Liz \1F46D" // "Nat + Liz 👭"
|
|
@debug "Helvetica Neue" // "Helvetica Neue"
|
|
@debug "C:\\Program Files" // "C:\\Program Files"
|
|
@debug "\"Don't Fear the Reaper\"" // "\"Don't Fear the Reaper\""
|
|
@debug "line1\a line2" // "line1\a line2"
|
|
|
|
$roboto-variant: "Mono"
|
|
@debug "Roboto #{$roboto-variant}" // "Roboto Mono"
|
|
@debug bold // bold
|
|
@debug -webkit-flex // -webkit-flex
|
|
@debug --123 // --123
|
|
|
|
$prefix: ms
|
|
@debug -#{$prefix}-flex // -ms-flex
|
|
@debug \1F46D // 👭
|
|
@debug \21 // \!
|
|
@debug \7Fx // \7f x
|
|
@debug str-length(\7Fx) // 5
|
|
@debug str-index("Helvetica Neue", "Helvetica") // 1
|
|
@debug str-index("Helvetica Neue", "Neue") // 11
|
|
@debug str-slice("Roboto Mono", -4) // "Mono"
|
|
@debug #f2ece4 // #f2ece4
|
|
@debug #b37399aa // rgba(179, 115, 153, 67%)
|
|
@debug midnightblue // #191970
|
|
@debug rgb(204, 102, 153) // #c69
|
|
@debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8)
|
|
@debug hsl(228, 7%, 86%) // #dadbdf
|
|
@debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7)
|
|
$venus: #998099
|
|
|
|
@debug scale-color($venus, $lightness: +15%) // #a893a8
|
|
@debug mix($venus, midnightblue) // #594d85
|
|
@debug nth(10px 12px 16px, 2) // 12px
|
|
@debug nth([line1, line2, line3], -1) // line3
|
|
$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
|
|
|
|
@function prefixes-for-browsers($browsers)
|
|
$prefixes: ()
|
|
@each $browser in $browsers
|
|
$prefixes: append($prefixes, map-get($prefixes-by-browser, $browser))
|
|
|
|
@return $prefixes
|
|
|
|
@debug prefixes-for-browsers("firefox" "ie") // moz ms
|
|
@mixin syntax-colors($args...)
|
|
@debug keywords($args) // (string: #080, comment: #800, $variable: $60b)
|
|
|
|
@each $name, $color in keywords($args)
|
|
pre span.stx-#{$name}
|
|
color: $color
|
|
|
|
@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
|
|
$font-weights: ("regular": 400, "medium": 500, "bold": 700)
|
|
|
|
@debug map-get($font-weights, "medium") // 500
|
|
@debug map-get($font-weights, "extra-bold") // null
|
|
$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
|
|
|
|
@each $name, $glyph in $icons
|
|
.icon-#{$name}:before
|
|
display: inline-block
|
|
font-family: "Icon Font"
|
|
content: $glyph
|
|
|
|
$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
|
|
|
|
@mixin add-browser-prefix($browser, $prefix)
|
|
$prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix))
|
|
|
|
@include add-browser-prefix("opera", o)
|
|
@debug $prefixes-by-browser
|
|
// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
|
|
@debug 1px == 2px // false
|
|
@debug 1px == 1px // true
|
|
@debug 10px < 3px // false
|
|
@debug comparable(100px, 3in) // true
|
|
|
|
@debug str-index("Helvetica Neue", "Roboto") // null
|
|
@debug map-get(("large": 20px), "small") // null
|
|
@debug & // null
|
|
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
|
|
|
|
h3
|
|
font: 18px bold map-get($fonts, "sans")
|
|
|
|
$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
|
|
|
|
h3
|
|
font:
|
|
size: 18px
|
|
weight: bold
|
|
family: map-get($fonts, "sans")
|
|
|
|
copy of $list with all elements for which $condition returns `true`
|
|
/// removed.
|
|
@function remove-where($list, $condition)
|
|
$new-list: ()
|
|
$separator: list-separator($list)
|
|
@each $element in $list
|
|
@if not call($condition, $element)
|
|
$new-list: append($new-list, $element, $separator: $separator)
|
|
|
|
@return $new-list
|
|
|
|
$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
|
|
|
|
content
|
|
@function contains-helvetica($string)
|
|
@return str-index($string, "Helvetica")
|
|
|
|
font-family: remove-where($fonts, get-function("contains-helvetica"))
|
|
|
|
@debug 1px == 1px // true
|
|
@debug 1px != 1em // true
|
|
@debug 1 != 1px // true
|
|
@debug 96px == 1in // true
|
|
|
|
@debug "Helvetica" == Helvetica // true
|
|
@debug "Helvetica" != "Arial" // true
|
|
|
|
@debug hsl(34, 35%, 92.1%) == #f2ece4 // true
|
|
@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8) // true
|
|
|
|
@debug (5px 7px 10px) == (5px 7px 10px) // true
|
|
@debug (5px 7px 10px) != (10px 14px 20px) // true
|
|
@debug (5px 7px 10px) != (5px, 7px, 10px) // true
|
|
@debug (5px 7px 10px) != [5px 7px 10px] // true
|
|
|
|
$theme: ("venus": #998099, "nebula": #d2e1dd)
|
|
@debug $theme == ("venus": #998099, "nebula": #d2e1dd) // true
|
|
@debug $theme != ("venus": #998099, "iron": #dadbdf) // true
|
|
|
|
@debug true == true // true
|
|
@debug true != false // true
|
|
@debug null != false // true
|
|
|
|
@debug get-function("rgba") == get-function("rgba") // true
|
|
@debug get-function("rgba") != get-function("hsla") // true
|
|
|
|
@debug 10s + 15s // 25s
|
|
@debug 1in - 10px // 0.8958333333in
|
|
@debug 5px * 3px // 15px*px
|
|
@debug (12px/4px) // 3
|
|
@debug 1in % 9px // 0.0625in
|
|
@debug 15px / 30px // 15px/30px
|
|
@debug (10px + 5px) / 30px // 0.5
|
|
|
|
$result: 15px / 30px
|
|
@debug $result // 0.5
|
|
|
|
@function fifteen-divided-by-thirty()
|
|
@return 15px / 30px
|
|
|
|
@debug fifteen-divided-by-thirty() // 0.5
|
|
|
|
@debug (15px/30px) // 0.5
|
|
@debug (bold 15px/30px sans-serif) // bold 15px/30px sans-serif
|
|
@debug 15px/30px + 1 // 1.5
|
|
|
|
@debug 4px * 6px // 24px*px (read "square pixels")
|
|
@debug 5px / 2s // 2.5px/s (read "pixels per second")
|
|
@debug 5px * 30deg / 2s / 24em // 3.125px*deg/s*em
|
|
// (read "pixel-degrees per second-em")
|
|
|
|
$degrees-per-second: 20deg/1s
|
|
@debug $degrees-per-second // 20deg/s
|
|
@debug 1 / $degrees-per-second // 0.05s/deg
|
|
@debug 100 > 50 // true
|
|
@debug 10px < 17px // true
|
|
@debug 96px >= 1in // true
|
|
@debug 1000ms <= 1s // true
|
|
@debug "Helvetica" + " Neue" // "Helvetica Neue"
|
|
@debug sans- + serif // sans-serif
|
|
@debug #{10px + 5px} / 30px // 15px/30px
|
|
@debug sans - serif // sans-serif
|
|
|
|
@debug "Elapsed time: " + 10s // "Elapsed time: 10s";
|
|
@debug true + " is a boolean value" // "true is a boolean value";
|
|
|
|
@debug / 15px // /15px
|
|
@debug - moz // -moz
|
|
@debug not true // false
|
|
@debug not false // true
|
|
|
|
@debug true and true // true
|
|
@debug true and false // false
|
|
|
|
@debug true or false // true
|
|
@debug false or false // false
|
|
@debug var(--main-bg-color) // var(--main-bg-color)
|
|
|
|
$primary: #f2ece4
|
|
$accent: #e1d7d2
|
|
@debug radial-gradient($primary, $accent) // radial-gradient(#f2ece4, #e1d7d2)
|
|
@debug str-index("Helvetica Neue", "Helvetica") // 1
|
|
@debug str-index("Helvetica Neue", "Neue") // 11
|
|
@debug comparable(2px, 1px) // true
|
|
@debug comparable(100px, 3em) // false
|
|
@debug comparable(10cm, 3mm) // true
|
|
@debug append(10px 20px, 30px) // 10px 20px 30px
|
|
@debug append((blue, red), green) // blue, red, green
|
|
@debug append(10px 20px, 30px 40px) // 10px 20px (30px 40px)
|
|
@debug append(10px, 20px, $separator: comma) // 10px, 20px
|
|
@debug append((blue, red), green, $separator: space) // blue red green
|
|
@mixin syntax-colors($args...)
|
|
@debug keywords($args) // (string: #080, comment: #800, $variable: $60b)
|
|
|
|
@each $name, $color in keywords($args)
|
|
pre span.stx-#{$name}
|
|
color: $color
|
|
|
|
@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
|
|
|
|
$font-weights: ("regular": 400, "medium": 500, "bold": 700)
|
|
|
|
@debug map-values($font-weights) // 400, 500, 700
|
|
|
|
.icon-#{$name}
|
|
position: absolute
|
|
#{$top-or-bottom}: 0
|
|
-#{$prefix}-#{$property}: $value
|
|
.icon-#{$name}
|
|
position: absolute
|
|
#{$top-or-bottom}: 0
|
|
-#{$prefix}-#{$property}-image: $value
|