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 <beginfold id='1'>/*</beginfold id='1'> Properties <endfold id='1'>*/</endfold id='1'>
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 // this is no comment, it's just broken!
0013 background-color: hsl(0, 0%, calc(95% - 3%));
0014 font-family: "Droid Sans", Arial, sans-serif;
0015 font-size: 11pt;
0016 line-height: 1.5em;
0017 background: #fff000;
0018 text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
0019 box-sizing: border-box;
0020 font-variant-alternates: styleset(nice-style);
0021 <endfold id='2'>}</endfold id='2'>
0022
0023 <beginfold id='1'>/*</beginfold id='1'> Selectors <endfold id='1'>*/</endfold id='1'>
0024
0025 body, blockquote <beginfold id='2'>{</beginfold id='2'>
0026 margin: 0;
0027 <endfold id='2'>}</endfold id='2'>
0028
0029 header #logo <beginfold id='2'>{</beginfold id='2'>
0030 width: 100px;
0031 <endfold id='2'>}</endfold id='2'>
0032
0033 div#footer .link <beginfold id='2'>{</beginfold id='2'>
0034 color: blue;
0035 <endfold id='2'>}</endfold id='2'>
0036
0037 .something
0038 <beginfold id='2'>{</beginfold id='2'>
0039 margin-right: 0px;
0040 color: #cdd;
0041 color: #AAFE04;
0042 color: rgb(10%,30%,43%);
0043 background: maroon;
0044 <endfold id='2'>}</endfold id='2'>
0045
0046 sidebar #subscribe .subscribe_form input[type="text"] <beginfold id='2'>{</beginfold id='2'>
0047 font-size: 20px;
0048 <endfold id='2'>}</endfold id='2'>
0049
0050 sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] <beginfold id='2'>{</beginfold id='2'>
0051 font-weight: bold;
0052 <endfold id='2'>}</endfold id='2'>
0053
0054 input[value=text]
0055 input[value= text ]
0056 input[value= text i]
0057 input[value= "text" i]
0058 input[value=i]
0059 input[value= i] <beginfold id='2'>{</beginfold id='2'>
0060 font-size: 20px;
0061 <endfold id='2'>}</endfold id='2'>
0062
0063 #header,
0064 a:hover,
0065 p.intro:first-letter,
0066 p:lang(nl),
0067 img[align="right"]
0068 <beginfold id='2'>{</beginfold id='2'>
0069 border: 1px solid Qt::red !important;
0070 -moz-border-radius: 15px; <beginfold id='1'>/*</beginfold id='1'> unknown properties render italic <endfold id='1'>*/</endfold id='1'>
0071 <endfold id='2'>}</endfold id='2'>
0072
0073 .nice-look <beginfold id='2'>{</beginfold id='2'>
0074 <endfold id='2'>}</endfold id='2'>
0075
0076 ul <beginfold id='2'>{</beginfold id='2'>
0077 list-style: thumbs;
0078 <endfold id='2'>}</endfold id='2'>
0079
0080 <beginfold id='1'>/*</beginfold id='1'> SVG <a> <endfold id='1'>*/</endfold id='1'>
0081 svg|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0082
0083 <beginfold id='1'>/*</beginfold id='1'> XHTML and SVG <a> <endfold id='1'>*/</endfold id='1'>
0084 *|a <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0085
0086 *<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0087 .class<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0088 #id<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0089 :hover<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0090 :lang(fr)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0091 E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0092 E F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0093 E>F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0094 E > F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0095 E~F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0096 E ~ F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0097 E:first-child<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0098 E:visited<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0099 E::after<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0100 E:lang(c)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0101 E:lang(fr-ca)<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0102 E + F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0103 E+F<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0104 E[foo]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0105 E[foo=warning]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0106 E[foo="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0107 E[foo~="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0108 E[foo^="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0109 E[foo$="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0110 E[foo*="warning"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0111 E[lang|="en"]<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0112 DIV.warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0113 DIV .warning<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0114 E#myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0115 E #myid<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0116 E,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0117 E, E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0118 E ,E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0119 E , E<beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0120
0121 p:nth-child(2) <beginfold id='2'>{</beginfold id='2'>
0122 background: red;
0123 <endfold id='2'>}</endfold id='2'>
0124
0125 <beginfold id='1'>/*</beginfold id='1'> Elements that are not <div> or <span> elements <endfold id='1'>*/</endfold id='1'>
0126 body :not(div):not(span) <beginfold id='2'>{</beginfold id='2'>
0127 font-weight: bold;
0128 <endfold id='2'>}</endfold id='2'>
0129
0130 <beginfold id='1'>/*</beginfold id='1'> Elements that are not `.crazy` or `.fancy` <endfold id='1'>*/</endfold id='1'>
0131 <beginfold id='1'>/*</beginfold id='1'> Note that this syntax is not well supported yet. <endfold id='1'>*/</endfold id='1'>
0132 body :not(.crazy, .fancy) <beginfold id='2'>{</beginfold id='2'>
0133 font-family: sans-serif;
0134 <endfold id='2'>}</endfold id='2'>
0135
0136 :nth-child(odd) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0137 :nth-child(even) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0138 :nth-child(4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0139 :nth-child(4n) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0140 :nth-child(3n+4) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0141 :nth-child(-n+3) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0142 :nth-child(n+8):nth-child(-n+15) <beginfold id='2'>{</beginfold id='2'> color: lime; <endfold id='2'>}</endfold id='2'>
0143
0144 .first span:nth-child(2n+1),
0145 .second span:nth-child(2n+1),
0146 .third span:nth-of-type(2n+1) <beginfold id='2'>{</beginfold id='2'>
0147 background-color: lime;
0148 unknown-property: lime;
0149 <endfold id='2'>}</endfold id='2'>
0150
0151 :root<beginfold id='2'>{</beginfold id='2'>
0152 --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'>
0153 <endfold id='2'>}</endfold id='2'>
0154
0155 :root,
0156 :root:lang(en) <beginfold id='2'>{</beginfold id='2'>--external-link: "external link";<endfold id='2'>}</endfold id='2'>
0157 :root:lang(de) <beginfold id='2'>{</beginfold id='2'>--external-link: "externer Link";<endfold id='2'>}</endfold id='2'>
0158
0159 a[href^="http"]::after <beginfold id='2'>{</beginfold id='2'>content: " (" var(--external-link) ")"<endfold id='2'>}</endfold id='2'>
0160
0161 one <beginfold id='2'>{</beginfold id='2'> --foo: 10px; <endfold id='2'>}</endfold id='2'>
0162 two <beginfold id='2'>{</beginfold id='2'> --bar: calc(var(--foo) + 10px); <endfold id='2'>}</endfold id='2'>
0163 three <beginfold id='2'>{</beginfold id='2'> --foo: calc(var(--bar) + 10px); <endfold id='2'>}</endfold id='2'>
0164 .foo <beginfold id='2'>{</beginfold id='2'>
0165 --gap: 20;
0166 margin-top: var(--gap)px; <beginfold id='1'>/*</beginfold id='1'>20 px<endfold id='1'>*/</endfold id='1'>
0167 margin-top: calc(var(--gap) * 1px); <beginfold id='1'>/*</beginfold id='1'>20px<endfold id='1'>*/</endfold id='1'>
0168 <endfold id='2'>}</endfold id='2'>
0169
0170 foo <beginfold id='2'>{</beginfold id='2'>
0171 width: calc(50% -8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0172 width: calc(50%- 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0173 width: calc(50% +8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0174 width: calc(50%+ 8px); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0175 width: calc(2px -var(--a)); <beginfold id='1'>/*</beginfold id='1'> invalid <endfold id='1'>*/</endfold id='1'>
0176 width: calc(50%*-8px);
0177 width: calc(50% - 8px);
0178 width: calc(50% + -8px);
0179 width: calc(50% +(8px));
0180 width: calc(2px -(var(--a)));
0181 <endfold id='2'>}</endfold id='2'>
0182
0183 sweet-alert input:focus::-moz-placeholder <beginfold id='2'>{</beginfold id='2'>
0184 -webkit-transition: opacity 0.3s 0.03s ease;
0185 transition: opacity 0.3s 0.03s ease;
0186 opacity: 0.5;
0187 <endfold id='2'>}</endfold id='2'>
0188
0189
0190 @font-feature-values Font One <beginfold id='2'>{</beginfold id='2'>
0191 @styleset <beginfold id='2'>{</beginfold id='2'>
0192 nice-style: 12;
0193 <endfold id='2'>}</endfold id='2'>
0194 <endfold id='2'>}</endfold id='2'>
0195
0196 @font-feature-values Font Two <beginfold id='2'>{</beginfold id='2'>
0197 @styleset <beginfold id='2'>{</beginfold id='2'>
0198 nice-style: 4;
0199 <endfold id='2'>}</endfold id='2'>
0200 <endfold id='2'>}</endfold id='2'>
0201
0202 @font-palette-values --identifier <beginfold id='2'>{</beginfold id='2'>
0203 font-family: Bixa;
0204 <endfold id='2'>}</endfold id='2'>
0205
0206 @counter-style thumbs <beginfold id='2'>{</beginfold id='2'>
0207 system: cyclic;
0208 symbols: "\1F44D";
0209 suffix: " ";
0210 <endfold id='2'>}</endfold id='2'>
0211
0212 @font-face <beginfold id='2'>{</beginfold id='2'>
0213 font-family: "Open Sans";
0214 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0215 unknown: 2px;
0216 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
0217 url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
0218 <endfold id='2'>}</endfold id='2'>
0219
0220 @page <beginfold id='2'>{</beginfold id='2'>
0221 margin: 1cm;
0222 <endfold id='2'>}</endfold id='2'>
0223
0224 @page :first <beginfold id='2'>{</beginfold id='2'>
0225 margin: 2cm;
0226 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0227 marks: crop cross;
0228 <endfold id='2'>}</endfold id='2'>
0229
0230 @page :unknown <beginfold id='2'>{</beginfold id='2'>
0231 margin: 2cm;
0232 <endfold id='2'>}</endfold id='2'>
0233
0234 @document url("https://www.example.com/") <beginfold id='2'>{</beginfold id='2'>
0235 h1 <beginfold id='2'>{</beginfold id='2'>
0236 color: green;
0237 <endfold id='2'>}</endfold id='2'>
0238 <endfold id='2'>}</endfold id='2'>
0239
0240 @charset "UTF-8";
0241
0242 @import 'custom.css';
0243 @import "common.css" screen;
0244 @import url("fineprint.css") print;
0245 @import url(fineprint.css) print;
0246 @import url('bluish.css') speech;
0247 @import url("chrome://communicator/skin/");
0248 @import url('landscape.css') screen and (orientation:landscape);
0249 @import url("othersheet.css") screen, print;
0250
0251 @namespace url(http://www.w3.org/1999/xhtml);
0252 @namespace svg url(http://www.w3.org/2000/svg);
0253
0254 <beginfold id='1'>/*</beginfold id='1'> Animation (Keyframes) <endfold id='1'>*/</endfold id='1'>
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 <beginfold id='1'>/*</beginfold id='1'> Media Queries <endfold id='1'>*/</endfold id='1'>
0282
0283 @media print <beginfold id='2'>{</beginfold id='2'>
0284 .container <beginfold id='2'>{</beginfold id='2'>
0285 width: 100%;
0286 <endfold id='2'>}</endfold id='2'>
0287 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0288 <beginfold id='1'>/*</beginfold id='1'> comments <endfold id='1'>*/</endfold id='1'>
0289 a:hover <beginfold id='2'>{</beginfold id='2'> color: red <endfold id='2'>}</endfold id='2'>
0290
0291 #header
0292 <beginfold id='2'>{</beginfold id='2'>
0293 display: none;
0294 <endfold id='2'>}</endfold id='2'>
0295 <endfold id='2'>}</endfold id='2'>
0296
0297 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0298 .sidebar <beginfold id='2'>{</beginfold id='2'>
0299 width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
0300
0301 @media screen and (min-width: 768px) and (max-width: 960px) <beginfold id='2'>{</beginfold id='2'>
0302 .container <beginfold id='2'>{</beginfold id='2'>
0303 width: 720px;
0304 <endfold id='2'>}</endfold id='2'>
0305 <endfold id='2'>}</endfold id='2'>
0306
0307 @media (max-width: 600px) <beginfold id='2'>{</beginfold id='2'>
0308 .sidebar <beginfold id='2'>{</beginfold id='2'>
0309 display: none;
0310 <endfold id='2'>}</endfold id='2'>
0311 <endfold id='2'>}</endfold id='2'>
0312
0313 @media print <beginfold id='2'>{</beginfold id='2'>
0314 <endfold id='2'>}</endfold id='2'>
0315
0316 @media (height > 600px) <beginfold id='2'>{</beginfold id='2'>
0317 body <beginfold id='2'>{</beginfold id='2'>
0318 line-height: 1.4;
0319 <endfold id='2'>}</endfold id='2'>
0320 <endfold id='2'>}</endfold id='2'>
0321
0322 @media (400px <= width <= 700px) <beginfold id='2'>{</beginfold id='2'>
0323 body <beginfold id='2'>{</beginfold id='2'>
0324 line-height: 1.4;
0325 <endfold id='2'>}</endfold id='2'>
0326 <endfold id='2'>}</endfold id='2'>
0327
0328 @supports (display: grid) <beginfold id='2'>{</beginfold id='2'>
0329 div <beginfold id='2'>{</beginfold id='2'>
0330 display: grid;
0331 <endfold id='2'>}</endfold id='2'>
0332 <endfold id='2'>}</endfold id='2'>
0333
0334 @supports font-tech(color-COLRv1) <beginfold id='2'>{</beginfold id='2'>
0335 div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0336 <endfold id='2'>}</endfold id='2'>
0337
0338 @supports not (not (transform-origin: 2px)) <beginfold id='2'>{</beginfold id='2'>
0339 div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0340 <endfold id='2'>}</endfold id='2'>
0341
0342 @supports (display: grid) and (not (display: inline-grid)) <beginfold id='2'>{</beginfold id='2'>
0343 div <beginfold id='2'>{</beginfold id='2'><endfold id='2'>}</endfold id='2'>
0344 <endfold id='2'>}</endfold id='2'>
0345
0346 <beginfold id='1'>/*</beginfold id='1'>
0347 * CSS Syntax Highlight Sample File (Standard)
0348 *
0349 * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
0350 * @keyframes annotations.
0351 *
0352 * @author Guo Yunhe guoyunhebrave@gmail.com
0353 * @date 2016-09-16
0354 <endfold id='1'>*/</endfold id='1'>
0355
0356 <beginfold id='1'>/*</beginfold id='1'>
0357 * Block comment
0358 *
0359 * Alert keywords:
0360 * TODO BUG FIXME
0361 <endfold id='1'>*/</endfold id='1'>
0362
0363
0364 <beginfold id='1'>/*</beginfold id='1'> Region markers <endfold id='1'>*/</endfold id='1'>
0365
0366 <beginfold id='3'>/*BEGIN Comment */</beginfold id='3'>
0367
0368
0369 <endfold id='3'>/*END Comment */</endfold id='3'>
0370
0371 <beginfold id='1'>/*</beginfold id='1'>
0372 * CSS Syntax Highlight Sample File (Complex)
0373 *
0374 * This file contains complex CSS syntax that can test unexpected situations.
0375 *
0376 * @author Guo Yunhe guoyunhebrave@gmail.com
0377 * @date 2016-09-16
0378 <endfold id='1'>*/</endfold id='1'>
0379
0380
0381 <beginfold id='1'>/*</beginfold id='1'> Comments with special content <endfold id='1'>*/</endfold id='1'>
0382
0383 <beginfold id='1'>/*</beginfold id='1'>
0384 * .class-selector #id "string" 'comment' // comment {} [] () /* comment
0385 * TODO BUG DEBUG
0386 * body {
0387 * margin: 0 !important;
0388 * }
0389 <endfold id='1'>*/</endfold id='1'>
0390
0391 <beginfold id='1'>/*</beginfold id='1'> Comments in special positions <endfold id='1'>*/</endfold id='1'>
0392
0393 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'>
0394 <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'>;
0395 font-family: Arial <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>,
0396 "Droid Sans", <beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>
0397 sans-serif<beginfold id='1'>/*</beginfold id='1'> comment here <endfold id='1'>*/</endfold id='1'>;
0398 <endfold id='2'>}</endfold id='2'>
0399
0400 @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'>
0401
0402
0403 <beginfold id='1'>/*</beginfold id='1'> Strings with special content <endfold id='1'>*/</endfold id='1'>
0404
0405 @import url("{} $variable /* comment */");
0406
0407
0408 <beginfold id='1'>/*</beginfold id='1'> Without extra breaklines and spaces <endfold id='1'>*/</endfold id='1'>
0409
0410 pre.primary:hover.large:nth-child(2n-1)<beginfold id='2'>{</beginfold id='2'>font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)<endfold id='2'>}</endfold id='2'>
0411
0412
0413 <beginfold id='1'>/*</beginfold id='1'> With unnecessary breaklines and spaces <endfold id='1'>*/</endfold id='1'>
0414
0415 blockquote .ref
0416 <beginfold id='2'>{</beginfold id='2'>
0417 flex : 0 1 30%;
0418 flex-wrap : wrap;
0419 <endfold id='2'>}</endfold id='2'>
0420
0421 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0422 .sidebar <beginfold id='2'>{</beginfold id='2'>
0423 width: 500px; <endfold id='2'>}</endfold id='2'> <endfold id='2'>}</endfold id='2'>
0424
0425
0426
0427 <beginfold id='1'>/*</beginfold id='1'> Special selectors: HTML5 allows user defined tags <endfold id='1'>*/</endfold id='1'>
0428
0429 header <beginfold id='2'>{</beginfold id='2'>
0430 flex <beginfold id='2'>{</beginfold id='2'>
0431 width: 300px;
0432 <endfold id='2'>}</endfold id='2'>
0433 <endfold id='2'>}</endfold id='2'>
0434
0435 <beginfold id='1'>/*</beginfold id='1'> CSS Nesting <endfold id='1'>*/</endfold id='1'>
0436
0437 header <beginfold id='2'>{</beginfold id='2'>
0438 .abc <beginfold id='2'>{</beginfold id='2'>
0439 width: 300px;
0440 <endfold id='2'>}</endfold id='2'>
0441 width: 300px;
0442 & width:hover <beginfold id='2'>{</beginfold id='2'>
0443 width: 300px;
0444 <endfold id='2'>}</endfold id='2'>
0445 width: 300px;
0446 <endfold id='2'>}</endfold id='2'>
0447
0448
0449 <beginfold id='1'>/*</beginfold id='1'>*
0450 * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
0451 <endfold id='1'>*/</endfold id='1'>
0452 // These comments are only one line long each.
0453 // They won't appear in the CSS output,
0454 // since they use the single-line comment syntax.
0455
0456 #sidebar <beginfold id='2'>{</beginfold id='2'> width: grid-width(5); <endfold id='2'>}</endfold id='2'>
0457
0458 #main <beginfold id='2'>{</beginfold id='2'>
0459 content: $content;
0460 new-content: $new_content;
0461 <endfold id='2'>}</endfold id='2'>
0462
0463 #main <beginfold id='2'>{</beginfold id='2'>
0464 $width: 5em !global;
0465 width: $width;
0466 <endfold id='2'>}</endfold id='2'>
0467
0468 #main <beginfold id='2'>{</beginfold id='2'>
0469 @import "example";
0470 <endfold id='2'>}</endfold id='2'>
0471
0472 #main <beginfold id='2'>{</beginfold id='2'>
0473 color: black;
0474 &-sidebar <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
0475 <endfold id='2'>}</endfold id='2'>
0476
0477 #main p <beginfold id='2'>{</beginfold id='2'>
0478 color: #00ff00;
0479 width: 97%;
0480
0481 .redbox <beginfold id='2'>{</beginfold id='2'>
0482 background-color: #ff0000;
0483 color: #000000;
0484 <endfold id='2'>}</endfold id='2'>
0485 <endfold id='2'>}</endfold id='2'>
0486
0487 #main <beginfold id='2'>{</beginfold id='2'>
0488 color: black;
0489 a <beginfold id='2'>{</beginfold id='2'>
0490 font-weight: bold;
0491 &:hover <beginfold id='2'>{</beginfold id='2'> color: red; <endfold id='2'>}</endfold id='2'>
0492 <endfold id='2'>}</endfold id='2'>
0493 <endfold id='2'>}</endfold id='2'>
0494
0495 .sidebar <beginfold id='2'>{</beginfold id='2'>
0496 float: left;
0497 margin-left: pow(4, 3) * 1px;
0498 <endfold id='2'>}</endfold id='2'>
0499
0500 .banner <beginfold id='2'>{</beginfold id='2'>
0501 background-color: $primary-color;
0502 color: scale-color($primary-color, $lightness: +40%);
0503 <endfold id='2'>}</endfold id='2'>
0504
0505 .micro <beginfold id='2'>{</beginfold id='2'>
0506 width: sum(50px, 30px, 100px);
0507 width: min($widths...);
0508 <endfold id='2'>}</endfold id='2'>
0509
0510 a.funky:hover <beginfold id='2'>{</beginfold id='2'>
0511 font: 20px/24px fantasy <beginfold id='2'>{</beginfold id='2'>
0512 weight: bold;
0513 <endfold id='2'>}</endfold id='2'>
0514 <endfold id='2'>}</endfold id='2'>
0515
0516 .foo.bar .baz.bang, .bip.qux <beginfold id='2'>{</beginfold id='2'>
0517 $selector: &;
0518 <endfold id='2'>}</endfold id='2'>
0519
0520 ul, ol <beginfold id='2'>{</beginfold id='2'>
0521 text-align: left;
0522
0523 & & <beginfold id='2'>{</beginfold id='2'>
0524 padding: <beginfold id='2'>{</beginfold id='2'>
0525 bottom: 0;
0526 left: 0;
0527 <endfold id='2'>}</endfold id='2'>
0528 <endfold id='2'>}</endfold id='2'>
0529
0530 font-size: scale-below(20px, 16px);
0531 border-radius: $border-radius;
0532 box-shadow: $box-shadow;
0533 <endfold id='2'>}</endfold id='2'>
0534
0535 ul li <beginfold id='2'>{</beginfold id='2'>
0536 $padding: 16px;
0537 padding-left: $padding;
0538 [dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
0539 padding: <beginfold id='2'>{</beginfold id='2'>
0540 left: 0;
0541 right: $padding;
0542 <endfold id='2'>}</endfold id='2'>
0543 <endfold id='2'>}</endfold id='2'>
0544 <endfold id='2'>}</endfold id='2'>
0545
0546 div <beginfold id='2'>{</beginfold id='2'>
0547 background-image: url("/icons/#{$name}.svg");
0548 font: #{"string"};
0549 <endfold id='2'>}</endfold id='2'>
0550
0551 p <beginfold id='2'>{</beginfold id='2'>
0552 font: 10px/8px; // Plain CSS, no division
0553 $width: 1000px;
0554 width: $width/2; // Uses a variable, does division
0555 width: round(1.5)/2; // Uses a function, does division
0556 height: (500px/2); // Uses parentheses, does division
0557 margin-left: 5px + 8px/2px; // Uses +, does division
0558 font: (italic bold 10px/8px); // In a list, parentheses don't count
0559 <endfold id='2'>}</endfold id='2'>
0560
0561 p <beginfold id='2'>{</beginfold id='2'>
0562 $font-size: 12px;
0563 $line-height: 30px;
0564 font: #{$font-size}/#{$line-height};
0565 <endfold id='2'>}</endfold id='2'>
0566
0567 p <beginfold id='2'>{</beginfold id='2'>
0568 color: #010203 + #040506;
0569 color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
0570 <endfold id='2'>}</endfold id='2'>
0571
0572 p <beginfold id='2'>{</beginfold id='2'>
0573 color: opacify($translucent-red, 0.3);
0574 background-color: transparentize($translucent-red, 0.25);
0575 <endfold id='2'>}</endfold id='2'>
0576
0577 div <beginfold id='2'>{</beginfold id='2'>
0578 filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
0579 <endfold id='2'>}</endfold id='2'>
0580
0581 p <beginfold id='2'>{</beginfold id='2'>
0582 cursor: e + -resize;
0583 <endfold id='2'>}</endfold id='2'>
0584
0585 p <beginfold id='2'>{</beginfold id='2'>
0586 width: 1em + (2em * 3);
0587 width: #{$n}px;
0588 <endfold id='2'>}</endfold id='2'>
0589
0590 p <beginfold id='2'>{</beginfold id='2'>
0591 color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
0592 <endfold id='2'>}</endfold id='2'>
0593
0594 :root <beginfold id='2'>{</beginfold id='2'>
0595 --font-family-sans-serif: #{inspect($font-family-sans-serif)};
0596 --font-family-monospace: #{inspect($font-family-monospace)};
0597 <endfold id='2'>}</endfold id='2'>
0598
0599 p:before <beginfold id='2'>{</beginfold id='2'>
0600 font-family: sans- + "serif";
0601 content: "Foo " + Bar;
0602 content: "I ate #{5 + 10} pies!";
0603 content: "I ate #{$value} pies!";
0604 <endfold id='2'>}</endfold id='2'>
0605
0606 a <beginfold id='2'>{</beginfold id='2'>
0607 font-weight: bold;
0608 text-decoration: none;
0609 &:hover <beginfold id='2'>{</beginfold id='2'> text-decoration: underline; <endfold id='2'>}</endfold id='2'>
0610 body.firefox & <beginfold id='2'>{</beginfold id='2'> font-weight: normal; <endfold id='2'>}</endfold id='2'>
0611 <endfold id='2'>}</endfold id='2'>
0612
0613
0614 #context a%extreme a %extreme <beginfold id='2'>{</beginfold id='2'>
0615 color: blue;
0616 font-weight: bold;
0617 font-size: 2em;
0618 <endfold id='2'>}</endfold id='2'>
0619
0620 %strong-alert:hover <beginfold id='2'>{</beginfold id='2'>
0621 color: red;
0622 <endfold id='2'>}</endfold id='2'>
0623 .alert:hover, %strong-alert <beginfold id='2'>{</beginfold id='2'>
0624 font-weight: bold;
0625 <endfold id='2'>}</endfold id='2'>
0626
0627
0628 p.#{$name} <beginfold id='2'>{</beginfold id='2'>
0629 #{$attr}-color: blue;
0630 <endfold id='2'>}</endfold id='2'>
0631
0632 p <beginfold id='2'>{</beginfold id='2'>
0633 background: <beginfold id='2'>{</beginfold id='2'>
0634 color: red;
0635 <endfold id='2'>}</endfold id='2'>
0636 background-#{prop}: red;
0637 #{prop}-color: red;
0638
0639 #a#{""}c .a#{""}c a#{""}c <beginfold id='2'>{</beginfold id='2'>
0640 <endfold id='2'>}</endfold id='2'>
0641 <endfold id='2'>}</endfold id='2'>
0642
0643 .icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
0644 position: absolute;
0645 #{$top-or-bottom}: 0;
0646 -#{$prefix}-#{$property}: $value;
0647 .icon-#{$name} <beginfold id='2'>{</beginfold id='2'>
0648 position: absolute;
0649 #{$top-or-bottom}: 0;
0650 -#{$prefix}-#{$property}-image: $value
0651 <endfold id='2'>}</endfold id='2'>
0652 <endfold id='2'>}</endfold id='2'>
0653
0654
0655 @mixin firefox-message($selector) <beginfold id='2'>{</beginfold id='2'>
0656 body.firefox #{$selector}:before <beginfold id='2'>{</beginfold id='2'>
0657 content: "Hi, Firefox users!";
0658 <endfold id='2'>}</endfold id='2'>
0659 <endfold id='2'>}</endfold id='2'>
0660
0661 @mixin clearfix <beginfold id='2'>{</beginfold id='2'>
0662 display: inline-block;
0663 &:after <beginfold id='2'>{</beginfold id='2'>
0664 content: ".";
0665 display: block;
0666 <endfold id='2'>}</endfold id='2'>
0667 * html & <beginfold id='2'>{</beginfold id='2'> height: 1px <endfold id='2'>}</endfold id='2'>
0668 <endfold id='2'>}</endfold id='2'>
0669
0670 @mixin apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
0671 * html <beginfold id='2'>{</beginfold id='2'>
0672 @content;
0673 <endfold id='2'>}</endfold id='2'>
0674 <endfold id='2'>}</endfold id='2'>
0675
0676 @mixin highlighted-background <beginfold id='2'>{</beginfold id='2'> background-color: #fc0; <endfold id='2'>}</endfold id='2'>
0677
0678 @mixin sexy-border($color, $width) <beginfold id='2'>{</beginfold id='2'>
0679 border: <beginfold id='2'>{</beginfold id='2'>
0680 color: $color;
0681 width: $width;
0682 style: dashed;
0683 <endfold id='2'>}</endfold id='2'>
0684 color: #ff0000;
0685 <endfold id='2'>}</endfold id='2'>
0686
0687 @mixin border-radius($radius) <beginfold id='2'>{</beginfold id='2'>
0688 -webkit-border-radius: $radius;
0689 -moz-border-radius: $radius;
0690 -ms-border-radius: $radius;
0691 border-radius: $radius;
0692 <endfold id='2'>}</endfold id='2'>
0693
0694 @mixin define-emoji($name, $glyph) <beginfold id='2'>{</beginfold id='2'>
0695 span.emoji-#{$name} <beginfold id='2'>{</beginfold id='2'>
0696 font-family: IconFont;
0697 <endfold id='2'>}</endfold id='2'>
0698 <endfold id='2'>}</endfold id='2'>
0699
0700 @mixin styles <beginfold id='2'>{</beginfold id='2'>
0701 code <beginfold id='2'>{</beginfold id='2'>
0702 border-radius: $-border-radius;
0703 box-shadow: -box-shadow();
0704 <endfold id='2'>}</endfold id='2'>
0705 <endfold id='2'>}</endfold id='2'>
0706
0707 @mixin rtl($property, $ltr-value, $rtl-value) <beginfold id='2'>{</beginfold id='2'>
0708 #{$property}: $ltr-value;
0709
0710 [dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
0711 #{$property}: $rtl-value;
0712 <endfold id='2'>}</endfold id='2'>
0713 <endfold id='2'>}</endfold id='2'>
0714
0715 @mixin replace-text($image, $x: 50%, $y: 50%) <beginfold id='2'>{</beginfold id='2'>
0716 text-indent: -99999em;
0717 overflow: hidden;
0718 text-align: left;
0719
0720 background: <beginfold id='2'>{</beginfold id='2'>
0721 image: $image;
0722 repeat: no-repeat;
0723 position: $x $y;
0724 <endfold id='2'>}</endfold id='2'>
0725 <endfold id='2'>}</endfold id='2'>
0726
0727 @mixin btn($args...) <beginfold id='2'>{</beginfold id='2'>
0728 @warn "The btn() mixin is deprecated. Include button() instead.";
0729 @import url("http://fonts.googleapis.com/css?family=#{$family}");
0730 @include button($args...);
0731 <endfold id='2'>}</endfold id='2'>
0732
0733 @mixin hover <beginfold id='2'>{</beginfold id='2'>
0734 &:not([disabled]):hover <beginfold id='2'>{</beginfold id='2'>
0735 @content;
0736 <endfold id='2'>}</endfold id='2'>
0737 <endfold id='2'>}</endfold id='2'>
0738
0739 @mixin adjust-location($x, $y) <beginfold id='2'>{</beginfold id='2'>
0740 @if unitless($x) <beginfold id='2'>{</beginfold id='2'>
0741 @error "$x may not be unitless, was #{$x}.";
0742 @warn "Assuming #{$x} to be in pixels";
0743 $x: 1px * $x;
0744 <endfold id='2'>}</endfold id='2'>
0745 @if unitless($y) <beginfold id='2'>{</beginfold id='2'>
0746 @error "$y may not be unitless, was #{$y}.";
0747 @warn "Assuming #{$y} to be in pixels";
0748 $y: 1px * $y;
0749 <endfold id='2'>}</endfold id='2'>
0750 position: relative; left: $x; top: $y;
0751 <endfold id='2'>}</endfold id='2'>
0752
0753 @mixin avatar($size, $circle: false) <beginfold id='2'>{</beginfold id='2'>
0754 width: $size;
0755 height: $size;
0756
0757 @if $circle != 0 <beginfold id='2'>{</beginfold id='2'>
0758 border-radius: math.div($size, 2);
0759 <endfold id='2'>}</endfold id='2'>
0760 <endfold id='2'>}</endfold id='2'>
0761
0762 @mixin theme-colors($light-theme: true) <beginfold id='2'>{</beginfold id='2'>
0763 @if $light-theme <beginfold id='2'>{</beginfold id='2'>
0764 background-color: $light-background;
0765 color: $light-text;
0766 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0767 background-color: $dark-background;
0768 color: $dark-text;
0769 <endfold id='2'>}</endfold id='2'>
0770 <endfold id='2'>}</endfold id='2'>
0771
0772 @mixin configure($black: null, $border-radius: null, $box-shadow: null) <beginfold id='2'>{</beginfold id='2'>
0773 @if $black <beginfold id='2'>{</beginfold id='2'>
0774 $-black: $black !global;
0775 <endfold id='2'>}</endfold id='2'>
0776 @if $border-radius <beginfold id='2'>{</beginfold id='2'>
0777 $-border-radius: $border-radius !global;
0778 <endfold id='2'>}</endfold id='2'>
0779 <endfold id='2'>}</endfold id='2'>
0780
0781 @mixin does-parent-exist <beginfold id='2'>{</beginfold id='2'>
0782 @if & <beginfold id='2'>{</beginfold id='2'>
0783 &:hover <beginfold id='2'>{</beginfold id='2'>
0784 color: red;
0785 <endfold id='2'>}</endfold id='2'>
0786 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0787 a <beginfold id='2'>{</beginfold id='2'>
0788 color: red;
0789 <endfold id='2'>}</endfold id='2'>
0790 <endfold id='2'>}</endfold id='2'>
0791 <endfold id='2'>}</endfold id='2'>
0792
0793 @mixin order($height, $selectors...) <beginfold id='2'>{</beginfold id='2'>
0794 @for $i from 0 to length($selectors) <beginfold id='2'>{</beginfold id='2'>
0795 #{nth($selectors, $i + 1)} <beginfold id='2'>{</beginfold id='2'>
0796 position: absolute;
0797 height: $height;
0798 margin-top: $i * $height;
0799 <endfold id='2'>}</endfold id='2'>
0800 <endfold id='2'>}</endfold id='2'>
0801 <endfold id='2'>}</endfold id='2'>
0802
0803 @mixin syntax-colors($args...) <beginfold id='2'>{</beginfold id='2'>
0804 @debug meta.keywords($args);
0805 // (string: #080, comment: #800, variable: #60b)
0806
0807 @each $name, $color in meta.keywords($args) <beginfold id='2'>{</beginfold id='2'>
0808 pre span.stx-#{$name} <beginfold id='2'>{</beginfold id='2'>
0809 color: $color;
0810 <endfold id='2'>}</endfold id='2'>
0811 <endfold id='2'>}</endfold id='2'>
0812 <endfold id='2'>}</endfold id='2'>
0813
0814 @mixin media($types...) <beginfold id='2'>{</beginfold id='2'>
0815 @each $type in $types <beginfold id='2'>{</beginfold id='2'>
0816 @media #{$type} <beginfold id='2'>{</beginfold id='2'>
0817 @content($type);
0818 <endfold id='2'>}</endfold id='2'>
0819 <endfold id='2'>}</endfold id='2'>
0820 <endfold id='2'>}</endfold id='2'>
0821
0822 @mixin reflexive-position($property, $value) <beginfold id='2'>{</beginfold id='2'>
0823 @if $property != left and $property != right <beginfold id='2'>{</beginfold id='2'>
0824 @error "Property #{$property} must be either left or right.";
0825 <endfold id='2'>}</endfold id='2'>
0826
0827 $left-value: if($property == right, initial, $value);
0828 $right-value: if($property == right, $value, initial);
0829
0830 left: $left-value;
0831 right: $right-value;
0832 [dir=rtl] & <beginfold id='2'>{</beginfold id='2'>
0833 left: $right-value;
0834 right: $left-value;
0835 <endfold id='2'>}</endfold id='2'>
0836 <endfold id='2'>}</endfold id='2'>
0837
0838 @mixin prefix($property, $value, $prefixes) <beginfold id='2'>{</beginfold id='2'>
0839 @each $prefix in $prefixes <beginfold id='2'>{</beginfold id='2'>
0840 @if not index($known-prefixes, $prefix) <beginfold id='2'>{</beginfold id='2'>
0841 @warn "Unknown prefix #{$prefix}.";
0842 <endfold id='2'>}</endfold id='2'>
0843
0844 -#{$prefix}-#{$property}: $value;
0845 <endfold id='2'>}</endfold id='2'>
0846 #{$property}: $value;
0847 <endfold id='2'>}</endfold id='2'>
0848
0849 @mixin inset-divider-offset($offset, $padding) <beginfold id='2'>{</beginfold id='2'>
0850 $divider-offset: (2 * $padding) + $offset;
0851 @debug "divider offset: #{$divider-offset}";
0852
0853 margin-left: $divider-offset;
0854 width: calc(100% - #{$divider-offset});
0855 <endfold id='2'>}</endfold id='2'>
0856
0857
0858 @mixin sticky-position <beginfold id='2'>{</beginfold id='2'>
0859 position: fixed;
0860 @supports (position: sticky) <beginfold id='2'>{</beginfold id='2'>
0861 position: sticky;
0862 <endfold id='2'>}</endfold id='2'>
0863 <endfold id='2'>}</endfold id='2'>
0864
0865
0866 @at-root (without: media) {
0867 color: #111;
0868 <endfold id='2'>}</endfold id='2'>
0869 @at-root (with: rule) {
0870 font-size: 1.2em;
0871 <endfold id='2'>}</endfold id='2'>
0872
0873 @mixin unify-parent($child) <beginfold id='2'>{</beginfold id='2'>
0874 @at-root #<beginfold id='2'>{</beginfold id='2'>selector.unify(&, $child)<endfold id='2'>}</endfold id='2'> <beginfold id='2'>{</beginfold id='2'>
0875 @content;
0876 <endfold id='2'>}</endfold id='2'>
0877 @at-root #<beginfold id='2'>{</beginfold id='2'>selector-unify(&, $child)<endfold id='2'>}</endfold id='2'> <beginfold id='2'>{</beginfold id='2'>
0878 @content;
0879 <endfold id='2'>}</endfold id='2'>
0880 <endfold id='2'>}</endfold id='2'>
0881
0882 @media print <beginfold id='2'>{</beginfold id='2'>
0883 .page <beginfold id='2'>{</beginfold id='2'>
0884 width: 8in;
0885 @at-root (without: media) {
0886 color: red;
0887 <endfold id='2'>}</endfold id='2'>
0888 <endfold id='2'>}</endfold id='2'>
0889 <endfold id='2'>}</endfold id='2'>
0890
0891 .sidebar <beginfold id='2'>{</beginfold id='2'>
0892 width: 300px;
0893 @media screen and (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0894 width: 500px;
0895 <endfold id='2'>}</endfold id='2'>
0896 <endfold id='2'>}</endfold id='2'>
0897
0898 @media screen <beginfold id='2'>{</beginfold id='2'>
0899 .sidebar <beginfold id='2'>{</beginfold id='2'>
0900 @media (orientation: landscape) <beginfold id='2'>{</beginfold id='2'>
0901 width: 500px;
0902 <endfold id='2'>}</endfold id='2'>
0903 <endfold id='2'>}</endfold id='2'>
0904 <endfold id='2'>}</endfold id='2'>
0905
0906 @media (min-width: $layout-breakpoint-small) <beginfold id='2'>{</beginfold id='2'>
0907 .hide-extra-small <beginfold id='2'>{</beginfold id='2'>
0908 display: none;
0909 <endfold id='2'>}</endfold id='2'>
0910 <endfold id='2'>}</endfold id='2'>
0911
0912 @media (hover: hover) <beginfold id='2'>{</beginfold id='2'>
0913 .button:hover <beginfold id='2'>{</beginfold id='2'>
0914 border: 2px solid black;
0915
0916 @media (color) <beginfold id='2'>{</beginfold id='2'>
0917 border-color: #036;
0918 <endfold id='2'>}</endfold id='2'>
0919 <endfold id='2'>}</endfold id='2'>
0920 <endfold id='2'>}</endfold id='2'>
0921
0922 @media #{$media} and ($feature: $value) <beginfold id='2'>{</beginfold id='2'>
0923 .sidebar <beginfold id='2'>{</beginfold id='2'>
0924 width: 500px;
0925 <endfold id='2'>}</endfold id='2'>
0926 <endfold id='2'>}</endfold id='2'>
0927
0928
0929 @extend .error;
0930
0931 .hoverlink <beginfold id='2'>{</beginfold id='2'>
0932 @extend a:hover;
0933 @extend %extreme;
0934 @extend .message;
0935 @extend .notice !optional;
0936 border-width: 3px;
0937 <endfold id='2'>}</endfold id='2'>
0938
0939 .error <beginfold id='2'>{</beginfold id='2'>
0940 border: 1px #f00;
0941 background-color: #fdd;
0942
0943 &--serious <beginfold id='2'>{</beginfold id='2'>
0944 @extend .error;
0945 border-width: 3px;
0946 <endfold id='2'>}</endfold id='2'>
0947 <endfold id='2'>}</endfold id='2'>
0948
0949
0950 p <beginfold id='2'>{</beginfold id='2'>
0951 @if 1 + 1 == 2 <beginfold id='2'>{</beginfold id='2'> border: 1px solid; <endfold id='2'>}</endfold id='2'>
0952 @if 5 < 3 <beginfold id='2'>{</beginfold id='2'> border: 2px dotted; <endfold id='2'>}</endfold id='2'>
0953 @if null <beginfold id='2'>{</beginfold id='2'> border: 3px double; <endfold id='2'>}</endfold id='2'>
0954 <endfold id='2'>}</endfold id='2'>
0955
0956 p <beginfold id='2'>{</beginfold id='2'>
0957 @if $type == ocean <beginfold id='2'>{</beginfold id='2'>
0958 color: blue;
0959 <endfold id='2'>}</endfold id='2'> @else if $type == matador <beginfold id='2'>{</beginfold id='2'>
0960 color: red;
0961 <endfold id='2'>}</endfold id='2'> @else if $type == monster <beginfold id='2'>{</beginfold id='2'>
0962 color: green;
0963 <endfold id='2'>}</endfold id='2'> @else <beginfold id='2'>{</beginfold id='2'>
0964 color: black;
0965 <endfold id='2'>}</endfold id='2'>
0966 <endfold id='2'>}</endfold id='2'>
0967
0968
0969 @each $animal in puma, sea-slug, egret, salamander <beginfold id='2'>{</beginfold id='2'>
0970 .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
0971 background-image: url('/images/#{$animal}.png');
0972 <endfold id='2'>}</endfold id='2'>
0973 <endfold id='2'>}</endfold id='2'>
0974
0975 @each $name, $glyph in $icons <beginfold id='2'>{</beginfold id='2'>
0976 .icon-#{$name}:before <beginfold id='2'>{</beginfold id='2'>
0977 display: inline-block;
0978 font-family: "Icon Font";
0979 content: $glyph;
0980 <endfold id='2'>}</endfold id='2'>
0981 <endfold id='2'>}</endfold id='2'>
0982
0983 @each $size in $sizes <beginfold id='2'>{</beginfold id='2'>
0984 .icon-#{$size} <beginfold id='2'>{</beginfold id='2'>
0985 font-size: $size;
0986 height: $size;
0987 width: $size;
0988 <endfold id='2'>}</endfold id='2'>
0989 <endfold id='2'>}</endfold id='2'>
0990
0991 @each $animal, $color, $cursor in (puma, black, default),
0992 (sea-slug, blue, pointer),
0993 (egret, white, move) <beginfold id='2'>{</beginfold id='2'>
0994 .#{$animal}-icon <beginfold id='2'>{</beginfold id='2'>
0995 background-image: url('/images/#{$animal}.png');
0996 border: 2px solid $color;
0997 cursor: $cursor;
0998 <endfold id='2'>}</endfold id='2'>
0999 <endfold id='2'>}</endfold id='2'>
1000
1001 @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) <beginfold id='2'>{</beginfold id='2'>
1002 #{$header} <beginfold id='2'>{</beginfold id='2'>
1003 font-size: $size;
1004 <endfold id='2'>}</endfold id='2'>
1005 <endfold id='2'>}</endfold id='2'>
1006
1007
1008 @for $i from 1 through 3 <beginfold id='2'>{</beginfold id='2'>
1009 .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
1010 <endfold id='2'>}</endfold id='2'>
1011
1012 @for $i from 1 to 3 <beginfold id='2'>{</beginfold id='2'>
1013 ul:nth-child(3n + #{$i}) <beginfold id='2'>{</beginfold id='2'>
1014 background-color: lighten($base-color, $i * 5%);
1015 <endfold id='2'>}</endfold id='2'>
1016 <endfold id='2'>}</endfold id='2'>
1017
1018
1019 @while $i > 0 <beginfold id='2'>{</beginfold id='2'>
1020 .item-#{$i} <beginfold id='2'>{</beginfold id='2'> width: 2em * $i; <endfold id='2'>}</endfold id='2'>
1021 $i: $i - 2;
1022 <endfold id='2'>}</endfold id='2'>
1023
1024
1025 @include order(150px, $form-selectors...);
1026 @include order(150px, "input.name", "input.address", "input.zip");
1027 @include unify-parent("input") <beginfold id='2'>{</beginfold id='2'> <endfold id='2'>}</endfold id='2'>
1028 @include google-font("Droid Sans");
1029 @include library.styles;
1030 @include library.configure(
1031 $black: #222,
1032 $border-radius: 0.1rem
1033 );
1034 @include firefox-message(".header");
1035 @include apply-to-ie6-only <beginfold id='2'>{</beginfold id='2'>
1036 #logo <beginfold id='2'>{</beginfold id='2'>
1037 background-image: url(/logo.gif);
1038 <endfold id='2'>}</endfold id='2'>
1039 <endfold id='2'>}</endfold id='2'>
1040
1041 @include media(screen, print) using ($type) <beginfold id='2'>{</beginfold id='2'>
1042 h1 <beginfold id='2'>{</beginfold id='2'>
1043 font-size: 40px;
1044 @if $type == print <beginfold id='2'>{</beginfold id='2'>
1045 font-family: Calluna;
1046 <endfold id='2'>}</endfold id='2'>
1047 <endfold id='2'>}</endfold id='2'>
1048 <endfold id='2'>}</endfold id='2'>
1049
1050 p <beginfold id='2'>{</beginfold id='2'> @include sexy-border(blue, 1in); <endfold id='2'>}</endfold id='2'>
1051 h1 <beginfold id='2'>{</beginfold id='2'> @include sexy-border($color: blue, $width: 2in); <endfold id='2'>}</endfold id='2'>
1052 nav ul <beginfold id='2'>{</beginfold id='2'>
1053 @include corners.rounded;
1054 padding: 5px + corners.$radius;
1055 @include horizontal-list;
1056 @include rtl(float, left, right);
1057 @include hover <beginfold id='2'>{</beginfold id='2'>
1058 border-width: 2px;
1059 <endfold id='2'>}</endfold id='2'>
1060 @include replace-text(url("/images/mail.svg"), 0);
1061 @include square(100px, $radius: 4px);
1062 // Oops, we typo'd "webkit" as "wekbit"!
1063 @include prefix(transform, rotate(15deg), wekbit ms);
1064 <endfold id='2'>}</endfold id='2'>
1065
1066 .primary <beginfold id='2'>{</beginfold id='2'>
1067 @include colors($value-map...);
1068 <endfold id='2'>}</endfold id='2'>
1069 .box <beginfold id='2'>{</beginfold id='2'> @include border-radius(10px); <endfold id='2'>}</endfold id='2'>
1070
1071 .wrapper .field <beginfold id='2'>{</beginfold id='2'>
1072 @include unify-parent("input") <beginfold id='2'>{</beginfold id='2'>
1073 <beginfold id='1'>/*</beginfold id='1'> ... <endfold id='1'>*/</endfold id='1'>
1074 <endfold id='2'>}</endfold id='2'>
1075 @include unify-parent("select") <beginfold id='2'>{</beginfold id='2'>
1076 <beginfold id='1'>/*</beginfold id='1'> ... <endfold id='1'>*/</endfold id='1'>
1077 <endfold id='2'>}</endfold id='2'>
1078 <endfold id='2'>}</endfold id='2'>
1079
1080 .banner <beginfold id='2'>{</beginfold id='2'>
1081 @include theme-colors($light-theme: true);
1082 body.dark & <beginfold id='2'>{</beginfold id='2'>
1083 @include theme-colors($light-theme: false);
1084 <endfold id='2'>}</endfold id='2'>
1085 <endfold id='2'>}</endfold id='2'>
1086
1087
1088
1089 @function grid-width($n) <beginfold id='2'>{</beginfold id='2'>
1090 @return $n * $grid-width + ($n - 1) * $gutter-width;
1091 <endfold id='2'>}</endfold id='2'>
1092
1093 @function scale-below($value, $base, $ratio: 1.618) <beginfold id='2'>{</beginfold id='2'>
1094 @while $value > $base <beginfold id='2'>{</beginfold id='2'>
1095 $value: math.div($value, $ratio);
1096 <endfold id='2'>}</endfold id='2'>
1097 @return $value;
1098 <endfold id='2'>}</endfold id='2'>
1099
1100 /// If the user has configured `$-box-shadow`, returns their configured value.
1101 /// Otherwise returns a value derived from `$-black`.
1102 @function -box-shadow() <beginfold id='2'>{</beginfold id='2'>
1103 @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
1104 <endfold id='2'>}</endfold id='2'>
1105
1106 @function pow($base, $exponent) <beginfold id='2'>{</beginfold id='2'>
1107 $result: 1;
1108 @for $_ from 1 through $exponent <beginfold id='2'>{</beginfold id='2'>
1109 $result: $result * $base;
1110 <endfold id='2'>}</endfold id='2'>
1111 @return $result;
1112 <endfold id='2'>}</endfold id='2'>
1113
1114 @function invert($color, $amount: 100%) <beginfold id='2'>{</beginfold id='2'>
1115 $inverse: change-color($color, $hue: hue($color) + 180);
1116 @return mix($inverse, $color, $amount);
1117 <endfold id='2'>}</endfold id='2'>
1118
1119 @function sum($numbers...) <beginfold id='2'>{</beginfold id='2'>
1120 $sum: 0;
1121 @each $number in $numbers <beginfold id='2'>{</beginfold id='2'>
1122 $sum: $sum + $number;
1123 <endfold id='2'>}</endfold id='2'>
1124 @return $sum;
1125 <endfold id='2'>}</endfold id='2'>
1126
1127 @function fg($args...) <beginfold id='2'>{</beginfold id='2'>
1128 @warn "The fg() function is deprecated. Call foreground() instead.";
1129 @return foreground($args...);
1130 <endfold id='2'>}</endfold id='2'>
1131
1132 @function str-insert($string, $insert, $index) <beginfold id='2'>{</beginfold id='2'>
1133 // Avoid making new strings if we don't need to.
1134 @if string.length($string) == 0 <beginfold id='2'>{</beginfold id='2'>
1135 @return $insert;
1136 <endfold id='2'>}</endfold id='2'>
1137
1138 $before: string.slice($string, 0, $index);
1139 $after: string.slice($string, $index);
1140 @return $before + $insert + $after;
1141 <endfold id='2'>}</endfold id='2'>
1142
1143
1144 // Variable define
1145
1146 $image-path: "../../static/images";
1147 $-text-color: #333 !default; // Default can be overrided
1148 $default-font-size: 16px !default;
1149 $default-font-family: Roboto, "Droid Sans", sans-serif;
1150 $default-font-weight: 400;
1151 $default-line-height: $default-font-size * 1.8;
1152 $shadow-transparence: 0.25;
1153 $box-shadow: 0 0 3px rgba(0,0,0,$shadow-transparence);
1154 $page-width: 100rem; // kabab-case
1155 $gapOfArticle: 20px; // camelCase
1156 $body_background_color: white; // snake_case
1157 $-box-shadow: null;
1158 $sizes: 40px, 50px, 80px;
1159 $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
1160 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
1161 $map: (key1: value1, key2: value2, key3: value3);
1162 $icons:
1163 "eye" "\f112" 12px,
1164 "start" "\f12e" 16px,
1165 "stop" "\f12f" 10px;
1166 $known-prefixes: webkit, moz, ms, o;
1167 $primary-color: #036;
1168 $form-selectors: "input.name", "input.address", "input.zip" !default;
1169 $color1: hsl(120deg, 100%, 50%);
1170 $color2: rgb($red, $green, blue($color1));
1171 $color3: mix($color1, $color2, [$weight]);
1172 $translucent-red: rgba(255, 0, 0, 0.5);
1173 $name: foo;
1174 $attr: border;
1175 $media: screen;
1176 $feature: -webkit-min-device-pixel-ratio;
1177 $value: 1.5;
1178 $values: #ff0000, #00ff00, #0000ff;
1179 library.$color: blue;
1180
1181
1182 // Nesting
1183
1184 #home-page <beginfold id='2'>{</beginfold id='2'>
1185
1186 header <beginfold id='2'>{</beginfold id='2'>
1187 width: 80%;
1188 margin: 0 auto;
1189
1190 .cover <beginfold id='2'>{</beginfold id='2'>
1191 @include border-radius(20px);
1192 max-width: 100%;
1193
1194 &:hover <beginfold id='2'>{</beginfold id='2'>
1195 background: #ffffff;
1196 <endfold id='2'>}</endfold id='2'>
1197
1198 .like-button <beginfold id='2'>{</beginfold id='2'>
1199 font-size: $default-font-size * 0.8;
1200
1201 @media (max-width: 300px) and (min-width: 200px) <beginfold id='2'>{</beginfold id='2'>
1202 font-size: $default-font-size * 0.8;
1203
1204 .icon <beginfold id='2'>{</beginfold id='2'>
1205 width: 20px;
1206 height: 20px;
1207 <endfold id='2'>}</endfold id='2'>
1208 <endfold id='2'>}</endfold id='2'>
1209
1210 @media print <beginfold id='2'>{</beginfold id='2'>
1211 display: none;
1212 <endfold id='2'>}</endfold id='2'>
1213 <endfold id='2'>}</endfold id='2'>
1214 <endfold id='2'>}</endfold id='2'>
1215 <endfold id='2'>}</endfold id='2'>
1216 <endfold id='2'>}</endfold id='2'>
1217
1218
1219 @use "sass:selector";
1220 @use 'library';
1221 @use "src/corners" as *;
1222 @use "src/corners" as c;
1223 @use 'opinionated' with ($black: #333);
1224 @use 'library' with (
1225 $black: #222,
1226 $border-radius: 0.1rem
1227 );
1228
1229 @forward "src/list" hide list-reset, $horizontal-list-gap;
1230 @forward "src/list" as list-*;
1231 @forward 'library' with (
1232 $black: #222 !default,
1233 $border-radius: 0.1rem !default
1234 );
1235
1236 @import url("http://fonts.googleapis.com/css?family=#{$family}");
1237 @import 'foundation/code', 'foundation/lists';
1238 @import "http://fonts.googleapis.com/css?family=Droid+Sans";
1239
1240 @error "Property #{$property} must be either left or right.";
1241 @error var(--abcd);
1242
1243 @debug 10em + 12em;
1244 @debug library.$color; //=> blue
1245 @debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
1246 @debug -webkit-flex; // -webkit-flex
1247
1248
1249 @keyframes slide-in <beginfold id='2'>{</beginfold id='2'>
1250 from <beginfold id='2'>{</beginfold id='2'>
1251 margin-left: 100%;
1252 width: 300%;
1253 <endfold id='2'>}</endfold id='2'>
1254
1255 #{$x}% <beginfold id='2'>{</beginfold id='2'>
1256 margin-left: 90%;
1257 width: 150%;
1258 <endfold id='2'>}</endfold id='2'>
1259
1260 70% <beginfold id='2'>{</beginfold id='2'>
1261 margin-left: 90%;
1262 width: 150%;
1263 <endfold id='2'>}</endfold id='2'>
1264 <endfold id='2'>}</endfold id='2'>