<beginfold id='1'>/*</beginfold id='1'>*
 * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
 <endfold id='1'>*/</endfold id='1'>

@import url("othersheet.css") screen, tv;

body <beginfold id='2'>{</beginfold id='2'>
	font-size: 15pt;
	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
	margin-top: 0px;			<beginfold id='1'>/*</beginfold id='1'> yet another comment <endfold id='1'>*/</endfold id='1'>
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
<endfold id='2'>}</endfold id='2'>

.something
<beginfold id='2'>{</beginfold id='2'>
	margin-right: 0px;
	color: #cdd;
	color: #AAFE04;
	color: rgb(10%,30%,43%);
	background: maroon;
<endfold id='2'>}</endfold id='2'>

a:hover <beginfold id='2'>{</beginfold id='2'>
<endfold id='2'>}</endfold id='2'>

#header,
p.intro:first-letter,
p:lang(nl),
img[align="right"]
<beginfold id='2'>{</beginfold id='2'>
	border: 1px solid Qt::red !important;
	-moz-border-radius: 15px; <beginfold id='1'>/*</beginfold id='1'> unknown properties render italic <endfold id='1'>*/</endfold id='1'>
<endfold id='2'>}</endfold id='2'>

@media print <beginfold id='2'>{</beginfold id='2'>

	#header
	<beginfold id='2'>{</beginfold id='2'>
		display: none;
	<endfold id='2'>}</endfold id='2'>

<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'>
TODO: add more tests, e.g. media
<endfold id='1'>*/</endfold id='1'>


.nice-look <beginfold id='2'>{</beginfold id='2'>
	font-variant-alternates: styleset(nice-style);
<endfold id='2'>}</endfold id='2'>

ul <beginfold id='2'>{</beginfold id='2'>
	list-style: thumbs;
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'> SVG <a> <endfold id='1'>*/</endfold id='1'>
svg|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'> XHTML and SVG <a> <endfold id='1'>*/</endfold id='1'>
*|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>

*<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
.class<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
#id<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
:hover<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
:lang(fr)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E>F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E > F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E~F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E ~ F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E:first-child<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E:visited<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E::after<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E:lang(c)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E:lang(fr-ca)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E + F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E+F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo=warning]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo~="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo^="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo$="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[foo*="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E[lang|="en"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
DIV.warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
DIV .warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E#myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E #myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E, E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E ,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
E , E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>

p:nth-child(2) <beginfold id='2'>{</beginfold id='2'>
	background: red;
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'> Elements that are not <div> or <span> elements <endfold id='1'>*/</endfold id='1'>
body :not(div):not(span) <beginfold id='2'>{</beginfold id='2'>
	font-weight: bold;
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'> Elements that are not `.crazy` or `.fancy` <endfold id='1'>*/</endfold id='1'>
<beginfold id='1'>/*</beginfold id='1'> Note that this syntax is not well supported yet. <endfold id='1'>*/</endfold id='1'>
body :not(.crazy, .fancy) <beginfold id='2'>{</beginfold id='2'>
	font-family: sans-serif;
<endfold id='2'>}</endfold id='2'>

:nth-child(odd) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(even) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(4n) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(3n+4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(-n+3) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
:nth-child(n+8):nth-child(-n+15) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>

.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) <beginfold id='2'>{</beginfold id='2'>
	background-color: lime;
	unknown-property: lime;
<endfold id='2'>}</endfold id='2'>

:root<beginfold id='2'>{</beginfold id='2'>
	--foo: if(x > 5) this.width = 10; <beginfold id='1'>/*</beginfold id='1'> valid custom property, invalid in any normal property <endfold id='1'>*/</endfold id='1'>
<endfold id='2'>}</endfold id='2'>

:root,
:root:lang(en) <beginfold id='2'>{</beginfold id='2'>--external-link: "external link";<endfold id='2'>}</endfold id='2'>
:root:lang(de) <beginfold id='2'>{</beginfold id='2'>--external-link: "externer Link";<endfold id='2'>}</endfold id='2'>

a[href^="http"]::after <beginfold id='2'>{</beginfold id='2'>content: " (" var(--external-link) ")"<endfold id='2'>}</endfold id='2'>

one   <beginfold id='2'>{</beginfold id='2'> --foo: 10px; <endfold id='2'>}</endfold id='2'>
two   <beginfold id='2'>{</beginfold id='2'> --bar: calc(var(--foo) + 10px); <endfold id='2'>}</endfold id='2'>
three <beginfold id='2'>{</beginfold id='2'> --foo: calc(var(--bar) + 10px); <endfold id='2'>}</endfold id='2'>
.foo <beginfold id='2'>{</beginfold id='2'>
	--gap: 20;
	margin-top: var(--gap)px; <beginfold id='1'>/*</beginfold id='1'>20 px<endfold id='1'>*/</endfold id='1'>
	margin-top: calc(var(--gap) * 1px); <beginfold id='1'>/*</beginfold id='1'>20px<endfold id='1'>*/</endfold id='1'>
<endfold id='2'>}</endfold id='2'>

foo <beginfold id='2'>{</beginfold id='2'>
	width: calc(50% -8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
	width: calc(50%- 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
	width: calc(50% +8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
	width: calc(50%+ 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
	width: calc(2px -var(--a)); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
	width: calc(50%*-8px);
	width: calc(50% - 8px);
	width: calc(50% + -8px);
	width: calc(50% +(8px));
	width: calc(2px -(var(--a)));
<endfold id='2'>}</endfold id='2'>

sweet-alert input:focus::-moz-placeholder <beginfold id='2'>{</beginfold id='2'>
	-webkit-transition: opacity 0.3s 0.03s ease;
	transition: opacity 0.3s 0.03s ease;
	opacity: 0.5;
<endfold id='2'>}</endfold id='2'>


@font-feature-values Font One <beginfold id='2'>{</beginfold id='2'>
	@styleset <beginfold id='2'>{</beginfold id='2'>
		nice-style: 12;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@font-feature-values Font Two <beginfold id='2'>{</beginfold id='2'>
	@styleset <beginfold id='2'>{</beginfold id='2'>
		nice-style: 4;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@counter-style thumbs <beginfold id='2'>{</beginfold id='2'>
	system: cyclic;
	symbols: "\1F44D";
	suffix: " ";
<endfold id='2'>}</endfold id='2'>

@font-face <beginfold id='2'>{</beginfold id='2'>
	font-family: "Open Sans";
	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
<endfold id='2'>}</endfold id='2'>

@page <beginfold id='2'>{</beginfold id='2'>
	margin: 1cm;
<endfold id='2'>}</endfold id='2'>

@page :first <beginfold id='2'>{</beginfold id='2'>
	margin: 2cm;
	<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
	marks: crop cross;
<endfold id='2'>}</endfold id='2'>

@page :unknown <beginfold id='2'>{</beginfold id='2'>
	margin: 2cm;
<endfold id='2'>}</endfold id='2'>

@font-face <beginfold id='2'>{</beginfold id='2'>
	unknown: 2px;
	<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
	font-family: "Bitstream Vera Serif Bold";
	src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
<endfold id='2'>}</endfold id='2'>

@viewport <beginfold id='2'>{</beginfold id='2'>
	zoom: 0.75;
	<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
	min-zoom: 0.5;
	max-zoom: 0.9;
<endfold id='2'>}</endfold id='2'>

@viewport <beginfold id='2'>{</beginfold id='2'>
	orientation: landscape;
	<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
	orientation: landscape;
<endfold id='2'>}</endfold id='2'>

@document url("https://www.example.com/") <beginfold id='2'>{</beginfold id='2'>
	h1 <beginfold id='2'>{</beginfold id='2'>
		color: green;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@supports (display: grid) <beginfold id='2'>{</beginfold id='2'>
	div <beginfold id='2'>{</beginfold id='2'>
		display: grid;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@media (max-width: 600px) <beginfold id='2'>{</beginfold id='2'>
	.sidebar <beginfold id='2'>{</beginfold id='2'>
		display: none;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@import url("fineprint.css") print;
@import url(fineprint.css) print;
@import url('bluish.css') speech;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen;
@import url('landscape.css') screen and (orientation:landscape);

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

@keyframes important1 <beginfold id='2'>{</beginfold id='2'>
	from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px; <endfold id='2'>}</endfold id='2'>
	50%  <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <endfold id='2'>}</endfold id='2'> <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
	to   <beginfold id='2'>{</beginfold id='2'> margin-top: 100px; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@keyframes important2 <beginfold id='2'>{</beginfold id='2'>
	from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px;
		margin-bottom: 100px; <endfold id='2'>}</endfold id='2'>
	to   <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
		margin-bottom: 50px; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@keyframes slidein <beginfold id='2'>{</beginfold id='2'>
	from <beginfold id='2'>{</beginfold id='2'>
		margin-left: 100%;
		width: 300%;
	<endfold id='2'>}</endfold id='2'>

	to <beginfold id='2'>{</beginfold id='2'>
		margin-left: 0%;
		width: 100%;
	<endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@media print <beginfold id='2'>{</beginfold id='2'>
	a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
	<beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
	a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'>*
 * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
 <endfold id='1'>*/</endfold id='1'>

#main p <beginfold id='2'>{</beginfold id='2'>
  color: #00ff00;
  width: 97%;

  .redbox <beginfold id='2'>{</beginfold id='2'>
    background-color: #ff0000;
    color: #000000;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

a <beginfold id='2'>{</beginfold id='2'>
  font-weight: bold;
  text-decoration: none;
  &:hover <beginfold id='2'>{</beginfold id='2'> text-decoration: underline; <endfold id='2'>}</endfold id='2'>
  body.firefox & <beginfold id='2'>{</beginfold id='2'> font-weight: normal; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

#main <beginfold id='2'>{</beginfold id='2'>
  color: black;
  a <beginfold id='2'>{</beginfold id='2'>
    font-weight: bold;
    &:hover <beginfold id='2'>{</beginfold id='2'> color: red; <endfold id='2'>}</endfold id='2'>
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

#main <beginfold id='2'>{</beginfold id='2'>
  color: black;
  &-sidebar <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

.funky <beginfold id='2'>{</beginfold id='2'>
  font: <beginfold id='2'>{</beginfold id='2'>
    family: fantasy;
    size: 30em;
    weight: bold;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

.funky <beginfold id='2'>{</beginfold id='2'>
  font: 20px/24px fantasy <beginfold id='2'>{</beginfold id='2'>
    weight: bold;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'> This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. <endfold id='1'>*/</endfold id='1'>
body <beginfold id='2'>{</beginfold id='2'> color: black; <endfold id='2'>}</endfold id='2'>

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a <beginfold id='2'>{</beginfold id='2'> color: green; <endfold id='2'>}</endfold id='2'>

$version: "1.2.3";
<beginfold id='1'>/*</beginfold id='1'> This CSS is generated by My Snazzy Framework version #{$version}. <endfold id='1'>*/</endfold id='1'>

$width: 5em;

#main <beginfold id='2'>{</beginfold id='2'>
  width: $width;
<endfold id='2'>}</endfold id='2'>

#main <beginfold id='2'>{</beginfold id='2'>
  $width: 5em !global;
  width: $width;
<endfold id='2'>}</endfold id='2'>

#sidebar <beginfold id='2'>{</beginfold id='2'>
  width: $width;
<endfold id='2'>}</endfold id='2'>

@mixin firefox-message($selector) <beginfold id='2'>{</beginfold id='2'>
  body.firefox #{$selector}:before <beginfold id='2'>{</beginfold id='2'>
    content: "Hi, Firefox users!";
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@include firefox-message(".header");

$map: (key1: value1, key2: value2, key3: value3);

p <beginfold id='2'>{</beginfold id='2'>
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
  font: (italic bold 10px/8px); // In a list, parentheses don't count
<endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'>
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
<endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'>
  color: #010203 + #040506;
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
<endfold id='2'>}</endfold id='2'>

$translucent-red: rgba(255, 0, 0, 0.5);
p <beginfold id='2'>{</beginfold id='2'>
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
<endfold id='2'>}</endfold id='2'>

$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div <beginfold id='2'>{</beginfold id='2'>
  filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
<endfold id='2'>}</endfold id='2'>
p <beginfold id='2'>{</beginfold id='2'>
  cursor: e + -resize;
<endfold id='2'>}</endfold id='2'>
p:before <beginfold id='2'>{</beginfold id='2'>
  content: "Foo " + Bar;
  font-family: sans- + "serif";
<endfold id='2'>}</endfold id='2'>
p:before <beginfold id='2'>{</beginfold id='2'>
  content: "I ate #{5 + 10} pies!";
<endfold id='2'>}</endfold id='2'>
$value: null;
p:before <beginfold id='2'>{</beginfold id='2'>
  content: "I ate #{$value} pies!";
<endfold id='2'>}</endfold id='2'>
p <beginfold id='2'>{</beginfold id='2'>
  width: 1em + (2em * 3);
<endfold id='2'>}</endfold id='2'>
p <beginfold id='2'>{</beginfold id='2'>
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
<endfold id='2'>}</endfold id='2'>
$name: foo;
$attr: border;
p.#{$name} <beginfold id='2'>{</beginfold id='2'>
  #{$attr}-color: blue;
<endfold id='2'>}</endfold id='2'>
p <beginfold id='2'>{</beginfold id='2'>
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
<endfold id='2'>}</endfold id='2'>

.foo.bar .baz.bang, .bip.qux <beginfold id='2'>{</beginfold id='2'>
    $selector: &;
<endfold id='2'>}</endfold id='2'>

@mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
  @if & <beginfold id='2'>{</beginfold id='2'>
    &:hover <beginfold id='2'>{</beginfold id='2'>
      color: red;
    <endfold id='2'>}</endfold id='2'>
  <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
    a <beginfold id='2'>{</beginfold id='2'>
      color: red;
    <endfold id='2'>}</endfold id='2'>
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main <beginfold id='2'>{</beginfold id='2'>
  content: $content;
  new-content: $new_content;
<endfold id='2'>}</endfold id='2'>

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
#main <beginfold id='2'>{</beginfold id='2'>
  @import "example";
<endfold id='2'>}</endfold id='2'>

.sidebar <beginfold id='2'>{</beginfold id='2'>
  width: 300px;
  @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
    width: 500px;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>
@media screen <beginfold id='2'>{</beginfold id='2'>
  .sidebar <beginfold id='2'>{</beginfold id='2'>
    @media (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
      width: 500px;
    <endfold id='2'>}</endfold id='2'>
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) <beginfold id='2'>{</beginfold id='2'>
  .sidebar <beginfold id='2'>{</beginfold id='2'>
    width: 500px;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

.error <beginfold id='2'>{</beginfold id='2'>
  border: 1px #f00;
  background-color: #fdd;
<endfold id='2'>}</endfold id='2'>
.seriousError <beginfold id='2'>{</beginfold id='2'>
  @extend .error;
  border-width: 3px;
<endfold id='2'>}</endfold id='2'>

.hoverlink <beginfold id='2'>{</beginfold id='2'>
  @extend a:hover;
<endfold id='2'>}</endfold id='2'>
a:hover <beginfold id='2'>{</beginfold id='2'>
  text-decoration: underline;
<endfold id='2'>}</endfold id='2'>

#context a%extreme a %extreme <beginfold id='2'>{</beginfold id='2'>
  color: blue;
  font-weight: bold;
  font-size: 2em;
<endfold id='2'>}</endfold id='2'>
.notice <beginfold id='2'>{</beginfold id='2'>
  @extend %extreme;
<endfold id='2'>}</endfold id='2'>

a.important <beginfold id='2'>{</beginfold id='2'>
  @extend .notice !optional;
<endfold id='2'>}</endfold id='2'>

@media print <beginfold id='2'>{</beginfold id='2'>
  .page <beginfold id='2'>{</beginfold id='2'>
    width: 8in;
    @at-root (without: media) <beginfold id='2'>{</beginfold id='2'>
      color: red;
    <endfold id='2'>}</endfold id='2'>
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@debug 10em + 12em;

@mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
  @if unitless($x) <beginfold id='2'>{</beginfold id='2'>
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  <endfold id='2'>}</endfold id='2'>
  @if unitless($y) <beginfold id='2'>{</beginfold id='2'>
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  <endfold id='2'>}</endfold id='2'>
  position: relative; left: $x; top: $y;
<endfold id='2'>}</endfold id='2'>

@mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
  @if unitless($x) <beginfold id='2'>{</beginfold id='2'>
    @error "$x may not be unitless, was #{$x}.";
  <endfold id='2'>}</endfold id='2'>
  @if unitless($y) <beginfold id='2'>{</beginfold id='2'>
    @error "$y may not be unitless, was #{$y}.";
  <endfold id='2'>}</endfold id='2'>
  position: relative; left: $x; top: $y;
<endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'>
  @if 1 + 1 == 2 <beginfold id='2'>{</beginfold id='2'> border: 1px solid;  <endfold id='2'>}</endfold id='2'>
  @if 5 < 3      <beginfold id='2'>{</beginfold id='2'> border: 2px dotted; <endfold id='2'>}</endfold id='2'>
  @if null       <beginfold id='2'>{</beginfold id='2'> border: 3px double; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

$type: monster;
p <beginfold id='2'>{</beginfold id='2'>
  @if $type == ocean <beginfold id='2'>{</beginfold id='2'>
    color: blue;
  <endfold id='2'>}</endfold id='2'> @else if $type == matador <beginfold id='2'>{</beginfold id='2'>
    color: red;
  <endfold id='2'>}</endfold id='2'> @else if $type == monster <beginfold id='2'>{</beginfold id='2'>
    color: green;
  <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
    color: black;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@for $i from 1 through 3 <beginfold id='2'>{</beginfold id='2'>
  .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@each $animal in puma, sea-slug, egret, salamander <beginfold id='2'>{</beginfold id='2'>
  .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
    background-image: url('/images/#{$animal}.png');
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) <beginfold id='2'>{</beginfold id='2'>
  .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) <beginfold id='2'>{</beginfold id='2'>
  #{$header} <beginfold id='2'>{</beginfold id='2'>
    font-size: $size;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

$i: 6;
@while $i > 0 <beginfold id='2'>{</beginfold id='2'>
  .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
  $i: $i - 2;
<endfold id='2'>}</endfold id='2'>

@mixin large-text <beginfold id='2'>{</beginfold id='2'>
  font: <beginfold id='2'>{</beginfold id='2'>
    family: Arial;
    size: 20px;
    weight: bold;
  <endfold id='2'>}</endfold id='2'>
  color: #ff0000;
<endfold id='2'>}</endfold id='2'>

@mixin clearfix <beginfold id='2'>{</beginfold id='2'>
  display: inline-block;
  &:after <beginfold id='2'>{</beginfold id='2'>
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  <endfold id='2'>}</endfold id='2'>
  * html & <beginfold id='2'>{</beginfold id='2'> height: 1px <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

.page-title <beginfold id='2'>{</beginfold id='2'>
  @include large-text;
  padding: 4px;
  margin-top: 10px;
<endfold id='2'>}</endfold id='2'>

@mixin compound <beginfold id='2'>{</beginfold id='2'>
  @include highlighted-background;
  @include header-text;
<endfold id='2'>}</endfold id='2'>

@mixin highlighted-background <beginfold id='2'>{</beginfold id='2'> background-color: #fc0; <endfold id='2'>}</endfold id='2'>
@mixin header-text <beginfold id='2'>{</beginfold id='2'> font-size: 20px; <endfold id='2'>}</endfold id='2'>

@mixin sexy-border($color, $width) <beginfold id='2'>{</beginfold id='2'>
  border: <beginfold id='2'>{</beginfold id='2'>
    color: $color;
    width: $width;
    style: dashed;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'> @include sexy-border(blue, 1in); <endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue); <endfold id='2'>}</endfold id='2'>
h1 <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue, $width: 2in); <endfold id='2'>}</endfold id='2'>


@mixin colors($text, $background, $border) <beginfold id='2'>{</beginfold id='2'>
  color: $text;
  background-color: $background;
  border-color: $border;
<endfold id='2'>}</endfold id='2'>

$values: #ff0000, #00ff00, #0000ff;
.primary <beginfold id='2'>{</beginfold id='2'>
  @include colors($values...);
<endfold id='2'>}</endfold id='2'>

$value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
.secondary <beginfold id='2'>{</beginfold id='2'>
  @include colors($value-map...);
<endfold id='2'>}</endfold id='2'>

@mixin apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
  * html <beginfold id='2'>{</beginfold id='2'>
    @content;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>
@include apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
  #logo <beginfold id='2'>{</beginfold id='2'>
    background-image: url(/logo.gif);
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) <beginfold id='2'>{</beginfold id='2'>
  @return $n * $grid-width + ($n - 1) * $gutter-width;
<endfold id='2'>}</endfold id='2'>

#sidebar <beginfold id='2'>{</beginfold id='2'> width: grid-width(5); <endfold id='2'>}</endfold id='2'>

@mixin unify-parent($child) <beginfold id='2'>{</beginfold id='2'>
  @at-root #{selector-unify(&, $child)} <beginfold id='2'>{</beginfold id='2'>
    @content;
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

:root <beginfold id='2'>{</beginfold id='2'>
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
<endfold id='2'>}</endfold id='2'>

div <beginfold id='2'>{</beginfold id='2'>
  background-image: url("/icons/#{$name}.svg");
  font: #{"string"};

.icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
  position: absolute;
  #{$top-or-bottom}: 0;
  -#{$prefix}-#{$property}: $value;
  .icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
    position: absolute;
    #{$top-or-bottom}: 0;
    -#{$prefix}-#{$property}-image: $value
  <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'>
 * SCSS Syntax Highlight Sample File (Standard)
 *
 * This file contains most SCSS syntax, CSS3 properties, advanced code structure.
 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-15
 <endfold id='1'>*/</endfold id='1'>

<beginfold id='1'>/*</beginfold id='1'>
 * Block comment
 *
 * Alert keywords:
 * TODO BUG FIXME
 <endfold id='1'>*/</endfold id='1'>

@charset "UTF-8";

@import "mixins/button";

// Variable define

$image-path:            "../../static/images";
$default-text-color:    #333 !default; // Default can be overrided
$default-font-size:     16px !default;
$default-font-family:   Roboto, "Droid Sans", sans-serif;
$default-font-weight:   400;
$default-line-height:   $default-font-size * 1.8;
$shadow-transparence:   0.25;
$box-shadow:            0 0 3px rgba(0,0,0,$shadow-transparence);
$page-width:            100rem; // kabab-case
$gapOfArticle:          20px;   // camelCase
$body_background_color: white;  // snake_case

// Mixins

@mixin border-radius($radius) <beginfold id='2'>{</beginfold id='2'>
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
<endfold id='2'>}</endfold id='2'>

.box <beginfold id='2'>{</beginfold id='2'> @include border-radius(10px); <endfold id='2'>}</endfold id='2'>

// Nesting

#home-page <beginfold id='2'>{</beginfold id='2'>

    header <beginfold id='2'>{</beginfold id='2'>
        width: 80%;
        margin: 0 auto;

        .cover <beginfold id='2'>{</beginfold id='2'>
            @include border-radius(20px);
            max-width: 100%;

            &:hover <beginfold id='2'>{</beginfold id='2'>
                background: #ffffff;
            <endfold id='2'>}</endfold id='2'>

            .like-button <beginfold id='2'>{</beginfold id='2'>
                font-size: $default-font-size * 0.8;

                @media (max-width: 300px) and (min-width: 200px) <beginfold id='2'>{</beginfold id='2'>
                    font-size: $default-font-size * 0.8;

                    .icon <beginfold id='2'>{</beginfold id='2'>
                        width: 20px;
                        height: 20px;
                    <endfold id='2'>}</endfold id='2'>
                <endfold id='2'>}</endfold id='2'>

                @media print <beginfold id='2'>{</beginfold id='2'>
                    display: none;
                <endfold id='2'>}</endfold id='2'>
            <endfold id='2'>}</endfold id='2'>
        <endfold id='2'>}</endfold id='2'>
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

// Extend and inheritance

.message <beginfold id='2'>{</beginfold id='2'>
    border: $border-light;
    background-color: #f0f0f0;
<endfold id='2'>}</endfold id='2'>

.message-danger <beginfold id='2'>{</beginfold id='2'>
    @extend .message;
<endfold id='2'>}</endfold id='2'>


// Control structures

@mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
    @if & <beginfold id='2'>{</beginfold id='2'>
        &:hover <beginfold id='2'>{</beginfold id='2'>
            color: red;
        <endfold id='2'>}</endfold id='2'>
    <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
        a <beginfold id='2'>{</beginfold id='2'>
            color: red;
        <endfold id='2'>}</endfold id='2'>
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>


// Operators

.container <beginfold id='2'>{</beginfold id='2'> width: 100%; <endfold id='2'>}</endfold id='2'>

article[role="main"] <beginfold id='2'>{</beginfold id='2'>
  float: left;
  width: 600px / 960px * 100%;
<endfold id='2'>}</endfold id='2'>

aside[role="complementary"] <beginfold id='2'>{</beginfold id='2'>
  float: right;
  width: 300px / 960px * 100%;
<endfold id='2'>}</endfold id='2'>


// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html

$color1: hsl(120deg, 100%, 50%);
$color2: rgb($red, $green, blue($color1));
$color3: mix($color1, $color2, [$weight]);


// Properties

html, body <beginfold id='2'>{</beginfold id='2'>
    font-family: "Droid Sans", Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    max-width: 300px + $page-width - $gap / 2;
    background: $bg_color;
    text-shadow: 0 0 2px rgba(0,0,0, $transparence);
    box-sizing: border-box;
<endfold id='2'>}</endfold id='2'>


// Selectors

blockquote <beginfold id='2'>{</beginfold id='2'>
    margin: 0;
<endfold id='2'>}</endfold id='2'>

header #logo <beginfold id='2'>{</beginfold id='2'>
    width: 100px;
<endfold id='2'>}</endfold id='2'>

div#footer .link <beginfold id='2'>{</beginfold id='2'>
    color: blue;
<endfold id='2'>}</endfold id='2'>

sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='2'>{</beginfold id='2'>
    font-size: 20px;
<endfold id='2'>}</endfold id='2'>

sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='2'>{</beginfold id='2'>
    font-weight: bold;
<endfold id='2'>}</endfold id='2'>


// Media Queries

@media print <beginfold id='2'>{</beginfold id='2'>
    .container <beginfold id='2'>{</beginfold id='2'>
        width: 100%;
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@media screen and (min-width: 768px) <beginfold id='2'>{</beginfold id='2'>
    .container <beginfold id='2'>{</beginfold id='2'>
        width: 600px;
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

@media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='2'>{</beginfold id='2'>
    .container <beginfold id='2'>{</beginfold id='2'>
        width: 720px;
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>


// Fontface

@font-face <beginfold id='2'>{</beginfold id='2'>
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"),
        local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
<endfold id='2'>}</endfold id='2'>

// Animation (Keyframes)

@keyframes slidein <beginfold id='2'>{</beginfold id='2'>
    from <beginfold id='2'>{</beginfold id='2'>
        margin-left: 100%;
        width: 300%;
    <endfold id='2'>}</endfold id='2'>

    to <beginfold id='2'>{</beginfold id='2'>
        margin-left: 0%;
        width: 100%;
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>

<beginfold id='1'>/*</beginfold id='1'>
 * SCSS Syntax Highlight Sample File (Complex)
 *
 * This file contains complex SCSS syntax that can test unexpected situations.
 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-16
 <endfold id='1'>*/</endfold id='1'>


// Comments with special content

// .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text

<beginfold id='1'>/*</beginfold id='1'>
 * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment
 * TODO BUG DEBUG
 * body {
 *    margin: 0 !important;
 * }
 <endfold id='1'>*/</endfold id='1'>

// Comments in special positions

$color: black <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;

header<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>.active <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'>
    <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> color : <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> blue<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
    font-family: Arial <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>,
        "Droid Sans", <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>
        sans-serif<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
<endfold id='2'>}</endfold id='2'>

@media screen <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> and (max-width: 300px <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>) <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'> <beginfold id='2'>{</beginfold id='2'><beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'><endfold id='2'>}</endfold id='2'>


// Strings with special content

@import "{} $variable /* comment */";
@import "{}";

// Without extra breaklines and spaces

pre.primary:hover.large:nth-child(2n-1)<beginfold id='2'>{</beginfold id='2'>font-size:$default-font-size;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)<endfold id='2'>}</endfold id='2'>

// With unnecessary breaklines and spaces

blockquote .ref
    <beginfold id='2'>{</beginfold id='2'>
             flex : 0 1 30%;
        flex-wrap : wrap;
    <endfold id='2'>}</endfold id='2'>

.sidebar <beginfold id='2'>{</beginfold id='2'>
  width: 300px; <endfold id='2'>}</endfold id='2'>
  @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
    .sidebar <beginfold id='2'>{</beginfold id='2'>
      width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>

// Variable interpolation: #{}

$name: foo;
$attr: border;
p.#{$name} <beginfold id='2'>{</beginfold id='2'>
    #{$attr}-color: blue;
<endfold id='2'>}</endfold id='2'>

p <beginfold id='2'>{</beginfold id='2'>
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
<endfold id='2'>}</endfold id='2'>

// Special selectors: HTML5 allows user defined tags

header <beginfold id='2'>{</beginfold id='2'>
    flex <beginfold id='2'>{</beginfold id='2'>
        width: 300px;
    <endfold id='2'>}</endfold id='2'>
<endfold id='2'>}</endfold id='2'>
