sass自学入门总结

首先分享一个便利的在线编辑sassmeister

一、输出方式

同样的一份sass代码：

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

1、嵌套输出方式 nested：
编译：

sass --watch test.scss:test.css --style nested

编译后：

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

2、展开输出方式 expanded

编译：

sass --watch test.scss:test.css --style expanded

编译后：

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

3、紧凑输出方式 compact

编译：

sass --watch test.scss:test.css --style compact

编译后：

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

4、压缩输出方式 compressed

编译：

sass --watch test.scss:test.css --style compressed

编译后：

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

二、基本特性

1、变量声明：

示例：

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;

!default 用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

2、全局变量与局部变量：
示例：

//SCSS$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量).block {  color: $color;//调用全局变量}em {  $color: red;//定义局部变量  a {    color: $color;//调用局部变量  }}span {  color: $color;//调用全局变量}

编译结果：

//CSS.block {  color: orange;}em a {  color: red;}span {  color: orange;}

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

3、嵌套

(1)选择器嵌套

示例：

<header><nav>    <a href=“##”>Home</a>    <a href=“##”>About</a>    <a href=“##”>Blog</a></nav><header>

css：

nav a {  color:red;}header nav a {  color:green;}

sass：

nav {  a {    color: red;    header & {      color:green;    }  }  }

(2)属性嵌套

css:

.box {    border-top: 1px solid red;    border-bottom: 1px solid green;}

sass:

.box {  border: {   top: 1px solid red;   bottom: 1px solid green;  }}

(3)伪类嵌套
css:

clearfix:before, .clearfix:after {  content: "";  display: table;}.clearfix:after {  clear: both;  overflow: hidden;}

sass:

.clearfix{&:before,&:after {    content:"";    display: table;  }&:after {    clear:both;    overflow: hidden;  }}

4、宏

声明一个不带参数的混合宏：

@mixin border-radius{    -webkit-border-radius: 3px;    border-radius: 3px;}

调用：

button {    @include border-radius;}

编译后：

button {  -webkit-border-radius: 3px;  border-radius: 3px;}

声明一个不带值的参数的混合宏：

@mixin border-radius($radius){  -webkit-border-radius: $radius;  border-radius: $radius;}

调用：

.box {  @include border-radius(3px);}

编译后：

.box {  -webkit-border-radius: 3px;  border-radius: 3px;}

声明一个带值参数的混合宏：

@mixin border-radius($radius:3px){  -webkit-border-radius: $radius;  border-radius: $radius;}

调用：

.btn {  @include border-radius;}

编译后：

.btn {  -webkit-border-radius: 3px;  border-radius: 3px;}

但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.box {  @include border-radius(50%);}

编译后：

.box {  -webkit-border-radius: 50%;  border-radius: 50%;}

一个带多个参数的混合宏：

@mixin center($width,$height){  width: $width;  height: $height;  position: absolute;  top: 50%;  left: 50%;  margin-top: -($height) / 2;  margin-left: -($width) / 2;}

调用：

.box-center {  @include center(500px,300px);}

编译后：

.box-center {  width: 500px;  height: 300px;  position: absolute;  top: 50%;  left: 50%;  margin-top: -150px;  margin-left: -250px;}

有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代，如：

@mixin box-shadow($shadows...){  @if length($shadows) >= 1 {    -webkit-box-shadow: $shadows;    box-shadow: $shadows;  } @else {    $shadows: 0 0 2px rgba(#000,.25);    -webkit-box-shadow: $shadow;    box-shadow: $shadow;  }}

调用：

.box {  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));}

编译后：

.box {  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);}

5、继承

sass:

