sass（有趣的灵魂）

变量继承 @extend@mixin sass在css里面使用变量，继承，这些操作真的是很爽了。不过也要主要一些坑。反正谁不是踩坑填坑踩坑填坑踩坑踩坑踩坑踩坑…中成长的呢。（与vue学习在同一阶段，后期准备结合写一些游戏…） 自己使用的sass编译器时koala。koala下载地址 sass的一些基本操作。

变量

以 $ 定义一个变量

实例：

$menuBgColor:#3A3C4B;//菜单默认背景色 .menu{ background: $menuBgColor; }

变量的便捷在于当代码中多处有相同的属性，比如颜色，大小等，当这些值发生修改时，只需要修改变量的值就能完成，而不需要全局搜索一一修改。既保证了效率，还保证了正确率（万一你全局修改的时候漏了一两个就有点尴尬了。）。现在是否已经感受到了sass的一些魅力呢，它能做的可远不止与此呢。

继承 @extend

关于继承 @extend .spanIcon; 实例：

.spanIcon { color: $spanIconColor; } .headPortrait{ @extend .spanIcon; }

调用的时候直接把定义部分的代码放在了调用的元素里面，当代码中出现大量重复代码，继承可以有效的提高代码的复用率，提高代码的效率。（是不是感受到了好像在使用js一样的效果。）

@mixin

@mixin 也包含着 @extend一样的继承属性，不过不同的是它可以传递参数。在单一的继承上面添加了更加丰富的实用效果（像js传参一样的丝滑效果，你，值得拥有。）。话不多说，上实例。

不传参实例：

@mixin menuNavPadding{ padding: 0 16px; } .MemberInfo{ @include menuNavPadding; }

不传参数的@mixin其实看起来和@extend效果是一模一样的。都是在调用的部分将定义的代码替换过去。不要以为这就是他最终实力，不，下面我们来看看传参版本的实例。

传参实例：

@mixin changeColor($color){ color:$color; } .colorGreen{ @include chengeColor(green); }

在编译的时候，绿色就会被传递给这个color参数。

但在这种情况下如果我们在调用的时候没有传参，会出错。为了避免发生这种报错，我们在定义的时候给一个初始值；

@mixin changeColor($color:red){ color:$color; }

此时就算你在调用的时候忘记传参，它也提供了一个默认的值。当有传参时，参数则会覆盖初始值。

（传参还可以传递多参数哦）；

传多参数实例：

@mixin changeColor($color:red,$background:#000){ color:$color; background:$background; }

传递多参数的时候，在调用的时候可以不用在意传参顺序。

.buttongreen { @include button($background: green, $color: #fff); } .button-green { @include button($color: #fff, $background: green); }

这两个效果是一样的。