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 7body { 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 25a:hover { 26} 27 28#header, 29p.intro:first-letter, 30p:lang(nl), 31img[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/* 47TODO: add more tests, e.g. media 48*/ 49 50 51.nice-look { 52 font-variant-alternates: styleset(nice-style); 53} 54 55ul { 56 list-style: thumbs; 57} 58 59/* SVG <a> */ 60svg|a {} 61 62/* XHTML and SVG <a> */ 63*|a {} 64 65*{} 66.class{} 67#id{} 68:hover{} 69:lang(fr){} 70E{} 71E F{} 72E>F{} 73E > F{} 74E~F{} 75E ~ F{} 76E:first-child{} 77E:visited{} 78E::after{} 79E:lang(c){} 80E:lang(fr-ca){} 81E + F{} 82E+F{} 83E[foo]{} 84E[foo=warning]{} 85E[foo="warning"]{} 86E[foo~="warning"]{} 87E[foo^="warning"]{} 88E[foo$="warning"]{} 89E[foo*="warning"]{} 90E[lang|="en"]{} 91DIV.warning{} 92DIV .warning{} 93E#myid{} 94E #myid{} 95E,E{} 96E, E{} 97E ,E{} 98E , E{} 99 100p:nth-child(2) { 101 background: red; 102} 103 104/* Elements that are not <div> or <span> elements */ 105body :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. */ 111body :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 138a[href^="http"]::after {content: " (" var(--external-link) ")"} 139 140one { --foo: 10px; } 141two { --bar: calc(var(--foo) + 10px); } 142three { --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 149foo { 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 162sweet-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 301a { 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. */ 339body { 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. 344a { 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 374p { 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 384p { 385 $font-size: 12px; 386 $line-height: 30px; 387 font: #{$font-size}/#{$line-height}; 388} 389 390p { 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); 396p { 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; 403div { 404 filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}'); 405} 406p { 407 cursor: e + -resize; 408} 409p:before { 410 content: "Foo " + Bar; 411 font-family: sans- + "serif"; 412} 413p:before { 414 content: "I ate #{5 + 10} pies!"; 415} 416$value: null; 417p:before { 418 content: "I ate #{$value} pies!"; 419} 420p { 421 width: 1em + (2em * 3); 422} 423p { 424 color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); 425} 426$name: foo; 427$attr: border; 428p.#{$name} { 429 #{$attr}-color: blue; 430} 431p { 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} 509a: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 522a.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 559p { 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; 566p { 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 653p { @include sexy-border(blue, 1in); } 654 655p { @include sexy-border($color: blue); } 656h1 { @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); } 694 695@mixin unify-parent($child) { 696 @at-root #{selector-unify(&, $child)} { 697 @content; 698 } 699} 700 701:root { 702 --font-family-sans-serif: #{inspect($font-family-sans-serif)}; 703 --font-family-monospace: #{inspect($font-family-monospace)}; 704} 705 706div { 707 background-image: url("/icons/#{$name}.svg"); 708 font: #{"string"}; 709 710.icon-#{$name} { 711 position: absolute; 712 #{$top-or-bottom}: 0; 713 -#{$prefix}-#{$property}: $value; 714 .icon-#{$name} { 715 position: absolute; 716 #{$top-or-bottom}: 0; 717 -#{$prefix}-#{$property}-image: $value 718 } 719} 720 721/* 722 * SCSS Syntax Highlight Sample File (Standard) 723 * 724 * This file contains most SCSS syntax, CSS3 properties, advanced code structure. 725 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors. 726 * 727 * @author Guo Yunhe guoyunhebrave@gmail.com 728 * @date 2016-09-15 729 */ 730 731/* 732 * Block comment 733 * 734 * Alert keywords: 735 * TODO BUG FIXME 736 */ 737 738@charset "UTF-8"; 739 740@import "mixins/button"; 741 742// Variable define 743 744$image-path: "../../static/images"; 745$default-text-color: #333 !default; // Default can be overrided 746$default-font-size: 16px !default; 747$default-font-family: Roboto, "Droid Sans", sans-serif; 748$default-font-weight: 400; 749$default-line-height: $default-font-size * 1.8; 750$shadow-transparence: 0.25; 751$box-shadow: 0 0 3px rgba(0,0,0,$shadow-transparence); 752$page-width: 100rem; // kabab-case 753$gapOfArticle: 20px; // camelCase 754$body_background_color: white; // snake_case 755 756// Mixins 757 758@mixin border-radius($radius) { 759 -webkit-border-radius: $radius; 760 -moz-border-radius: $radius; 761 -ms-border-radius: $radius; 762 border-radius: $radius; 763} 764 765.box { @include border-radius(10px); } 766 767// Nesting 768 769#home-page { 770 771 header { 772 width: 80%; 773 margin: 0 auto; 774 775 .cover { 776 @include border-radius(20px); 777 max-width: 100%; 778 779 &:hover { 780 background: #ffffff; 781 } 782 783 .like-button { 784 font-size: $default-font-size * 0.8; 785 786 @media (max-width: 300px) and (min-width: 200px) { 787 font-size: $default-font-size * 0.8; 788 789 .icon { 790 width: 20px; 791 height: 20px; 792 } 793 } 794 795 @media print { 796 display: none; 797 } 798 } 799 } 800 } 801} 802 803// Extend and inheritance 804 805.message { 806 border: $border-light; 807 background-color: #f0f0f0; 808} 809 810.message-danger { 811 @extend .message; 812} 813 814 815// Control structures 816 817@mixin does-parent-exist { 818 @if & { 819 &:hover { 820 color: red; 821 } 822 } @else { 823 a { 824 color: red; 825 } 826 } 827} 828 829 830// Operators 831 832.container { width: 100%; } 833 834article[role="main"] { 835 float: left; 836 width: 600px / 960px * 100%; 837} 838 839aside[role="complementary"] { 840 float: right; 841 width: 300px / 960px * 100%; 842} 843 844 845// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html 846 847$color1: hsl(120deg, 100%, 50%); 848$color2: rgb($red, $green, blue($color1)); 849$color3: mix($color1, $color2, [$weight]); 850 851 852// Properties 853 854html, body { 855 font-family: "Droid Sans", Arial, sans-serif; 856 font-size: 11pt; 857 line-height: 1.5em; 858 max-width: 300px + $page-width - $gap / 2; 859 background: $bg_color; 860 text-shadow: 0 0 2px rgba(0,0,0, $transparence); 861 box-sizing: border-box; 862} 863 864 865// Selectors 866 867blockquote { 868 margin: 0; 869} 870 871header #logo { 872 width: 100px; 873} 874 875div#footer .link { 876 color: blue; 877} 878 879sidebar #subscribe .subscribe_form input[type="text"] { 880 font-size: 20px; 881} 882 883sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] { 884 font-weight: bold; 885} 886 887 888// Media Queries 889 890@media print { 891 .container { 892 width: 100%; 893 } 894} 895 896@media screen and (min-width: 768px) { 897 .container { 898 width: 600px; 899 } 900} 901 902@media screen and (min-width: 768px) and (max-width: 960px) { 903 .container { 904 width: 720px; 905 } 906} 907 908 909// Fontface 910 911@font-face { 912 font-family: MyHelvetica; 913 src: local("Helvetica Neue Bold"), 914 local("HelveticaNeue-Bold"), 915 url(MgOpenModernaBold.ttf); 916 font-weight: bold; 917} 918 919// Animation (Keyframes) 920 921@keyframes slidein { 922 from { 923 margin-left: 100%; 924 width: 300%; 925 } 926 927 to { 928 margin-left: 0%; 929 width: 100%; 930 } 931} 932 933/* 934 * SCSS Syntax Highlight Sample File (Complex) 935 * 936 * This file contains complex SCSS syntax that can test unexpected situations. 937 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors. 938 * 939 * @author Guo Yunhe guoyunhebrave@gmail.com 940 * @date 2016-09-16 941 */ 942 943 944// Comments with special content 945 946// .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text 947 948/* 949 * .class-selector #id "string" 'comment' // comment {} [] () /* comment 950 * TODO BUG DEBUG 951 * body { 952 * margin: 0 !important; 953 * } 954 */ 955 956// Comments in special positions 957 958$color: black /* comment here */; 959 960header/* comment here */.active /* comment here */ { 961 /* comment here */ color : /* comment here */ blue/* comment here */; 962 font-family: Arial /* comment here */, 963 "Droid Sans", /* comment here */ 964 sans-serif/* comment here */; 965} 966 967@media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */} 968 969 970// Strings with special content 971 972@import "{} $variable /* comment */"; 973@import "{}"; 974 975// Without extra breaklines and spaces 976 977pre.primary:hover.large:nth-child(2n-1){font-size:$default-font-size;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)} 978 979// With unnecessary breaklines and spaces 980 981blockquote .ref 982 { 983 flex : 0 1 30%; 984 flex-wrap : wrap; 985 } 986 987.sidebar { 988 width: 300px; } 989 @media screen and (orientation: landscape) { 990 .sidebar { 991 width: 500px; } } 992 993// Variable interpolation: #{} 994 995$name: foo; 996$attr: border; 997p.#{$name} { 998 #{$attr}-color: blue; 999} 1000 1001p { 1002 $font-size: 12px; 1003 $line-height: 30px; 1004 font: #{$font-size}/#{$line-height}; 1005} 1006 1007// Special selectors: HTML5 allows user defined tags 1008 1009header { 1010 flex { 1011 width: 300px; 1012 } 1013} 1014