Differential D23245 Diff 64075 autotests/folding/highlight.sass.fold

Changeset 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.125pxdeg/sem
		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.125pxdeg/sem
		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