Warning, /frameworks/syntax-highlighting/autotests/folding/highlight.scss.fold is written in an unsupported language. File is not indexed.
0001 <beginfold id='1'>/*</beginfold id='1'>*
0002 * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
0003 <endfold id='1'>*/</endfold id='1'>
0004
0005 @import url("othersheet.css") screen, tv;
0006
0007 body <beginfold id='2'>{</beginfold id='2'>
0008 font-size: 15pt;
0009 font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
0010 margin-top: 0px; <beginfold id='1'>/*</beginfold id='1'> yet another comment <endfold id='1'>*/</endfold id='1'>
0011 margin-bottom: 0px;
0012 margin-left: 0px;
0013 margin-right: 0px;
0014 <endfold id='2'>}</endfold id='2'>
0015
0016 .something
0017 <beginfold id='2'>{</beginfold id='2'>
0018 margin-right: 0px;
0019 color: #cdd;
0020 color: #AAFE04;
0021 color: rgb(10%,30%,43%);
0022 background: maroon;
0023 <endfold id='2'>}</endfold id='2'>
0024
0025 a:hover <beginfold id='2'>{</beginfold id='2'>
0026 <endfold id='2'>}</endfold id='2'>
0027
0028 #header,
0029 p.intro:first-letter,
0030 p:lang(nl),
0031 img[align="right"]
0032 <beginfold id='2'>{</beginfold id='2'>
0033 border: 1px solid Qt::red !important;
0034 -moz-border-radius: 15px; <beginfold id='1'>/*</beginfold id='1'> unknown properties render italic <endfold id='1'>*/</endfold id='1'>
0035 <endfold id='2'>}</endfold id='2'>
0036
0037 @media print <beginfold id='2'>{</beginfold id='2'>
0038
0039 #header
0040 <beginfold id='2'>{</beginfold id='2'>
0041 display: none;
0042 <endfold id='2'>}</endfold id='2'>
0043
0044 <endfold id='2'>}</endfold id='2'>
0045
0046 <beginfold id='1'>/*</beginfold id='1'>
0047 TODO: add more tests, e.g. media
0048 <endfold id='1'>*/</endfold id='1'>
0049
0050
0051 .nice-look <beginfold id='2'>{</beginfold id='2'>
0052 font-variant-alternates: styleset(nice-style);
0053 <endfold id='2'>}</endfold id='2'>
0054
0055 ul <beginfold id='2'>{</beginfold id='2'>
0056 list-style: thumbs;
0057 <endfold id='2'>}</endfold id='2'>
0058
0059 <beginfold id='1'>/*</beginfold id='1'> SVG <a> <endfold id='1'>*/</endfold id='1'>
0060 svg|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0061
0062 <beginfold id='1'>/*</beginfold id='1'> XHTML and SVG <a> <endfold id='1'>*/</endfold id='1'>
0063 *|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0064
0065 *<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0066 .class<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0067 #id<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0068 :hover<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0069 :lang(fr)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0070 E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0071 E F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0072 E>F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0073 E > F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0074 E~F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0075 E ~ F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0076 E:first-child<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0077 E:visited<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0078 E::after<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0079 E:lang(c)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0080 E:lang(fr-ca)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0081 E + F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0082 E+F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0083 E[foo]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0084 E[foo=warning]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0085 E[foo="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0086 E[foo~="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0087 E[foo^="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0088 E[foo$="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0089 E[foo*="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0090 E[lang|="en"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0091 DIV.warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0092 DIV .warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0093 E#myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0094 E #myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0095 E,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0096 E, E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0097 E ,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0098 E , E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0099
0100 p:nth-child(2) <beginfold id='2'>{</beginfold id='2'>
0101 background: red;
0102 <endfold id='2'>}</endfold id='2'>
0103
0104 <beginfold id='1'>/*</beginfold id='1'> Elements that are not <div> or <span> elements <endfold id='1'>*/</endfold id='1'>
0105 body :not(div):not(span) <beginfold id='2'>{</beginfold id='2'>
0106 font-weight: bold;
0107 <endfold id='2'>}</endfold id='2'>
0108
0109 <beginfold id='1'>/*</beginfold id='1'> Elements that are not `.crazy` or `.fancy` <endfold id='1'>*/</endfold id='1'>
0110 <beginfold id='1'>/*</beginfold id='1'> Note that this syntax is not well supported yet. <endfold id='1'>*/</endfold id='1'>
0111 body :not(.crazy, .fancy) <beginfold id='2'>{</beginfold id='2'>
0112 font-family: sans-serif;
0113 <endfold id='2'>}</endfold id='2'>
0114
0115 :nth-child(odd) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0116 :nth-child(even) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0117 :nth-child(4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0118 :nth-child(4n) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0119 :nth-child(3n+4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0120 :nth-child(-n+3) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0121 :nth-child(n+8):nth-child(-n+15) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0122
0123 .first span:nth-child(2n+1),
0124 .second span:nth-child(2n+1),
0125 .third span:nth-of-type(2n+1) <beginfold id='2'>{</beginfold id='2'>
0126 background-color: lime;
0127 unknown-property: lime;
0128 <endfold id='2'>}</endfold id='2'>
0129
0130 :root<beginfold id='2'>{</beginfold id='2'>
0131 --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'>
0132 <endfold id='2'>}</endfold id='2'>
0133
0134 :root,
0135 :root:lang(en) <beginfold id='2'>{</beginfold id='2'>--external-link: "external link";<endfold id='2'>}</endfold id='2'>
0136 :root:lang(de) <beginfold id='2'>{</beginfold id='2'>--external-link: "externer Link";<endfold id='2'>}</endfold id='2'>
0137
0138 a[href^="http"]::after <beginfold id='2'>{</beginfold id='2'>content: " (" var(--external-link) ")"<endfold id='2'>}</endfold id='2'>
0139
0140 one <beginfold id='2'>{</beginfold id='2'> --foo: 10px; <endfold id='2'>}</endfold id='2'>
0141 two <beginfold id='2'>{</beginfold id='2'> --bar: calc(var(--foo) + 10px); <endfold id='2'>}</endfold id='2'>
0142 three <beginfold id='2'>{</beginfold id='2'> --foo: calc(var(--bar) + 10px); <endfold id='2'>}</endfold id='2'>
0143 .foo <beginfold id='2'>{</beginfold id='2'>
0144 --gap: 20;
0145 margin-top: var(--gap)px; <beginfold id='1'>/*</beginfold id='1'>20 px<endfold id='1'>*/</endfold id='1'>
0146 margin-top: calc(var(--gap) * 1px); <beginfold id='1'>/*</beginfold id='1'>20px<endfold id='1'>*/</endfold id='1'>
0147 <endfold id='2'>}</endfold id='2'>
0148
0149 foo <beginfold id='2'>{</beginfold id='2'>
0150 width: calc(50% -8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0151 width: calc(50%- 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0152 width: calc(50% +8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0153 width: calc(50%+ 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0154 width: calc(2px -var(--a)); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0155 width: calc(50%*-8px);
0156 width: calc(50% - 8px);
0157 width: calc(50% + -8px);
0158 width: calc(50% +(8px));
0159 width: calc(2px -(var(--a)));
0160 <endfold id='2'>}</endfold id='2'>
0161
0162 sweet-alert input:focus::-moz-placeholder <beginfold id='2'>{</beginfold id='2'>
0163 -webkit-transition: opacity 0.3s 0.03s ease;
0164 transition: opacity 0.3s 0.03s ease;
0165 opacity: 0.5;
0166 <endfold id='2'>}</endfold id='2'>
0167
0168
0169 @font-feature-values Font One <beginfold id='2'>{</beginfold id='2'>
0170 @styleset <beginfold id='2'>{</beginfold id='2'>
0171 nice-style: 12;
0172 <endfold id='2'>}</endfold id='2'>
0173 <endfold id='2'>}</endfold id='2'>
0174
0175 @font-feature-values Font Two <beginfold id='2'>{</beginfold id='2'>
0176 @styleset <beginfold id='2'>{</beginfold id='2'>
0177 nice-style: 4;
0178 <endfold id='2'>}</endfold id='2'>
0179 <endfold id='2'>}</endfold id='2'>
0180
0181 @counter-style thumbs <beginfold id='2'>{</beginfold id='2'>
0182 system: cyclic;
0183 symbols: "\1F44D";
0184 suffix: " ";
0185 <endfold id='2'>}</endfold id='2'>
0186
0187 @font-face <beginfold id='2'>{</beginfold id='2'>
0188 font-family: "Open Sans";
0189 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
0190 url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
0191 <endfold id='2'>}</endfold id='2'>
0192
0193 @page <beginfold id='2'>{</beginfold id='2'>
0194 margin: 1cm;
0195 <endfold id='2'>}</endfold id='2'>
0196
0197 @page :first <beginfold id='2'>{</beginfold id='2'>
0198 margin: 2cm;
0199 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0200 marks: crop cross;
0201 <endfold id='2'>}</endfold id='2'>
0202
0203 @page :unknown <beginfold id='2'>{</beginfold id='2'>
0204 margin: 2cm;
0205 <endfold id='2'>}</endfold id='2'>
0206
0207 @font-face <beginfold id='2'>{</beginfold id='2'>
0208 unknown: 2px;
0209 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0210 font-family: "Bitstream Vera Serif Bold";
0211 src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
0212 <endfold id='2'>}</endfold id='2'>
0213
0214 @viewport <beginfold id='2'>{</beginfold id='2'>
0215 zoom: 0.75;
0216 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0217 min-zoom: 0.5;
0218 max-zoom: 0.9;
0219 <endfold id='2'>}</endfold id='2'>
0220
0221 @viewport <beginfold id='2'>{</beginfold id='2'>
0222 orientation: landscape;
0223 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0224 orientation: landscape;
0225 <endfold id='2'>}</endfold id='2'>
0226
0227 @document url("https://www.example.com/") <beginfold id='2'>{</beginfold id='2'>
0228 h1 <beginfold id='2'>{</beginfold id='2'>
0229 color: green;
0230 <endfold id='2'>}</endfold id='2'>
0231 <endfold id='2'>}</endfold id='2'>
0232
0233 @supports (display: grid) <beginfold id='2'>{</beginfold id='2'>
0234 div <beginfold id='2'>{</beginfold id='2'>
0235 display: grid;
0236 <endfold id='2'>}</endfold id='2'>
0237 <endfold id='2'>}</endfold id='2'>
0238
0239 @media (max-width: 600px) <beginfold id='2'>{</beginfold id='2'>
0240 .sidebar <beginfold id='2'>{</beginfold id='2'>
0241 display: none;
0242 <endfold id='2'>}</endfold id='2'>
0243 <endfold id='2'>}</endfold id='2'>
0244
0245 @import url("fineprint.css") print;
0246 @import url(fineprint.css) print;
0247 @import url('bluish.css') speech;
0248 @import 'custom.css';
0249 @import url("chrome://communicator/skin/");
0250 @import "common.css" screen;
0251 @import url('landscape.css') screen and (orientation:landscape);
0252
0253 @namespace url(http://www.w3.org/1999/xhtml);
0254 @namespace svg url(http://www.w3.org/2000/svg);
0255
0256 @keyframes important1 <beginfold id='2'>{</beginfold id='2'>
0257 from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px; <endfold id='2'>}</endfold id='2'>
0258 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'>
0259 to <beginfold id='2'>{</beginfold id='2'> margin-top: 100px; <endfold id='2'>}</endfold id='2'>
0260 <endfold id='2'>}</endfold id='2'>
0261
0262 @keyframes important2 <beginfold id='2'>{</beginfold id='2'>
0263 from <beginfold id='2'>{</beginfold id='2'> margin-top: 50px;
0264 margin-bottom: 100px; <endfold id='2'>}</endfold id='2'>
0265 to <beginfold id='2'>{</beginfold id='2'> margin-top: 150px !important; <beginfold id='1'>/*</beginfold id='1'> ignored <endfold id='1'>*/</endfold id='1'>
0266 margin-bottom: 50px; <endfold id='2'>}</endfold id='2'>
0267 <endfold id='2'>}</endfold id='2'>
0268
0269 @keyframes slidein <beginfold id='2'>{</beginfold id='2'>
0270 from <beginfold id='2'>{</beginfold id='2'>
0271 margin-left: 100%;
0272 width: 300%;
0273 <endfold id='2'>}</endfold id='2'>
0274
0275 to <beginfold id='2'>{</beginfold id='2'>
0276 margin-left: 0%;
0277 width: 100%;
0278 <endfold id='2'>}</endfold id='2'>
0279 <endfold id='2'>}</endfold id='2'>
0280
0281 @media print <beginfold id='2'>{</beginfold id='2'>
0282 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0283 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0284 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0285 <endfold id='2'>}</endfold id='2'>
0286
0287 <beginfold id='1'>/*</beginfold id='1'>*
0288 * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
0289 <endfold id='1'>*/</endfold id='1'>
0290
0291 #main p <beginfold id='2'>{</beginfold id='2'>
0292 color: #00ff00;
0293 width: 97%;
0294
0295 .redbox <beginfold id='2'>{</beginfold id='2'>
0296 background-color: #ff0000;
0297 color: #000000;
0298 <endfold id='2'>}</endfold id='2'>
0299 <endfold id='2'>}</endfold id='2'>
0300
0301 a <beginfold id='2'>{</beginfold id='2'>
0302 font-weight: bold;
0303 text-decoration: none;
0304 &:hover <beginfold id='2'>{</beginfold id='2'> text-decoration: underline; <endfold id='2'>}</endfold id='2'>
0305 body.firefox & <beginfold id='2'>{</beginfold id='2'> font-weight: normal; <endfold id='2'>}</endfold id='2'>
0306 <endfold id='2'>}</endfold id='2'>
0307
0308 #main <beginfold id='2'>{</beginfold id='2'>
0309 color: black;
0310 a <beginfold id='2'>{</beginfold id='2'>
0311 font-weight: bold;
0312 &:hover <beginfold id='2'>{</beginfold id='2'> color: red; <endfold id='2'>}</endfold id='2'>
0313 <endfold id='2'>}</endfold id='2'>
0314 <endfold id='2'>}</endfold id='2'>
0315
0316 #main <beginfold id='2'>{</beginfold id='2'>
0317 color: black;
0318 &-sidebar <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
0319 <endfold id='2'>}</endfold id='2'>
0320
0321 .funky <beginfold id='2'>{</beginfold id='2'>
0322 font: <beginfold id='2'>{</beginfold id='2'>
0323 family: fantasy;
0324 size: 30em;
0325 weight: bold;
0326 <endfold id='2'>}</endfold id='2'>
0327 <endfold id='2'>}</endfold id='2'>
0328
0329 .funky <beginfold id='2'>{</beginfold id='2'>
0330 font: 20px/24px fantasy <beginfold id='2'>{</beginfold id='2'>
0331 weight: bold;
0332 <endfold id='2'>}</endfold id='2'>
0333 <endfold id='2'>}</endfold id='2'>
0334
0335 <beginfold id='1'>/*</beginfold id='1'> This comment is
0336 * several lines long.
0337 * since it uses the CSS comment syntax,
0338 * it will appear in the CSS output. <endfold id='1'>*/</endfold id='1'>
0339 body <beginfold id='2'>{</beginfold id='2'> color: black; <endfold id='2'>}</endfold id='2'>
0340
0341 // These comments are only one line long each.
0342 // They won't appear in the CSS output,
0343 // since they use the single-line comment syntax.
0344 a <beginfold id='2'>{</beginfold id='2'> color: green; <endfold id='2'>}</endfold id='2'>
0345
0346 $version: "1.2.3";
0347 <beginfold id='1'>/*</beginfold id='1'> This CSS is generated by My Snazzy Framework version #{$version}. <endfold id='1'>*/</endfold id='1'>
0348
0349 $width: 5em;
0350
0351 #main <beginfold id='2'>{</beginfold id='2'>
0352 width: $width;
0353 <endfold id='2'>}</endfold id='2'>
0354
0355 #main <beginfold id='2'>{</beginfold id='2'>
0356 $width: 5em !global;
0357 width: $width;
0358 <endfold id='2'>}</endfold id='2'>
0359
0360 #sidebar <beginfold id='2'>{</beginfold id='2'>
0361 width: $width;
0362 <endfold id='2'>}</endfold id='2'>
0363
0364 @mixin firefox-message($selector) <beginfold id='2'>{</beginfold id='2'>
0365 body.firefox #{$selector}:before <beginfold id='2'>{</beginfold id='2'>
0366 content: "Hi, Firefox users!";
0367 <endfold id='2'>}</endfold id='2'>
0368 <endfold id='2'>}</endfold id='2'>
0369
0370 @include firefox-message(".header");
0371
0372 $map: (key1: value1, key2: value2, key3: value3);
0373
0374 p <beginfold id='2'>{</beginfold id='2'>
0375 font: 10px/8px; // Plain CSS, no division
0376 $width: 1000px;
0377 width: $width/2; // Uses a variable, does division
0378 width: round(1.5)/2; // Uses a function, does division
0379 height: (500px/2); // Uses parentheses, does division
0380 margin-left: 5px + 8px/2px; // Uses +, does division
0381 font: (italic bold 10px/8px); // In a list, parentheses don't count
0382 <endfold id='2'>}</endfold id='2'>
0383
0384 p <beginfold id='2'>{</beginfold id='2'>
0385 $font-size: 12px;
0386 $line-height: 30px;
0387 font: #{$font-size}/#{$line-height};
0388 <endfold id='2'>}</endfold id='2'>
0389
0390 p <beginfold id='2'>{</beginfold id='2'>
0391 color: #010203 + #040506;
0392 color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
0393 <endfold id='2'>}</endfold id='2'>
0394
0395 $translucent-red: rgba(255, 0, 0, 0.5);
0396 p <beginfold id='2'>{</beginfold id='2'>
0397 color: opacify($translucent-red, 0.3);
0398 background-color: transparentize($translucent-red, 0.25);
0399 <endfold id='2'>}</endfold id='2'>
0400
0401 $translucent-red: rgba(255, 0, 0, 0.5);
0402 $green: #00ff00;
0403 div <beginfold id='2'>{</beginfold id='2'>
0404 filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
0405 <endfold id='2'>}</endfold id='2'>
0406 p <beginfold id='2'>{</beginfold id='2'>
0407 cursor: e + -resize;
0408 <endfold id='2'>}</endfold id='2'>
0409 p:before <beginfold id='2'>{</beginfold id='2'>
0410 content: "Foo " + Bar;
0411 font-family: sans- + "serif";
0412 <endfold id='2'>}</endfold id='2'>
0413 p:before <beginfold id='2'>{</beginfold id='2'>
0414 content: "I ate #{5 + 10} pies!";
0415 <endfold id='2'>}</endfold id='2'>
0416 $value: null;
0417 p:before <beginfold id='2'>{</beginfold id='2'>
0418 content: "I ate #{$value} pies!";
0419 <endfold id='2'>}</endfold id='2'>
0420 p <beginfold id='2'>{</beginfold id='2'>
0421 width: 1em + (2em * 3);
0422 <endfold id='2'>}</endfold id='2'>
0423 p <beginfold id='2'>{</beginfold id='2'>
0424 color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
0425 <endfold id='2'>}</endfold id='2'>
0426 $name: foo;
0427 $attr: border;
0428 p.#{$name} <beginfold id='2'>{</beginfold id='2'>
0429 #{$attr}-color: blue;
0430 <endfold id='2'>}</endfold id='2'>
0431 p <beginfold id='2'>{</beginfold id='2'>
0432 $font-size: 12px;
0433 $line-height: 30px;
0434 font: #{$font-size}/#{$line-height};
0435 <endfold id='2'>}</endfold id='2'>
0436
0437 .foo.bar .baz.bang, .bip.qux <beginfold id='2'>{</beginfold id='2'>
0438 $selector: &;
0439 <endfold id='2'>}</endfold id='2'>
0440
0441 @mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
0442 @if & <beginfold id='2'>{</beginfold id='2'>
0443 &:hover <beginfold id='2'>{</beginfold id='2'>
0444 color: red;
0445 <endfold id='2'>}</endfold id='2'>
0446 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0447 a <beginfold id='2'>{</beginfold id='2'>
0448 color: red;
0449 <endfold id='2'>}</endfold id='2'>
0450 <endfold id='2'>}</endfold id='2'>
0451 <endfold id='2'>}</endfold id='2'>
0452
0453 $content: "First content";
0454 $content: "Second content?" !default;
0455 $new_content: "First time reference" !default;
0456
0457 #main <beginfold id='2'>{</beginfold id='2'>
0458 content: $content;
0459 new-content: $new_content;
0460 <endfold id='2'>}</endfold id='2'>
0461
0462 @import "foo.css";
0463 @import "foo" screen;
0464 @import "http://foo.com/bar";
0465 @import url(foo);
0466
0467 $family: unquote("Droid+Sans");
0468 @import url("http://fonts.googleapis.com/css?family=#{$family}");
0469 #main <beginfold id='2'>{</beginfold id='2'>
0470 @import "example";
0471 <endfold id='2'>}</endfold id='2'>
0472
0473 .sidebar <beginfold id='2'>{</beginfold id='2'>
0474 width: 300px;
0475 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0476 width: 500px;
0477 <endfold id='2'>}</endfold id='2'>
0478 <endfold id='2'>}</endfold id='2'>
0479 @media screen <beginfold id='2'>{</beginfold id='2'>
0480 .sidebar <beginfold id='2'>{</beginfold id='2'>
0481 @media (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0482 width: 500px;
0483 <endfold id='2'>}</endfold id='2'>
0484 <endfold id='2'>}</endfold id='2'>
0485 <endfold id='2'>}</endfold id='2'>
0486
0487 $media: screen;
0488 $feature: -webkit-min-device-pixel-ratio;
0489 $value: 1.5;
0490
0491 @media #{$media} and ($feature: $value) <beginfold id='2'>{</beginfold id='2'>
0492 .sidebar <beginfold id='2'>{</beginfold id='2'>
0493 width: 500px;
0494 <endfold id='2'>}</endfold id='2'>
0495 <endfold id='2'>}</endfold id='2'>
0496
0497 .error <beginfold id='2'>{</beginfold id='2'>
0498 border: 1px #f00;
0499 background-color: #fdd;
0500 <endfold id='2'>}</endfold id='2'>
0501 .seriousError <beginfold id='2'>{</beginfold id='2'>
0502 @extend .error;
0503 border-width: 3px;
0504 <endfold id='2'>}</endfold id='2'>
0505
0506 .hoverlink <beginfold id='2'>{</beginfold id='2'>
0507 @extend a:hover;
0508 <endfold id='2'>}</endfold id='2'>
0509 a:hover <beginfold id='2'>{</beginfold id='2'>
0510 text-decoration: underline;
0511 <endfold id='2'>}</endfold id='2'>
0512
0513 #context a%extreme a %extreme <beginfold id='2'>{</beginfold id='2'>
0514 color: blue;
0515 font-weight: bold;
0516 font-size: 2em;
0517 <endfold id='2'>}</endfold id='2'>
0518 .notice <beginfold id='2'>{</beginfold id='2'>
0519 @extend %extreme;
0520 <endfold id='2'>}</endfold id='2'>
0521
0522 a.important <beginfold id='2'>{</beginfold id='2'>
0523 @extend .notice !optional;
0524 <endfold id='2'>}</endfold id='2'>
0525
0526 @media print <beginfold id='2'>{</beginfold id='2'>
0527 .page <beginfold id='2'>{</beginfold id='2'>
0528 width: 8in;
0529 @at-root (without: media) <beginfold id='2'>{</beginfold id='2'>
0530 color: red;
0531 <endfold id='2'>}</endfold id='2'>
0532 <endfold id='2'>}</endfold id='2'>
0533 <endfold id='2'>}</endfold id='2'>
0534
0535 @debug 10em + 12em;
0536
0537 @mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
0538 @if unitless($x) <beginfold id='2'>{</beginfold id='2'>
0539 @warn "Assuming #{$x} to be in pixels";
0540 $x: 1px * $x;
0541 <endfold id='2'>}</endfold id='2'>
0542 @if unitless($y) <beginfold id='2'>{</beginfold id='2'>
0543 @warn "Assuming #{$y} to be in pixels";
0544 $y: 1px * $y;
0545 <endfold id='2'>}</endfold id='2'>
0546 position: relative; left: $x; top: $y;
0547 <endfold id='2'>}</endfold id='2'>
0548
0549 @mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
0550 @if unitless($x) <beginfold id='2'>{</beginfold id='2'>
0551 @error "$x may not be unitless, was #{$x}.";
0552 <endfold id='2'>}</endfold id='2'>
0553 @if unitless($y) <beginfold id='2'>{</beginfold id='2'>
0554 @error "$y may not be unitless, was #{$y}.";
0555 <endfold id='2'>}</endfold id='2'>
0556 position: relative; left: $x; top: $y;
0557 <endfold id='2'>}</endfold id='2'>
0558
0559 p <beginfold id='2'>{</beginfold id='2'>
0560 @if 1 + 1 == 2 <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
0561 @if 5 < 3 <beginfold id='2'>{</beginfold id='2'> border: 2px dotted; <endfold id='2'>}</endfold id='2'>
0562 @if null <beginfold id='2'>{</beginfold id='2'> border: 3px double; <endfold id='2'>}</endfold id='2'>
0563 <endfold id='2'>}</endfold id='2'>
0564
0565 $type: monster;
0566 p <beginfold id='2'>{</beginfold id='2'>
0567 @if $type == ocean <beginfold id='2'>{</beginfold id='2'>
0568 color: blue;
0569 <endfold id='2'>}</endfold id='2'> @else if $type == matador <beginfold id='2'>{</beginfold id='2'>
0570 color: red;
0571 <endfold id='2'>}</endfold id='2'> @else if $type == monster <beginfold id='2'>{</beginfold id='2'>
0572 color: green;
0573 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0574 color: black;
0575 <endfold id='2'>}</endfold id='2'>
0576 <endfold id='2'>}</endfold id='2'>
0577
0578 @for $i from 1 through 3 <beginfold id='2'>{</beginfold id='2'>
0579 .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
0580 <endfold id='2'>}</endfold id='2'>
0581
0582 @each $animal in puma, sea-slug, egret, salamander <beginfold id='2'>{</beginfold id='2'>
0583 .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
0584 background-image: url('/images/#{$animal}.png');
0585 <endfold id='2'>}</endfold id='2'>
0586 <endfold id='2'>}</endfold id='2'>
0587
0588 @each $animal, $color, $cursor in (puma, black, default),
0589 (sea-slug, blue, pointer),
0590 (egret, white, move) <beginfold id='2'>{</beginfold id='2'>
0591 .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
0592 background-image: url('/images/#{$animal}.png');
0593 border: 2px solid $color;
0594 cursor: $cursor;
0595 <endfold id='2'>}</endfold id='2'>
0596 <endfold id='2'>}</endfold id='2'>
0597
0598 @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) <beginfold id='2'>{</beginfold id='2'>
0599 #{$header} <beginfold id='2'>{</beginfold id='2'>
0600 font-size: $size;
0601 <endfold id='2'>}</endfold id='2'>
0602 <endfold id='2'>}</endfold id='2'>
0603
0604 $i: 6;
0605 @while $i > 0 <beginfold id='2'>{</beginfold id='2'>
0606 .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
0607 $i: $i - 2;
0608 <endfold id='2'>}</endfold id='2'>
0609
0610 @mixin large-text <beginfold id='2'>{</beginfold id='2'>
0611 font: <beginfold id='2'>{</beginfold id='2'>
0612 family: Arial;
0613 size: 20px;
0614 weight: bold;
0615 <endfold id='2'>}</endfold id='2'>
0616 color: #ff0000;
0617 <endfold id='2'>}</endfold id='2'>
0618
0619 @mixin clearfix <beginfold id='2'>{</beginfold id='2'>
0620 display: inline-block;
0621 &:after <beginfold id='2'>{</beginfold id='2'>
0622 content: ".";
0623 display: block;
0624 height: 0;
0625 clear: both;
0626 visibility: hidden;
0627 <endfold id='2'>}</endfold id='2'>
0628 * html & <beginfold id='2'>{</beginfold id='2'> height: 1px <endfold id='2'>}</endfold id='2'>
0629 <endfold id='2'>}</endfold id='2'>
0630
0631 .page-title <beginfold id='2'>{</beginfold id='2'>
0632 @include large-text;
0633 padding: 4px;
0634 margin-top: 10px;
0635 <endfold id='2'>}</endfold id='2'>
0636
0637 @mixin compound <beginfold id='2'>{</beginfold id='2'>
0638 @include highlighted-background;
0639 @include header-text;
0640 <endfold id='2'>}</endfold id='2'>
0641
0642 @mixin highlighted-background <beginfold id='2'>{</beginfold id='2'> background-color: #fc0; <endfold id='2'>}</endfold id='2'>
0643 @mixin header-text <beginfold id='2'>{</beginfold id='2'> font-size: 20px; <endfold id='2'>}</endfold id='2'>
0644
0645 @mixin sexy-border($color, $width) <beginfold id='2'>{</beginfold id='2'>
0646 border: <beginfold id='2'>{</beginfold id='2'>
0647 color: $color;
0648 width: $width;
0649 style: dashed;
0650 <endfold id='2'>}</endfold id='2'>
0651 <endfold id='2'>}</endfold id='2'>
0652
0653 p <beginfold id='2'>{</beginfold id='2'> @include sexy-border(blue, 1in); <endfold id='2'>}</endfold id='2'>
0654
0655 p <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue); <endfold id='2'>}</endfold id='2'>
0656 h1 <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue, $width: 2in); <endfold id='2'>}</endfold id='2'>
0657
0658
0659 @mixin colors($text, $background, $border) <beginfold id='2'>{</beginfold id='2'>
0660 color: $text;
0661 background-color: $background;
0662 border-color: $border;
0663 <endfold id='2'>}</endfold id='2'>
0664
0665 $values: #ff0000, #00ff00, #0000ff;
0666 .primary <beginfold id='2'>{</beginfold id='2'>
0667 @include colors($values...);
0668 <endfold id='2'>}</endfold id='2'>
0669
0670 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
0671 .secondary <beginfold id='2'>{</beginfold id='2'>
0672 @include colors($value-map...);
0673 <endfold id='2'>}</endfold id='2'>
0674
0675 @mixin apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
0676 * html <beginfold id='2'>{</beginfold id='2'>
0677 @content;
0678 <endfold id='2'>}</endfold id='2'>
0679 <endfold id='2'>}</endfold id='2'>
0680 @include apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
0681 #logo <beginfold id='2'>{</beginfold id='2'>
0682 background-image: url(/logo.gif);
0683 <endfold id='2'>}</endfold id='2'>
0684 <endfold id='2'>}</endfold id='2'>
0685
0686 $grid-width: 40px;
0687 $gutter-width: 10px;
0688
0689 @function grid-width($n) <beginfold id='2'>{</beginfold id='2'>
0690 @return $n * $grid-width + ($n - 1) * $gutter-width;
0691 <endfold id='2'>}</endfold id='2'>
0692
0693 #sidebar <beginfold id='2'>{</beginfold id='2'> width: grid-width(5); <endfold id='2'>}</endfold id='2'>
0694
0695 @mixin unify-parent($child) <beginfold id='2'>{</beginfold id='2'>
0696 @at-root #{selector-unify(&, $child)} <beginfold id='2'>{</beginfold id='2'>
0697 @content;
0698 <endfold id='2'>}</endfold id='2'>
0699 <endfold id='2'>}</endfold id='2'>
0700
0701 :root <beginfold id='2'>{</beginfold id='2'>
0702 --font-family-sans-serif: #{inspect($font-family-sans-serif)};
0703 --font-family-monospace: #{inspect($font-family-monospace)};
0704 <endfold id='2'>}</endfold id='2'>
0705
0706 div <beginfold id='2'>{</beginfold id='2'>
0707 background-image: url("/icons/#{$name}.svg");
0708 font: #{"string"};
0709
0710 .icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
0711 position: absolute;
0712 #{$top-or-bottom}: 0;
0713 -#{$prefix}-#{$property}: $value;
0714 .icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
0715 position: absolute;
0716 #{$top-or-bottom}: 0;
0717 -#{$prefix}-#{$property}-image: $value
0718 <endfold id='2'>}</endfold id='2'>
0719 <endfold id='2'>}</endfold id='2'>
0720
0721 <beginfold id='1'>/*</beginfold id='1'>
0722 * SCSS Syntax Highlight Sample File (Standard)
0723 *
0724 * This file contains most SCSS syntax, CSS3 properties, advanced code structure.
0725 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
0726 *
0727 * @author Guo Yunhe guoyunhebrave@gmail.com
0728 * @date 2016-09-15
0729 <endfold id='1'>*/</endfold id='1'>
0730
0731 <beginfold id='1'>/*</beginfold id='1'>
0732 * Block comment
0733 *
0734 * Alert keywords:
0735 * TODO BUG FIXME
0736 <endfold id='1'>*/</endfold id='1'>
0737
0738 @charset "UTF-8";
0739
0740 @import "mixins/button";
0741
0742 // Variable define
0743
0744 $image-path: "../../static/images";
0745 $default-text-color: #333 !default; // Default can be overrided
0746 $default-font-size: 16px !default;
0747 $default-font-family: Roboto, "Droid Sans", sans-serif;
0748 $default-font-weight: 400;
0749 $default-line-height: $default-font-size * 1.8;
0750 $shadow-transparence: 0.25;
0751 $box-shadow: 0 0 3px rgba(0,0,0,$shadow-transparence);
0752 $page-width: 100rem; // kabab-case
0753 $gapOfArticle: 20px; // camelCase
0754 $body_background_color: white; // snake_case
0755
0756 // Mixins
0757
0758 @mixin border-radius($radius) <beginfold id='2'>{</beginfold id='2'>
0759 -webkit-border-radius: $radius;
0760 -moz-border-radius: $radius;
0761 -ms-border-radius: $radius;
0762 border-radius: $radius;
0763 <endfold id='2'>}</endfold id='2'>
0764
0765 .box <beginfold id='2'>{</beginfold id='2'> @include border-radius(10px); <endfold id='2'>}</endfold id='2'>
0766
0767 // Nesting
0768
0769 #home-page <beginfold id='2'>{</beginfold id='2'>
0770
0771 header <beginfold id='2'>{</beginfold id='2'>
0772 width: 80%;
0773 margin: 0 auto;
0774
0775 .cover <beginfold id='2'>{</beginfold id='2'>
0776 @include border-radius(20px);
0777 max-width: 100%;
0778
0779 &:hover <beginfold id='2'>{</beginfold id='2'>
0780 background: #ffffff;
0781 <endfold id='2'>}</endfold id='2'>
0782
0783 .like-button <beginfold id='2'>{</beginfold id='2'>
0784 font-size: $default-font-size * 0.8;
0785
0786 @media (max-width: 300px) and (min-width: 200px) <beginfold id='2'>{</beginfold id='2'>
0787 font-size: $default-font-size * 0.8;
0788
0789 .icon <beginfold id='2'>{</beginfold id='2'>
0790 width: 20px;
0791 height: 20px;
0792 <endfold id='2'>}</endfold id='2'>
0793 <endfold id='2'>}</endfold id='2'>
0794
0795 @media print <beginfold id='2'>{</beginfold id='2'>
0796 display: none;
0797 <endfold id='2'>}</endfold id='2'>
0798 <endfold id='2'>}</endfold id='2'>
0799 <endfold id='2'>}</endfold id='2'>
0800 <endfold id='2'>}</endfold id='2'>
0801 <endfold id='2'>}</endfold id='2'>
0802
0803 // Extend and inheritance
0804
0805 .message <beginfold id='2'>{</beginfold id='2'>
0806 border: $border-light;
0807 background-color: #f0f0f0;
0808 <endfold id='2'>}</endfold id='2'>
0809
0810 .message-danger <beginfold id='2'>{</beginfold id='2'>
0811 @extend .message;
0812 <endfold id='2'>}</endfold id='2'>
0813
0814
0815 // Control structures
0816
0817 @mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
0818 @if & <beginfold id='2'>{</beginfold id='2'>
0819 &:hover <beginfold id='2'>{</beginfold id='2'>
0820 color: red;
0821 <endfold id='2'>}</endfold id='2'>
0822 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0823 a <beginfold id='2'>{</beginfold id='2'>
0824 color: red;
0825 <endfold id='2'>}</endfold id='2'>
0826 <endfold id='2'>}</endfold id='2'>
0827 <endfold id='2'>}</endfold id='2'>
0828
0829
0830 // Operators
0831
0832 .container <beginfold id='2'>{</beginfold id='2'> width: 100%; <endfold id='2'>}</endfold id='2'>
0833
0834 article[role="main"] <beginfold id='2'>{</beginfold id='2'>
0835 float: left;
0836 width: 600px / 960px * 100%;
0837 <endfold id='2'>}</endfold id='2'>
0838
0839 aside[role="complementary"] <beginfold id='2'>{</beginfold id='2'>
0840 float: right;
0841 width: 300px / 960px * 100%;
0842 <endfold id='2'>}</endfold id='2'>
0843
0844
0845 // Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html
0846
0847 $color1: hsl(120deg, 100%, 50%);
0848 $color2: rgb($red, $green, blue($color1));
0849 $color3: mix($color1, $color2, [$weight]);
0850
0851
0852 // Properties
0853
0854 html, body <beginfold id='2'>{</beginfold id='2'>
0855 font-family: "Droid Sans", Arial, sans-serif;
0856 font-size: 11pt;
0857 line-height: 1.5em;
0858 max-width: 300px + $page-width - $gap / 2;
0859 background: $bg_color;
0860 text-shadow: 0 0 2px rgba(0,0,0, $transparence);
0861 box-sizing: border-box;
0862 <endfold id='2'>}</endfold id='2'>
0863
0864
0865 // Selectors
0866
0867 blockquote <beginfold id='2'>{</beginfold id='2'>
0868 margin: 0;
0869 <endfold id='2'>}</endfold id='2'>
0870
0871 header #logo <beginfold id='2'>{</beginfold id='2'>
0872 width: 100px;
0873 <endfold id='2'>}</endfold id='2'>
0874
0875 div#footer .link <beginfold id='2'>{</beginfold id='2'>
0876 color: blue;
0877 <endfold id='2'>}</endfold id='2'>
0878
0879 sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='2'>{</beginfold id='2'>
0880 font-size: 20px;
0881 <endfold id='2'>}</endfold id='2'>
0882
0883 sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='2'>{</beginfold id='2'>
0884 font-weight: bold;
0885 <endfold id='2'>}</endfold id='2'>
0886
0887
0888 // Media Queries
0889
0890 @media print <beginfold id='2'>{</beginfold id='2'>
0891 .container <beginfold id='2'>{</beginfold id='2'>
0892 width: 100%;
0893 <endfold id='2'>}</endfold id='2'>
0894 <endfold id='2'>}</endfold id='2'>
0895
0896 @media screen and (min-width: 768px) <beginfold id='2'>{</beginfold id='2'>
0897 .container <beginfold id='2'>{</beginfold id='2'>
0898 width: 600px;
0899 <endfold id='2'>}</endfold id='2'>
0900 <endfold id='2'>}</endfold id='2'>
0901
0902 @media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='2'>{</beginfold id='2'>
0903 .container <beginfold id='2'>{</beginfold id='2'>
0904 width: 720px;
0905 <endfold id='2'>}</endfold id='2'>
0906 <endfold id='2'>}</endfold id='2'>
0907
0908
0909 // Fontface
0910
0911 @font-face <beginfold id='2'>{</beginfold id='2'>
0912 font-family: MyHelvetica;
0913 src: local("Helvetica Neue Bold"),
0914 local("HelveticaNeue-Bold"),
0915 url(MgOpenModernaBold.ttf);
0916 font-weight: bold;
0917 <endfold id='2'>}</endfold id='2'>
0918
0919 // Animation (Keyframes)
0920
0921 @keyframes slidein <beginfold id='2'>{</beginfold id='2'>
0922 from <beginfold id='2'>{</beginfold id='2'>
0923 margin-left: 100%;
0924 width: 300%;
0925 <endfold id='2'>}</endfold id='2'>
0926
0927 to <beginfold id='2'>{</beginfold id='2'>
0928 margin-left: 0%;
0929 width: 100%;
0930 <endfold id='2'>}</endfold id='2'>
0931 <endfold id='2'>}</endfold id='2'>
0932
0933 <beginfold id='1'>/*</beginfold id='1'>
0934 * SCSS Syntax Highlight Sample File (Complex)
0935 *
0936 * This file contains complex SCSS syntax that can test unexpected situations.
0937 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
0938 *
0939 * @author Guo Yunhe guoyunhebrave@gmail.com
0940 * @date 2016-09-16
0941 <endfold id='1'>*/</endfold id='1'>
0942
0943
0944 // Comments with special content
0945
0946 // .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text
0947
0948 <beginfold id='1'>/*</beginfold id='1'>
0949 * .class-selector #id "string" 'comment' // comment {} [] () /* comment
0950 * TODO BUG DEBUG
0951 * body {
0952 * margin: 0 !important;
0953 * }
0954 <endfold id='1'>*/</endfold id='1'>
0955
0956 // Comments in special positions
0957
0958 $color: black <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
0959
0960 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'>
0961 <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'>;
0962 font-family: Arial <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>,
0963 "Droid Sans", <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>
0964 sans-serif<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
0965 <endfold id='2'>}</endfold id='2'>
0966
0967 @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'>
0968
0969
0970 // Strings with special content
0971
0972 @import "{} $variable /* comment */";
0973 @import "{}";
0974
0975 // Without extra breaklines and spaces
0976
0977 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'>
0978
0979 // With unnecessary breaklines and spaces
0980
0981 blockquote .ref
0982 <beginfold id='2'>{</beginfold id='2'>
0983 flex : 0 1 30%;
0984 flex-wrap : wrap;
0985 <endfold id='2'>}</endfold id='2'>
0986
0987 .sidebar <beginfold id='2'>{</beginfold id='2'>
0988 width: 300px; <endfold id='2'>}</endfold id='2'>
0989 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0990 .sidebar <beginfold id='2'>{</beginfold id='2'>
0991 width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
0992
0993 // Variable interpolation: #{}
0994
0995 $name: foo;
0996 $attr: border;
0997 p.#{$name} <beginfold id='2'>{</beginfold id='2'>
0998 #{$attr}-color: blue;
0999 <endfold id='2'>}</endfold id='2'>
1000
1001 p <beginfold id='2'>{</beginfold id='2'>
1002 $font-size: 12px;
1003 $line-height: 30px;
1004 font: #{$font-size}/#{$line-height};
1005 <endfold id='2'>}</endfold id='2'>
1006
1007 // Special selectors: HTML5 allows user defined tags
1008
1009 header <beginfold id='2'>{</beginfold id='2'>
1010 flex <beginfold id='2'>{</beginfold id='2'>
1011 width: 300px;
1012 <endfold id='2'>}</endfold id='2'>
1013 <endfold id='2'>}</endfold id='2'>