sass快速手册

前言：

记录sass相关知识，方便记忆和查找

sass和scss：

scss 概念：scss 是 sass 3 引入新的语法,其语法完全兼容 CSS3，并且继承了 Sass 的强大功能

简单的说：scss = sass + css

最大区别：scss 需要使用分号和花括号而不是换行和缩进

文件后缀：现在用sass语法的，都是scss后缀

sass快速手册：

变量 + 嵌套 + 导入 + MAXIN（混合器） + 继承 + 运算 + 颜色

变量：

//css style//-----------------------------------body {  font-family: Helvetica, sans-serif;  color: #333;}

//sass style//-----------------------------------$fontStack:    Helvetica, sans-serif;$primaryColor: #333;body {  font-family: $fontStack;  color: $primaryColor;}

嵌套：

//css style//-----------------------------------nav ul {  margin: 0;  padding: 0;  list-style: none;}nav li {  display: inline-block;}nav a {  display: block;  padding: 6px 12px;  text-decoration: none;}

//sass style//-----------------------------------nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

导入：

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

//css style//-----------------------------------html, body, ul, ol {  margin: 0;  padding: 0;}body {  background-color: #efefef;  font-size: 100% Helvetica, sans-serif;}

//sass style//-----------------------------------// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

//sass style//-----------------------------------// base.scss @import 'reset';body {  font-size: 100% Helvetica, sans-serif;  background-color: #efefef;}

mixin:（混合器）

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

//css style//-----------------------------------.box-border {  border: 1px solid #ccc;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}

//sass style//-----------------------------------@mixin box-sizing ($sizing) {    -webkit-box-sizing:$sizing;            -moz-box-sizing:$sizing;            box-sizing:$sizing;}.box-border{    border:1px solid #ccc;    @include box-sizing(border-box);}

扩展/继承：

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

//css style//-----------------------------------.message, .success, .error, .warning {  border: 1px solid #cccccc;  padding: 10px;  color: #333;}.success {  border-color: green;}.error {  border-color: red;}.warning {  border-color: yellow;}

//sass style//-----------------------------------.message {  border: 1px solid #ccc;  padding: 10px;  color: #333;}.success {  @extend .message;  border-color: green;}.error {  @extend .message;  border-color: red;}.warning {  @extend .message;  border-color: yellow;}

运算：

//css style//-----------------------------------.container {  width: 100%;}article[role="main"] {  float: left;  width: 62.5%;}aside[role="complimentary"] {  float: right;  width: 31.25%;}

//sass style//-----------------------------------.container { width: 100%; }article[role="main"] {  float: left;  width: 600px / 960px * 100%;}aside[role="complimentary"] {  float: right;  width: 300px / 960px * 100%;}

颜色：

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

//css style//-----------------------------------a {  text-decoration: none;  color: #0088cc;}a:hover {  color: #006699;}

//sass style//-----------------------------------$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}