Changeset View
Changeset View
Standalone View
Standalone View
autotests/input/highlight.scss
- This file was added.
| 1 | /** | ||||
|---|---|---|---|---|---|
| 2 | * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting. | ||||
| 3 | */ | ||||
| 4 | | ||||
| 5 | @import url("othersheet.css") screen, tv; | ||||
| 6 | | ||||
| 7 | body { | ||||
| 8 | font-size: 15pt; | ||||
| 9 | font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif; | ||||
| 10 | margin-top: 0px; /* yet another comment */ | ||||
| 11 | margin-bottom: 0px; | ||||
| 12 | margin-left: 0px; | ||||
| 13 | margin-right: 0px; | ||||
| 14 | } | ||||
| 15 | | ||||
| 16 | .something | ||||
| 17 | { | ||||
| 18 | margin-right: 0px; | ||||
| 19 | color: #cdd; | ||||
| 20 | color: #AAFE04; | ||||
| 21 | color: rgb(10%,30%,43%); | ||||
| 22 | background: maroon; | ||||
| 23 | } | ||||
| 24 | | ||||
| 25 | a:hover { | ||||
| 26 | } | ||||
| 27 | | ||||
| 28 | #header, | ||||
| 29 | p.intro:first-letter, | ||||
| 30 | p:lang(nl), | ||||
| 31 | img[align="right"] | ||||
| 32 | { | ||||
| 33 | border: 1px solid Qt::red !important; | ||||
| 34 | -moz-border-radius: 15px; /* unknown properties render italic */ | ||||
| 35 | } | ||||
| 36 | | ||||
| 37 | @media print { | ||||
| 38 | | ||||
| 39 | #header | ||||
| 40 | { | ||||
| 41 | display: none; | ||||
| 42 | } | ||||
| 43 | | ||||
| 44 | } | ||||
| 45 | | ||||
| 46 | /* | ||||
| 47 | TODO: add more tests, e.g. media | ||||
| 48 | */ | ||||
| 49 | | ||||
| 50 | | ||||
| 51 | .nice-look { | ||||
| 52 | font-variant-alternates: styleset(nice-style); | ||||
| 53 | } | ||||
| 54 | | ||||
| 55 | ul { | ||||
| 56 | list-style: thumbs; | ||||
| 57 | } | ||||
| 58 | | ||||
| 59 | /* SVG <a> */ | ||||
| 60 | svg|a {} | ||||
| 61 | | ||||
| 62 | /* XHTML and SVG <a> */ | ||||
| 63 | *|a {} | ||||
| 64 | | ||||
| 65 | *{} | ||||
| 66 | .class{} | ||||
| 67 | #id{} | ||||
| 68 | :hover{} | ||||
| 69 | :lang(fr){} | ||||
| 70 | E{} | ||||
| 71 | E F{} | ||||
| 72 | E>F{} | ||||
| 73 | E > F{} | ||||
| 74 | E~F{} | ||||
| 75 | E ~ F{} | ||||
| 76 | E:first-child{} | ||||
| 77 | E:visited{} | ||||
| 78 | E::after{} | ||||
| 79 | E:lang(c){} | ||||
| 80 | E:lang(fr-ca){} | ||||
| 81 | E + F{} | ||||
| 82 | E+F{} | ||||
| 83 | E[foo]{} | ||||
| 84 | E[foo=warning]{} | ||||
| 85 | E[foo="warning"]{} | ||||
| 86 | E[foo~="warning"]{} | ||||
| 87 | E[foo^="warning"]{} | ||||
| 88 | E[foo$="warning"]{} | ||||
| 89 | E[foo*="warning"]{} | ||||
| 90 | E[lang|="en"]{} | ||||
| 91 | DIV.warning{} | ||||
| 92 | DIV .warning{} | ||||
| 93 | E#myid{} | ||||
| 94 | E #myid{} | ||||
| 95 | E,E{} | ||||
| 96 | E, E{} | ||||
| 97 | E ,E{} | ||||
| 98 | E , E{} | ||||
| 99 | | ||||
| 100 | p:nth-child(2) { | ||||
| 101 | background: red; | ||||
| 102 | } | ||||
| 103 | | ||||
| 104 | /* Elements that are not <div> or <span> elements */ | ||||
| 105 | body :not(div):not(span) { | ||||
| 106 | font-weight: bold; | ||||
| 107 | } | ||||
| 108 | | ||||
| 109 | /* Elements that are not `.crazy` or `.fancy` */ | ||||
| 110 | /* Note that this syntax is not well supported yet. */ | ||||
| 111 | body :not(.crazy, .fancy) { | ||||
| 112 | font-family: sans-serif; | ||||
| 113 | } | ||||
| 114 | | ||||
| 115 | :nth-child(odd) { color: lime; } | ||||
| 116 | :nth-child(even) { color: lime; } | ||||
| 117 | :nth-child(4) { color: lime; } | ||||
| 118 | :nth-child(4n) { color: lime; } | ||||
| 119 | :nth-child(3n+4) { color: lime; } | ||||
| 120 | :nth-child(-n+3) { color: lime; } | ||||
| 121 | :nth-child(n+8):nth-child(-n+15) { color: lime; } | ||||
| 122 | | ||||
| 123 | .first span:nth-child(2n+1), | ||||
| 124 | .second span:nth-child(2n+1), | ||||
| 125 | .third span:nth-of-type(2n+1) { | ||||
| 126 | background-color: lime; | ||||
| 127 | unknown-property: lime; | ||||
| 128 | } | ||||
| 129 | | ||||
| 130 | :root{ | ||||
| 131 | --foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */ | ||||
| 132 | } | ||||
| 133 | | ||||
| 134 | :root, | ||||
| 135 | :root:lang(en) {--external-link: "external link";} | ||||
| 136 | :root:lang(de) {--external-link: "externer Link";} | ||||
| 137 | | ||||
| 138 | a[href^="http"]::after {content: " (" var(--external-link) ")"} | ||||
| 139 | | ||||
| 140 | one { --foo: 10px; } | ||||
| 141 | two { --bar: calc(var(--foo) + 10px); } | ||||
| 142 | three { --foo: calc(var(--bar) + 10px); } | ||||
| 143 | .foo { | ||||
| 144 | --gap: 20; | ||||
| 145 | margin-top: var(--gap)px; /*20 px*/ | ||||
| 146 | margin-top: calc(var(--gap) * 1px); /*20px*/ | ||||
| 147 | } | ||||
| 148 | | ||||
| 149 | foo { | ||||
| 150 | width: calc(50% -8px); /* invalid */ | ||||
| 151 | width: calc(50%- 8px); /* invalid */ | ||||
| 152 | width: calc(50% +8px); /* invalid */ | ||||
| 153 | width: calc(50%+ 8px); /* invalid */ | ||||
| 154 | width: calc(2px -var(--a)); /* invalid */ | ||||
| 155 | width: calc(50%*-8px); | ||||
| 156 | width: calc(50% - 8px); | ||||
| 157 | width: calc(50% + -8px); | ||||
| 158 | width: calc(50% +(8px)); | ||||
| 159 | width: calc(2px -(var(--a))); | ||||
| 160 | } | ||||
| 161 | | ||||
| 162 | sweet-alert input:focus::-moz-placeholder { | ||||
| 163 | -webkit-transition: opacity 0.3s 0.03s ease; | ||||
| 164 | transition: opacity 0.3s 0.03s ease; | ||||
| 165 | opacity: 0.5; | ||||
| 166 | } | ||||
| 167 | | ||||
| 168 | | ||||
| 169 | @font-feature-values Font One { | ||||
| 170 | @styleset { | ||||
| 171 | nice-style: 12; | ||||
| 172 | } | ||||
| 173 | } | ||||
| 174 | | ||||
| 175 | @font-feature-values Font Two { | ||||
| 176 | @styleset { | ||||
| 177 | nice-style: 4; | ||||
| 178 | } | ||||
| 179 | } | ||||
| 180 | | ||||
| 181 | @counter-style thumbs { | ||||
| 182 | system: cyclic; | ||||
| 183 | symbols: "\1F44D"; | ||||
| 184 | suffix: " "; | ||||
| 185 | } | ||||
| 186 | | ||||
| 187 | @font-face { | ||||
| 188 | font-family: "Open Sans"; | ||||
| 189 | src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||||
| 190 | url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||||
| 191 | } | ||||
| 192 | | ||||
| 193 | @page { | ||||
| 194 | margin: 1cm; | ||||
| 195 | } | ||||
| 196 | | ||||
| 197 | @page :first { | ||||
| 198 | margin: 2cm; | ||||
| 199 | /* comments */ | ||||
| 200 | marks: crop cross; | ||||
| 201 | } | ||||
| 202 | | ||||
| 203 | @page :unknown { | ||||
| 204 | margin: 2cm; | ||||
| 205 | } | ||||
| 206 | | ||||
| 207 | @font-face { | ||||
| 208 | unknown: 2px; | ||||
| 209 | /* comments */ | ||||
| 210 | font-family: "Bitstream Vera Serif Bold"; | ||||
| 211 | src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"); | ||||
| 212 | } | ||||
| 213 | | ||||
| 214 | @viewport { | ||||
| 215 | zoom: 0.75; | ||||
| 216 | /* comments */ | ||||
| 217 | min-zoom: 0.5; | ||||
| 218 | max-zoom: 0.9; | ||||
| 219 | } | ||||
| 220 | | ||||
| 221 | @viewport { | ||||
| 222 | orientation: landscape; | ||||
| 223 | /* comments */ | ||||
| 224 | orientation: landscape; | ||||
| 225 | } | ||||
| 226 | | ||||
| 227 | @document url("https://www.example.com/") { | ||||
| 228 | h1 { | ||||
| 229 | color: green; | ||||
| 230 | } | ||||
| 231 | } | ||||
| 232 | | ||||
| 233 | @supports (display: grid) { | ||||
| 234 | div { | ||||
| 235 | display: grid; | ||||
| 236 | } | ||||
| 237 | } | ||||
| 238 | | ||||
| 239 | @media (max-width: 600px) { | ||||
| 240 | .sidebar { | ||||
| 241 | display: none; | ||||
| 242 | } | ||||
| 243 | } | ||||
| 244 | | ||||
| 245 | @import url("fineprint.css") print; | ||||
| 246 | @import url(fineprint.css) print; | ||||
| 247 | @import url('bluish.css') speech; | ||||
| 248 | @import 'custom.css'; | ||||
| 249 | @import url("chrome://communicator/skin/"); | ||||
| 250 | @import "common.css" screen; | ||||
| 251 | @import url('landscape.css') screen and (orientation:landscape); | ||||
| 252 | | ||||
| 253 | @namespace url(http://www.w3.org/1999/xhtml); | ||||
| 254 | @namespace svg url(http://www.w3.org/2000/svg); | ||||
| 255 | | ||||
| 256 | @keyframes important1 { | ||||
| 257 | from { margin-top: 50px; } | ||||
| 258 | 50% { margin-top: 150px !important; } /* ignored */ | ||||
| 259 | to { margin-top: 100px; } | ||||
| 260 | } | ||||
| 261 | | ||||
| 262 | @keyframes important2 { | ||||
| 263 | from { margin-top: 50px; | ||||
| 264 | margin-bottom: 100px; } | ||||
| 265 | to { margin-top: 150px !important; /* ignored */ | ||||
| 266 | margin-bottom: 50px; } | ||||
| 267 | } | ||||
| 268 | | ||||
| 269 | @keyframes slidein { | ||||
| 270 | from { | ||||
| 271 | margin-left: 100%; | ||||
| 272 | width: 300%; | ||||
| 273 | } | ||||
| 274 | | ||||
| 275 | to { | ||||
| 276 | margin-left: 0%; | ||||
| 277 | width: 100%; | ||||
| 278 | } | ||||
| 279 | } | ||||
| 280 | | ||||
| 281 | @media print { | ||||
| 282 | a:hover { color: red } | ||||
| 283 | /* comments */ | ||||
| 284 | a:hover { color: red } | ||||
| 285 | } | ||||
| 286 | | ||||
| 287 | /** | ||||
| 288 | * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html | ||||
| 289 | */ | ||||
| 290 | | ||||
| 291 | #main p { | ||||
| 292 | color: #00ff00; | ||||
| 293 | width: 97%; | ||||
| 294 | | ||||
| 295 | .redbox { | ||||
| 296 | background-color: #ff0000; | ||||
| 297 | color: #000000; | ||||
| 298 | } | ||||
| 299 | } | ||||
| 300 | | ||||
| 301 | a { | ||||
| 302 | font-weight: bold; | ||||
| 303 | text-decoration: none; | ||||
| 304 | &:hover { text-decoration: underline; } | ||||
| 305 | body.firefox & { font-weight: normal; } | ||||
| 306 | } | ||||
| 307 | | ||||
| 308 | #main { | ||||
| 309 | color: black; | ||||
| 310 | a { | ||||
| 311 | font-weight: bold; | ||||
| 312 | &:hover { color: red; } | ||||
| 313 | } | ||||
| 314 | } | ||||
| 315 | | ||||
| 316 | #main { | ||||
| 317 | color: black; | ||||
| 318 | &-sidebar { border: 1px solid; } | ||||
| 319 | } | ||||
| 320 | | ||||
| 321 | .funky { | ||||
| 322 | font: { | ||||
| 323 | family: fantasy; | ||||
| 324 | size: 30em; | ||||
| 325 | weight: bold; | ||||
| 326 | } | ||||
| 327 | } | ||||
| 328 | | ||||
| 329 | .funky { | ||||
| 330 | font: 20px/24px fantasy { | ||||
| 331 | weight: bold; | ||||
| 332 | } | ||||
| 333 | } | ||||
| 334 | | ||||
| 335 | /* This comment is | ||||
| 336 | * several lines long. | ||||
| 337 | * since it uses the CSS comment syntax, | ||||
| 338 | * it will appear in the CSS output. */ | ||||
| 339 | body { color: black; } | ||||
| 340 | | ||||
| 341 | // These comments are only one line long each. | ||||
| 342 | // They won't appear in the CSS output, | ||||
| 343 | // since they use the single-line comment syntax. | ||||
| 344 | a { color: green; } | ||||
| 345 | | ||||
| 346 | $version: "1.2.3"; | ||||
| 347 | /* This CSS is generated by My Snazzy Framework version #{$version}. */ | ||||
| 348 | | ||||
| 349 | $width: 5em; | ||||
| 350 | | ||||
| 351 | #main { | ||||
| 352 | width: $width; | ||||
| 353 | } | ||||
| 354 | | ||||
| 355 | #main { | ||||
| 356 | $width: 5em !global; | ||||
| 357 | width: $width; | ||||
| 358 | } | ||||
| 359 | | ||||
| 360 | #sidebar { | ||||
| 361 | width: $width; | ||||
| 362 | } | ||||
| 363 | | ||||
| 364 | @mixin firefox-message($selector) { | ||||
| 365 | body.firefox #{$selector}:before { | ||||
| 366 | content: "Hi, Firefox users!"; | ||||
| 367 | } | ||||
| 368 | } | ||||
| 369 | | ||||
| 370 | @include firefox-message(".header"); | ||||
| 371 | | ||||
| 372 | $map: (key1: value1, key2: value2, key3: value3); | ||||
| 373 | | ||||
| 374 | p { | ||||
| 375 | font: 10px/8px; // Plain CSS, no division | ||||
| 376 | $width: 1000px; | ||||
| 377 | width: $width/2; // Uses a variable, does division | ||||
| 378 | width: round(1.5)/2; // Uses a function, does division | ||||
| 379 | height: (500px/2); // Uses parentheses, does division | ||||
| 380 | margin-left: 5px + 8px/2px; // Uses +, does division | ||||
| 381 | font: (italic bold 10px/8px); // In a list, parentheses don't count | ||||
| 382 | } | ||||
| 383 | | ||||
| 384 | p { | ||||
| 385 | $font-size: 12px; | ||||
| 386 | $line-height: 30px; | ||||
| 387 | font: #{$font-size}/#{$line-height}; | ||||
| 388 | } | ||||
| 389 | | ||||
| 390 | p { | ||||
| 391 | color: #010203 + #040506; | ||||
| 392 | color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); | ||||
| 393 | } | ||||
| 394 | | ||||
| 395 | $translucent-red: rgba(255, 0, 0, 0.5); | ||||
| 396 | p { | ||||
| 397 | color: opacify($translucent-red, 0.3); | ||||
| 398 | background-color: transparentize($translucent-red, 0.25); | ||||
| 399 | } | ||||
| 400 | | ||||
| 401 | $translucent-red: rgba(255, 0, 0, 0.5); | ||||
| 402 | $green: #00ff00; | ||||
| 403 | div { | ||||
| 404 | filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}'); | ||||
| 405 | } | ||||
| 406 | p { | ||||
| 407 | cursor: e + -resize; | ||||
| 408 | } | ||||
| 409 | p:before { | ||||
| 410 | content: "Foo " + Bar; | ||||
| 411 | font-family: sans- + "serif"; | ||||
| 412 | } | ||||
| 413 | p:before { | ||||
| 414 | content: "I ate #{5 + 10} pies!"; | ||||
| 415 | } | ||||
| 416 | $value: null; | ||||
| 417 | p:before { | ||||
| 418 | content: "I ate #{$value} pies!"; | ||||
| 419 | } | ||||
| 420 | p { | ||||
| 421 | width: 1em + (2em * 3); | ||||
| 422 | } | ||||
| 423 | p { | ||||
| 424 | color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); | ||||
| 425 | } | ||||
| 426 | $name: foo; | ||||
| 427 | $attr: border; | ||||
| 428 | p.#{$name} { | ||||
| 429 | #{$attr}-color: blue; | ||||
| 430 | } | ||||
| 431 | p { | ||||
| 432 | $font-size: 12px; | ||||
| 433 | $line-height: 30px; | ||||
| 434 | font: #{$font-size}/#{$line-height}; | ||||
| 435 | } | ||||
| 436 | | ||||
| 437 | .foo.bar .baz.bang, .bip.qux { | ||||
| 438 | $selector: &; | ||||
| 439 | } | ||||
| 440 | | ||||
| 441 | @mixin does-parent-exist { | ||||
| 442 | @if & { | ||||
| 443 | &:hover { | ||||
| 444 | color: red; | ||||
| 445 | } | ||||
| 446 | } @else { | ||||
| 447 | a { | ||||
| 448 | color: red; | ||||
| 449 | } | ||||
| 450 | } | ||||
| 451 | } | ||||
| 452 | | ||||
| 453 | $content: "First content"; | ||||
| 454 | $content: "Second content?" !default; | ||||
| 455 | $new_content: "First time reference" !default; | ||||
| 456 | | ||||
| 457 | #main { | ||||
| 458 | content: $content; | ||||
| 459 | new-content: $new_content; | ||||
| 460 | } | ||||
| 461 | | ||||
| 462 | @import "foo.css"; | ||||
| 463 | @import "foo" screen; | ||||
| 464 | @import "http://foo.com/bar"; | ||||
| 465 | @import url(foo); | ||||
| 466 | | ||||
| 467 | $family: unquote("Droid+Sans"); | ||||
| 468 | @import url("http://fonts.googleapis.com/css?family=#{$family}"); | ||||
| 469 | #main { | ||||
| 470 | @import "example"; | ||||
| 471 | } | ||||
| 472 | | ||||
| 473 | .sidebar { | ||||
| 474 | width: 300px; | ||||
| 475 | @media screen and (orientation: landscape) { | ||||
| 476 | width: 500px; | ||||
| 477 | } | ||||
| 478 | } | ||||
| 479 | @media screen { | ||||
| 480 | .sidebar { | ||||
| 481 | @media (orientation: landscape) { | ||||
| 482 | width: 500px; | ||||
| 483 | } | ||||
| 484 | } | ||||
| 485 | } | ||||
| 486 | | ||||
| 487 | $media: screen; | ||||
| 488 | $feature: -webkit-min-device-pixel-ratio; | ||||
| 489 | $value: 1.5; | ||||
| 490 | | ||||
| 491 | @media #{$media} and ($feature: $value) { | ||||
| 492 | .sidebar { | ||||
| 493 | width: 500px; | ||||
| 494 | } | ||||
| 495 | } | ||||
| 496 | | ||||
| 497 | .error { | ||||
| 498 | border: 1px #f00; | ||||
| 499 | background-color: #fdd; | ||||
| 500 | } | ||||
| 501 | .seriousError { | ||||
| 502 | @extend .error; | ||||
| 503 | border-width: 3px; | ||||
| 504 | } | ||||
| 505 | | ||||
| 506 | .hoverlink { | ||||
| 507 | @extend a:hover; | ||||
| 508 | } | ||||
| 509 | a:hover { | ||||
| 510 | text-decoration: underline; | ||||
| 511 | } | ||||
| 512 | | ||||
| 513 | #context a%extreme a %extreme { | ||||
| 514 | color: blue; | ||||
| 515 | font-weight: bold; | ||||
| 516 | font-size: 2em; | ||||
| 517 | } | ||||
| 518 | .notice { | ||||
| 519 | @extend %extreme; | ||||
| 520 | } | ||||
| 521 | | ||||
| 522 | a.important { | ||||
| 523 | @extend .notice !optional; | ||||
| 524 | } | ||||
| 525 | | ||||
| 526 | @media print { | ||||
| 527 | .page { | ||||
| 528 | width: 8in; | ||||
| 529 | @at-root (without: media) { | ||||
| 530 | color: red; | ||||
| 531 | } | ||||
| 532 | } | ||||
| 533 | } | ||||
| 534 | | ||||
| 535 | @debug 10em + 12em; | ||||
| 536 | | ||||
| 537 | @mixin adjust-location($x, $y) { | ||||
| 538 | @if unitless($x) { | ||||
| 539 | @warn "Assuming #{$x} to be in pixels"; | ||||
| 540 | $x: 1px * $x; | ||||
| 541 | } | ||||
| 542 | @if unitless($y) { | ||||
| 543 | @warn "Assuming #{$y} to be in pixels"; | ||||
| 544 | $y: 1px * $y; | ||||
| 545 | } | ||||
| 546 | position: relative; left: $x; top: $y; | ||||
| 547 | } | ||||
| 548 | | ||||
| 549 | @mixin adjust-location($x, $y) { | ||||
| 550 | @if unitless($x) { | ||||
| 551 | @error "$x may not be unitless, was #{$x}."; | ||||
| 552 | } | ||||
| 553 | @if unitless($y) { | ||||
| 554 | @error "$y may not be unitless, was #{$y}."; | ||||
| 555 | } | ||||
| 556 | position: relative; left: $x; top: $y; | ||||
| 557 | } | ||||
| 558 | | ||||
| 559 | p { | ||||
| 560 | @if 1 + 1 == 2 { border: 1px solid; } | ||||
| 561 | @if 5 < 3 { border: 2px dotted; } | ||||
| 562 | @if null { border: 3px double; } | ||||
| 563 | } | ||||
| 564 | | ||||
| 565 | $type: monster; | ||||
| 566 | p { | ||||
| 567 | @if $type == ocean { | ||||
| 568 | color: blue; | ||||
| 569 | } @else if $type == matador { | ||||
| 570 | color: red; | ||||
| 571 | } @else if $type == monster { | ||||
| 572 | color: green; | ||||
| 573 | } @else { | ||||
| 574 | color: black; | ||||
| 575 | } | ||||
| 576 | } | ||||
| 577 | | ||||
| 578 | @for $i from 1 through 3 { | ||||
| 579 | .item-#{$i} { width: 2em * $i; } | ||||
| 580 | } | ||||
| 581 | | ||||
| 582 | @each $animal in puma, sea-slug, egret, salamander { | ||||
| 583 | .#{$animal}-icon { | ||||
| 584 | background-image: url('/images/#{$animal}.png'); | ||||
| 585 | } | ||||
| 586 | } | ||||
| 587 | | ||||
| 588 | @each $animal, $color, $cursor in (puma, black, default), | ||||
| 589 | (sea-slug, blue, pointer), | ||||
| 590 | (egret, white, move) { | ||||
| 591 | .#{$animal}-icon { | ||||
| 592 | background-image: url('/images/#{$animal}.png'); | ||||
| 593 | border: 2px solid $color; | ||||
| 594 | cursor: $cursor; | ||||
| 595 | } | ||||
| 596 | } | ||||
| 597 | | ||||
| 598 | @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) { | ||||
| 599 | #{$header} { | ||||
| 600 | font-size: $size; | ||||
| 601 | } | ||||
| 602 | } | ||||
| 603 | | ||||
| 604 | $i: 6; | ||||
| 605 | @while $i > 0 { | ||||
| 606 | .item-#{$i} { width: 2em * $i; } | ||||
| 607 | $i: $i - 2; | ||||
| 608 | } | ||||
| 609 | | ||||
| 610 | @mixin large-text { | ||||
| 611 | font: { | ||||
| 612 | family: Arial; | ||||
| 613 | size: 20px; | ||||
| 614 | weight: bold; | ||||
| 615 | } | ||||
| 616 | color: #ff0000; | ||||
| 617 | } | ||||
| 618 | | ||||
| 619 | @mixin clearfix { | ||||
| 620 | display: inline-block; | ||||
| 621 | &:after { | ||||
| 622 | content: "."; | ||||
| 623 | display: block; | ||||
| 624 | height: 0; | ||||
| 625 | clear: both; | ||||
| 626 | visibility: hidden; | ||||
| 627 | } | ||||
| 628 | * html & { height: 1px } | ||||
| 629 | } | ||||
| 630 | | ||||
| 631 | .page-title { | ||||
| 632 | @include large-text; | ||||
| 633 | padding: 4px; | ||||
| 634 | margin-top: 10px; | ||||
| 635 | } | ||||
| 636 | | ||||
| 637 | @mixin compound { | ||||
| 638 | @include highlighted-background; | ||||
| 639 | @include header-text; | ||||
| 640 | } | ||||
| 641 | | ||||
| 642 | @mixin highlighted-background { background-color: #fc0; } | ||||
| 643 | @mixin header-text { font-size: 20px; } | ||||
| 644 | | ||||
| 645 | @mixin sexy-border($color, $width) { | ||||
| 646 | border: { | ||||
| 647 | color: $color; | ||||
| 648 | width: $width; | ||||
| 649 | style: dashed; | ||||
| 650 | } | ||||
| 651 | } | ||||
| 652 | | ||||
| 653 | p { @include sexy-border(blue, 1in); } | ||||
| 654 | | ||||
| 655 | p { @include sexy-border($color: blue); } | ||||
| 656 | h1 { @include sexy-border($color: blue, $width: 2in); } | ||||
| 657 | | ||||
| 658 | | ||||
| 659 | @mixin colors($text, $background, $border) { | ||||
| 660 | color: $text; | ||||
| 661 | background-color: $background; | ||||
| 662 | border-color: $border; | ||||
| 663 | } | ||||
| 664 | | ||||
| 665 | $values: #ff0000, #00ff00, #0000ff; | ||||
| 666 | .primary { | ||||
| 667 | @include colors($values...); | ||||
| 668 | } | ||||
| 669 | | ||||
| 670 | $value-map: (text: #00ff00, background: #0000ff, border: #ff0000); | ||||
| 671 | .secondary { | ||||
| 672 | @include colors($value-map...); | ||||
| 673 | } | ||||
| 674 | | ||||
| 675 | @mixin apply-to-ie6-only { | ||||
| 676 | * html { | ||||
| 677 | @content; | ||||
| 678 | } | ||||
| 679 | } | ||||
| 680 | @include apply-to-ie6-only { | ||||
| 681 | #logo { | ||||
| 682 | background-image: url(/logo.gif); | ||||
| 683 | } | ||||
| 684 | } | ||||
| 685 | | ||||
| 686 | $grid-width: 40px; | ||||
| 687 | $gutter-width: 10px; | ||||
| 688 | | ||||
| 689 | @function grid-width($n) { | ||||
| 690 | @return $n * $grid-width + ($n - 1) * $gutter-width; | ||||
| 691 | } | ||||
| 692 | | ||||
| 693 | #sidebar { width: grid-width(5); } | ||||