/scalate-jruby/src/main/resources/haml-3.0.25/doc-src/SCSS_FOR_SASS_USERS.md

http://github.com/scalate/scalate · Markdown · 155 lines · 116 code · 39 blank · 0 comment · 0 complexity · a5c7f03304e4be7c49e32bc50eda981f MD5 · raw file

  1. # Intro to SCSS for Sass Users
  2. Sass 3 introduces a new syntax known as SCSS
  3. which is fully compatible with the syntax of CSS3,
  4. while still supporting the full power of Sass.
  5. This means that every valid CSS3 stylesheet
  6. is a valid SCSS file with the same meaning.
  7. In addition, SCSS understands most CSS hacks
  8. and vendor-specific syntax, such as [IE's old `filter` syntax](http://msdn.microsoft.com/en-us/library/ms533754%28VS.85%29.aspx).
  9. Since SCSS is a CSS extension,
  10. everything that works in CSS works in SCSS.
  11. This means that for a Sass user to understand it,
  12. they need only understand how the Sass extensions work.
  13. Most of these, such as variables, parent references, and directives work the same;
  14. the only difference is that SCSS requires semicolons
  15. and brackets instead of newlines and indentation.
  16. For example, a simple rule in Sass:
  17. #sidebar
  18. width: 30%
  19. background-color: #faa
  20. could be converted to SCSS just by adding brackets and semicolons:
  21. #sidebar {
  22. width: 30%;
  23. background-color: #faa;
  24. }
  25. In addition, SCSS is completely whitespace-insensitive.
  26. That means the above could also be written as:
  27. #sidebar {width: 30%; background-color: #faa}
  28. There are some differences that are slightly more complicated.
  29. These are detailed below.
  30. Note, though, that SCSS uses all the
  31. {file:SASS_CHANGELOG.md#3-0-0-syntax-changes syntax changes in Sass 3},
  32. so make sure you understand those before going forward.
  33. ## Nested Selectors
  34. To nest selectors, simply define a new ruleset
  35. inside an existing ruleset:
  36. #sidebar {
  37. a { text-decoration: none; }
  38. }
  39. Of course, white space is insignificant
  40. and the last trailing semicolon is optional
  41. so you can also do it like this:
  42. #sidebar { a { text-decoration: none } }
  43. ## Nested Properties
  44. To nest properties,
  45. simply create a new property set
  46. after an existing property's colon:
  47. #footer {
  48. border: {
  49. width: 1px;
  50. color: #ccc;
  51. style: solid;
  52. }
  53. }
  54. This compiles to:
  55. #footer {
  56. border-width: 1px;
  57. border-color: #cccccc;
  58. border-style: solid; }
  59. ## Mixins
  60. A mixin is declared with the `@mixin` directive:
  61. @mixin rounded($amount) {
  62. -moz-border-radius: $amount;
  63. -webkit-border-radius: $amount;
  64. border-radius: $amount;
  65. }
  66. A mixin is used with the `@include` directive:
  67. .box {
  68. border: 3px solid #777;
  69. @include rounded(0.5em);
  70. }
  71. This syntax is also available in the indented syntax,
  72. although the old `=` and `+` syntax still works.
  73. This is rather verbose compared to the `=` and `+` characters used in Sass syntax.
  74. This is because the SCSS format is designed for CSS compatibility rather than conciseness,
  75. and creating new syntax when the CSS directive syntax already exists
  76. adds new syntax needlessly and
  77. could create incompatibilities with future versions of CSS.
  78. ## Comments
  79. Like Sass, SCSS supports both comments that are preserved in the CSS output
  80. and comments that aren't.
  81. However, SCSS's comments are significantly more flexible.
  82. It supports standard multiline CSS comments with `/* */`,
  83. which are preserved where possible in the output.
  84. These comments can have whatever formatting you like;
  85. Sass will do its best to format them nicely.
  86. SCSS also uses `//` for comments that are thrown away, like Sass.
  87. Unlike Sass, though, `//` comments in SCSS may appear anywhere
  88. and last only until the end of the line.
  89. For example:
  90. /* This comment is
  91. * several lines long.
  92. * since it uses the CSS comment syntax,
  93. * it will appear in the CSS output. */
  94. body { color: black; }
  95. // These comments are only one line long each.
  96. // They won't appear in the CSS output,
  97. // since they use the single-line comment syntax.
  98. a { color: green; }
  99. is compiled to:
  100. /* This comment is
  101. * several lines long.
  102. * since it uses the CSS comment syntax,
  103. * it will appear in the CSS output. */
  104. body {
  105. color: black; }
  106. a {
  107. color: green; }
  108. ## `@import`
  109. The `@import` directive in SCSS functions just like that in Sass,
  110. except that it takes a quoted string to import.
  111. For example, this Sass:
  112. @import themes/dark
  113. @import font.sass
  114. would be this SCSS:
  115. @import "themes/dark";
  116. @import "font.sass";