.btn {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;  @extend .btn;}.btn-second {  background-color: orange;  color: #fff;  @extend .btn;}

css:

.btn, .btn-primary, .btn-second {  border: 1px solid #ccc;  padding: 6px 10px;  font-size: 14px;}.btn-primary {  background-color: #f36;  color: #fff;}.btn-second {  background-clor: orange;  color: #fff;}

6、占位符%placeholder
 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：

%mt5 {  margin-top: 5px;}%pt5{  padding-top: 5px;}

这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

%mt5 {  margin-top: 5px;}%pt5{  padding-top: 5px;}.btn {  @extend %mt5;  @extend %pt5;}.block {  @extend %mt5;  span {    @extend %pt5;  }}

编译后：

.btn, .block {  margin-top: 5px;}.btn, .block span {  padding-top: 5px;}

混合宏vs继承vs占位符

1、如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
2、如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
3、编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

5、插值#{}

sass:

$properties: (margin, padding);@mixin set-value($side, $value) {    @each $prop in $properties {        #{$prop}-#{$side}: $value;    }}.login-box {    @include set-value(top, 14px);}

css:

.login-box {    margin-top: 14px;    padding-top: 14px;}

这是 sass 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

sass:

@mixin generate-sizes($class, $small, $medium, $big) {    .#{$class}-small { font-size: $small; }    .#{$class}-medium { font-size: $medium; }    .#{$class}-big { font-size: $big; }}@include generate-sizes("header-text", 12px, 20px, 40px);

css:

.header-text-small { font-size: 12px; }.header-text-medium { font-size: 20px; }.header-text-big { font-size: 40px; }

但#{}语法并不是随处可用，你不能在 mixin 中这样调用：

$margin-big: 40px;$margin-medium: 20px;$margin-small: 12px;@mixin set-value($size) {    margin-top: $margin-#{$size};}.login-box {    @include set-value(big);}

会有如下报错：error style.scss (Line 5: Undefined variable: “$margin-".)。$margin 报错是因为 $ 后面必须是变量，而 #{$size} 已经被转换成字符串无法跟前面组成变量，所有报错 $margin- 变量未定义。

也不能这样调用：

@mixin updated-status {    margin-top: 20px;    background: #F00;}$flag: "status";.navigation {    @include updated-#{$flag};}

会有如下报错：error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")。@include 中不能使用，是因为其调用的是 混合宏 的名字。

@extend 中能够使用，是因为其调用的是 选择器 的名字。例如：

sass:

%updated-status {    margin-top: 20px;    background: #F00;}.selected-status {    font-weight: bold;}$flag: "status";.navigation {    @extend %updated-#{$flag};    @extend .selected-#{$flag};}

css:

.navigation {    margin-top: 20px;    background: #F00;}.selected-status, .navigation {    font-weight: bold;}

总结一下：有两种情况不能使用插值：

①插值不能使用在属性值，也就是：后边不能使用插值；
②插值不能使用在混合宏的调用中，如@include update-#{$flag}
6、数据类型

•  数字: 如，1、 2、 13、 10px；
•  字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
•  颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
•  布尔型：如，true、 false；
•  空值：如，null；
•  值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

三、基本运算

in mm cm pt pc px等绝对单位能运算，ex em rem等相对当前字体的不能运算，编译的时候，编译器会报错，如：“Incompatible units: 'em' and ‘px'.”

1、加法

sass:

.box {  width: 20px + 8in;}

css:

.box {  width: 788px;}

2、减法

sass:

$full-width: 960px;$sidebar-width: 200px;.content {  width: $full-width -  $sidebar-width;}

css:

.content {  width: 760px;}

3、乘法

sass:

.box {  width:10px * 2px;  }

css:

.box {  width: 10px * 2;}

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。
4、除法
sass:

p {  font: 10px/8px;             // 纯 CSS，不是除法运算  $width: 1000px;  width: $width/2;            // 使用了变量，是除法运算  width: round(1.5)/2;        // 使用了函数，是除法运算  height: (500px/2);          // 使用了圆括号，是除法运算  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算}

css:

p {  font: 10px/8px;  width: 500px;  height: 250px;  margin-left: 9px; }

5、颜色运算

sass:

p {  color: #010203 + #040506;}

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：

css:

p {  color: #050709;}

算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：

sass:

p {  color: #010203 * 2;}

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：

css:

p {  color: #020406;}

6、字符运算

sass：

$content: "Hello" + "" + "Sass!";.box:before {  content: " #{$content} ";}

css:

.box:before {  content: " Hello Sass! ";}