1
0

scss.html 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: SCSS mode</title>
  6. <link rel="stylesheet" href="../../lib/codemirror.css">
  7. <script src="../../lib/codemirror.js"></script>
  8. <script src="css.js"></script>
  9. <style>.CodeMirror {background: #f8f8f8;}</style>
  10. <link rel="stylesheet" href="../../doc/docs.css">
  11. </head>
  12. <body>
  13. <h1>CodeMirror: SCSS mode</h1>
  14. <form><textarea id="code" name="code">
  15. /* Some example SCSS */
  16. @import "compass/css3";
  17. $variable: #333;
  18. $blue: #3bbfce;
  19. $margin: 16px;
  20. .content-navigation {
  21. #nested {
  22. background-color: black;
  23. }
  24. border-color: $blue;
  25. color:
  26. darken($blue, 9%);
  27. }
  28. .border {
  29. padding: $margin / 2;
  30. margin: $margin / 2;
  31. border-color: $blue;
  32. }
  33. @mixin table-base {
  34. th {
  35. text-align: center;
  36. font-weight: bold;
  37. }
  38. td, th {padding: 2px}
  39. }
  40. table.hl {
  41. margin: 2em 0;
  42. td.ln {
  43. text-align: right;
  44. }
  45. }
  46. li {
  47. font: {
  48. family: serif;
  49. weight: bold;
  50. size: 1.2em;
  51. }
  52. }
  53. @mixin left($dist) {
  54. float: left;
  55. margin-left: $dist;
  56. }
  57. #data {
  58. @include left(10px);
  59. @include table-base;
  60. }
  61. .source {
  62. @include flow-into(target);
  63. border: 10px solid green;
  64. margin: 20px;
  65. width: 200px; }
  66. .new-container {
  67. @include flow-from(target);
  68. border: 10px solid red;
  69. margin: 20px;
  70. width: 200px; }
  71. body {
  72. margin: 0;
  73. padding: 3em 6em;
  74. font-family: tahoma, arial, sans-serif;
  75. color: #000;
  76. }
  77. @mixin yellow() {
  78. background: yellow;
  79. }
  80. .big {
  81. font-size: 14px;
  82. }
  83. .nested {
  84. @include border-radius(3px);
  85. @extend .big;
  86. p {
  87. background: whitesmoke;
  88. a {
  89. color: red;
  90. }
  91. }
  92. }
  93. #navigation a {
  94. font-weight: bold;
  95. text-decoration: none !important;
  96. }
  97. h1 {
  98. font-size: 2.5em;
  99. }
  100. h2 {
  101. font-size: 1.7em;
  102. }
  103. h1:before, h2:before {
  104. content: "::";
  105. }
  106. code {
  107. font-family: courier, monospace;
  108. font-size: 80%;
  109. color: #418A8A;
  110. }
  111. </textarea></form>
  112. <script>
  113. var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  114. lineNumbers: true,
  115. matchBrackets: true,
  116. mode: "text/x-scss"
  117. });
  118. </script>
  119. <p><strong>MIME types defined:</strong> <code>text/scss</code>.</p>
  120. <p><strong>Parsing/Highlighting Tests:</strong> <a href="../../test/index.html#scss_*">normal</a>, <a href="../../test/index.html#verbose,scss_*">verbose</a>.</p>
  121. </body>
  122. </html>