课程表

SASS 基础

SASS 高级

工具箱
速查手册

Sass 十分钟入门

当前位置：免费教程 » HTML/CSS » SASS

安装、编译说了一大圈，你可能还对SASS没有具体的认识。所以，在详细讲解之前，本教程提供一个十分钟的快速预览。如果你有CSS和JS基础，那么会很容易看明白。之后我们再分开讲解每个知识点。

变量

sass中可以定义变量，方便统一修改和维护。

  1. //SASS代码
  2. //-----------------------------------
  3. $fontStack:    Helvetica, sans-serif;
  4. $primaryColor: #333;
  6. body {
  7.   font-family: $fontStack;
  8.   color: $primaryColor;
  9. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. body {
  4.   font-family: Helvetica, sans-serif;
  5.   color: #333;
  6. }

嵌套

sass可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

  1. //SASS代码
  2. //-----------------------------------
  3. nav {
  4.   ul {
  5.     margin: 0;
  6.     padding: 0;
  7.     list-style: none;
  8.   }
  10.   li { display: inline-block; }
  12.   a {
  13.     display: block;
  14.     padding: 6px 12px;
  15.     text-decoration: none;
  16.   }
  17. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. nav ul {
  4.   margin: 0;
  5.   padding: 0;
  6.   list-style: none;
  7. }
  9. nav li {
  10.   display: inline-block;
  11. }
  13. nav a {
  14.   display: block;
  15.   padding: 6px 12px;
  16.   text-decoration: none;
  17. }

导入

sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

  1. //SASS代码
  2. //-----------------------------------
  3. // _reset.scss
  5. html,
  6. body,
  7. ul,
  8. ol {
  9.    margin: 0;
  10.   padding: 0;
  11. }
  1. //SASS代码
  2. //-----------------------------------
  3. // base.scss 
  5. @import 'reset';
  7. body {
  8.   font-size: 100% Helvetica, sans-serif;
  9.   background-color: #efefef;
  10. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. html, body, ul, ol {
  4.   margin: 0;
  5.   padding: 0;
  6. }
  8. body {
  9.   background-color: #efefef;
  10.   font-size: 100% Helvetica, sans-serif;
  11. }

mixin

sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

  1. //SASS代码
  2. //-----------------------------------
  3. @mixin box-sizing ($sizing) {
  4.     -webkit-box-sizing:$sizing;     
  5.        -moz-box-sizing:$sizing;
  6.             box-sizing:$sizing;
  7. }
  8. .box-border{
  9.     border:1px solid #ccc;
  10.     @include box-sizing(border-box);
  11. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. .box-border {
  4.   border: 1px solid #ccc;
  5.   -webkit-box-sizing: border-box;
  6.   -moz-box-sizing: border-box;
  7.   box-sizing: border-box;
  8. }

扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

  1. //SASS代码
  2. //-----------------------------------
  3. .message {
  4.   border: 1px solid #ccc;
  5.   padding: 10px;
  6.   color: #333;
  7. }
  9. .success {
  10.   @extend .message;
  11.   border-color: green;
  12. }
  14. .error {
  15.   @extend .message;
  16.   border-color: red;
  17. }
  19. .warning {
  20.   @extend .message;
  21.   border-color: yellow;
  22. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. .message, .success, .error, .warning {
  4.   border: 1px solid #cccccc;
  5.   padding: 10px;
  6.   color: #333;
  7. }
  9. .success {
  10.   border-color: green;
  11. }
  13. .error {
  14.   border-color: red;
  15. }
  17. .warning {
  18.   border-color: yellow;
  19. }

运算

sass可进行简单的加减乘除运算等

  1. //SASS代码
  2. //-----------------------------------
  3. .container { width: 100%; }
  5. article[role="main"] {
  6.   float: left;
  7.   width: 600px / 960px * 100%;
  8. }
  10. aside[role="complimentary"] {
  11.   float: right;
  12.   width: 300px / 960px * 100%;
  13. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. .container {
  4.   width: 100%;
  5. }
  7. article[role="main"] {
  8.   float: left;
  9.   width: 62.5%;
  10. }
  12. aside[role="complimentary"] {
  13.   float: right;
  14.   width: 31.25%;
  15. }

颜色

sass中集成了大量的颜色函数，让变换颜色更加简单。

  1. //SASS代码
  2. //-----------------------------------
  3. $linkColor: #08c;
  4. a {
  5.     text-decoration:none;
  6.     color:$linkColor;
  7.     &:hover{
  8.       color:darken($linkColor,10%);
  9.     }
  10. }
  1. //经过编译后的代码
  2. //-----------------------------------
  3. a {
  4.   text-decoration: none;
  5.   color: #0088cc;
  6. }
  7. a:hover {
  8.   color: #006699;
  9. }
转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号