{"id":51,"date":"2024-01-28T20:30:44","date_gmt":"2024-01-28T20:30:44","guid":{"rendered":"http:\/\/development.abcplayers.org\/index.php\/css\/scss\/"},"modified":"2024-01-28T20:30:44","modified_gmt":"2024-01-28T20:30:44","slug":"scss","status":"publish","type":"page","link":"https:\/\/development.abcplayers.org\/index.php\/css\/scss\/","title":{"rendered":"CodeMirror: SCSS mode"},"content":{"rendered":"<p><body><\/p>\n<div id=\"nav\">\n  <a href=\"http:\/\/codemirror.net\"><\/p>\n<h1>CodeMirror<\/h1>\n<p><img decoding=\"async\" id=\"logo\" src=\"..\/..\/doc\/logo.png\"\/><\/a><\/p>\n<ul>\n<li><a href=\"..\/..\/index.html\">Home<\/a>\n    <\/li>\n<li><a href=\"..\/..\/doc\/manual.html\">Manual<\/a>\n    <\/li>\n<li><a href=\"https:\/\/github.com\/codemirror\/codemirror\">Code<\/a>\n  <\/li>\n<\/ul>\n<ul>\n<li><a href=\"..\/index.html\">Language modes<\/a>\n    <\/li>\n<li><a class=\"active\" href=\"#\">SCSS<\/a>\n  <\/li>\n<\/ul>\n<\/div>\n<article>\n<h2>SCSS mode<\/h2>\n<form><textarea id=\"code\" name=\"code\"><br \/>\n\/* Some example SCSS *\/<\/p>\n<p>@import &#8220;compass\/css3&#8221;;<br \/>\n$variable: #333;<\/p>\n<p>$blue: #3bbfce;<br \/>\n$margin: 16px;<\/p>\n<p>.content-navigation {<br \/>\n  #nested {<br \/>\n    background-color: black;<br \/>\n  }<br \/>\n  border-color: $blue;<br \/>\n  color:<br \/>\n    darken($blue, 9%);<br \/>\n}<\/p>\n<p>.border {<br \/>\n  padding: $margin \/ 2;<br \/>\n  margin: $margin \/ 2;<br \/>\n  border-color: $blue;<br \/>\n}<\/p>\n<p>@mixin table-base {<br \/>\n  th {<br \/>\n    text-align: center;<br \/>\n    font-weight: bold;<br \/>\n  }<br \/>\n  td, th {padding: 2px}<br \/>\n}<\/p>\n<p>table.hl {<br \/>\n  margin: 2em 0;<br \/>\n  td.ln {<br \/>\n    text-align: right;<br \/>\n  }<br \/>\n}<\/p>\n<p>li {<br \/>\n  font: {<br \/>\n    family: serif;<br \/>\n    weight: bold;<br \/>\n    size: 1.2em;<br \/>\n  }<br \/>\n}<\/p>\n<p>@mixin left($dist) {<br \/>\n  float: left;<br \/>\n  margin-left: $dist;<br \/>\n}<\/p>\n<p>#data {<br \/>\n  @include left(10px);<br \/>\n  @include table-base;<br \/>\n}<\/p>\n<p>.source {<br \/>\n  @include flow-into(target);<br \/>\n  border: 10px solid green;<br \/>\n  margin: 20px;<br \/>\n  width: 200px; }<\/p>\n<p>.new-container {<br \/>\n  @include flow-from(target);<br \/>\n  border: 10px solid red;<br \/>\n  margin: 20px;<br \/>\n  width: 200px; }<\/p>\n<p>body {<br \/>\n  margin: 0;<br \/>\n  padding: 3em 6em;<br \/>\n  font-family: tahoma, arial, sans-serif;<br \/>\n  color: #000;<br \/>\n}<\/p>\n<p>@mixin yellow() {<br \/>\n  background: yellow;<br \/>\n}<\/p>\n<p>.big {<br \/>\n  font-size: 14px;<br \/>\n}<\/p>\n<p>.nested {<br \/>\n  @include border-radius(3px);<br \/>\n  @extend .big;<br \/>\n  p {<br \/>\n    background: whitesmoke;<br \/>\n    a {<br \/>\n      color: red;<br \/>\n    }<br \/>\n  }<br \/>\n}<\/p>\n<p>#navigation a {<br \/>\n  font-weight: bold;<br \/>\n  text-decoration: none !important;<br \/>\n}<\/p>\n<p>h1 {<br \/>\n  font-size: 2.5em;<br \/>\n}<\/p>\n<p>h2 {<br \/>\n  font-size: 1.7em;<br \/>\n}<\/p>\n<p>h1:before, h2:before {<br \/>\n  content: &#8220;::&#8221;;<br \/>\n}<\/p>\n<p>code {<br \/>\n  font-family: courier, monospace;<br \/>\n  font-size: 80%;<br \/>\n  color: #418A8A;<br \/>\n}<br \/>\n<\/textarea><\/form>\n<p>    <script><![CDATA[\n      var editor = CodeMirror.fromTextArea(document.getElementById(\"code\"), {\n        lineNumbers: true,\n        matchBrackets: true,\n        mode: \"text\/x-scss\"\n      });\n    ]]><\/script><\/p>\n<p>The SCSS mode is a sub-mode of the <a href=\"index.html\">CSS mode<\/a> (defined in <code>css.js<\/code>).<\/p>\n<p><strong>Parsing\/Highlighting Tests:<\/strong> <a href=\"..\/..\/test\/index.html#scss_*\">normal<\/a>,  <a href=\"..\/..\/test\/index.html#verbose,scss_*\">verbose<\/a>.<\/p>\n<\/article>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CodeMirror Home Manual Code Language modes SCSS SCSS mode \/* Some example SCSS *\/ @import &#8220;compass\/css3&#8221;; $variable: #333; $blue: #3bbfce; $margin: 16px; .content-navigation { #nested { background-color: black; } border-color: $blue; color: darken($blue, 9%); } .border { padding: $margin \/ 2; margin: $margin \/ 2; border-color: $blue; } @mixin table-base { th { text-align: center; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":47,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"class_list":["post-51","page","type-page","status-publish","hentry","post"],"_links":{"self":[{"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/pages\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":0,"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/pages\/51\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/pages\/47"}],"wp:attachment":[{"href":"https:\/\/development.abcplayers.org\/index.php\/wp-json\/wp\/v2\/media?parent=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}