SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

变量

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333333;
  3. body {
  4.   font: 100% $font-stack;
  5.   color: $primary-color;
  6. }
  7. //编译结果
  8. body {
  9.   font: 100% Helvetica, sans-serif;
  10.   color: #333;
  11. }

嵌套

  1. nav {
  2.   ul {
  3.     margin: 0;
  4.     padding: 0;
  5.     list-style: none;
  6.   }
  8.   li { display: inline-block; }
  10.   a {
  11.     display: block;
  12.     padding: 6px 12px;
  13.     text-decoration: none;
  14.   }
  15. }
  16. //编译结果
  17. nav ul {
  18.   margin: 0;
  19.   padding: 0;
  20.   list-style: none;
  21. }
  22. nav li {
  23.   display: inline-block;
  24. }
  25. nav a {
  26.   display: block;
  27.   padding: 6px 12px;
  28.   text-decoration: none;
  29. }

引用

  1. // _reset.scss
  3. html,
  4. body,
  5. ul,
  6. ol {
  7.   margin:  0;
  8.   padding: 0;
  9. }
  10. // base.scss
  11. @import 'reset';
  13. body {
  14.   font: 100% Helvetica, sans-serif;
  15.   background-color: #efefef;
  16. }
  17. //编译结果
  18. html,
  19. body,
  20. ul,
  21. ol {
  22.   margin:  0;
  23.   padding: 0;
  24. }
  26. body {
  27.   font: 100% Helvetica, sans-serif;
  28.   background-color: #efefef;
  29. }

混入

  1. @mixin transform($property) {
  2.   -webkit-transform: $property;
  3.   -ms-transform: $property;
  4.   transform: $property;
  5. }
  7. .box { @include transform(rotate(30deg)); }
  9. //编译结果
  10. .box {
  11.   -webkit-transform: rotate(30deg);
  12.   -ms-transform: rotate(30deg);
  13.   transform: rotate(30deg);
  14. }

继承、扩展

  1. /* This CSS will print because %message-shared is extended. */
  2. %message-shared {
  3.   border: 1px solid #ccc;
  4.   padding: 10px;
  5.   color: #333;
  6. }
  8. // This CSS won't print because %equal-heights is never extended.
  9. %equal-heights {
  10.   display: flex;
  11.   flex-wrap: wrap;
  12. }
  14. .message {
  15.   @extend %message-shared;
  16. }
  18. .success {
  19.   @extend %message-shared;
  20.   border-color: green;
  21. }
  23. .error {
  24.   @extend %message-shared;
  25.   border-color: red;
  26. }
  28. .warning {
  29.   @extend %message-shared;
  30.   border-color: yellow;
  31. }
  33. //编译结果
  34. .message, .success, .error, .warning {
  35.   border: 1px solid #ccc;
  36.   padding: 10px;
  37.   color: #333;
  38. }
  40. .success {
  41.   border-color: green;
  42. }
  44. .error {
  45.   border-color: red;
  46. }
  48. .warning {
  49.   border-color: yellow;
  50. }

运算符

  1. .container {
  2.   width: 100%;
  3. }
  5. article[role="main"] {
  6.   float: left;
  7.   width: 600px / 960px * 100%;
  8. }
  10. aside[role="complementary"] {
  11.   float: right;
  12.   width: 300px / 960px * 100%;
  13. }
  15. //编译结果
  16. .container {
  17.   width: 100%;
  18. }
  20. article[role="main"] {
  21.   float: left;
  22.   width: 62.5%;
  23. }
  25. aside[role="complementary"] {
  26.   float: right;
  27.   width: 31.25%;
  28. }