scss.html 2.7 KB

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