sass（有趣的灵魂）

最新推荐文章于 2024-06-15 11:46:27 发布

你是我的小可爱吗

最新推荐文章于 2024-06-15 11:46:27 发布

阅读量130

点赞数

分类专栏：前端文章标签：前端 sass

本文链接：https://blog.csdn.net/weixin_45101949/article/details/90440127

版权

15 篇文章 0 订阅

订阅专栏

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

变量

以 $ 定义一个变量

实例：

$menuBgColor:#3A3C4B;//菜单默认背景色

.menu{
    background: $menuBgColor;
}

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

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

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

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

@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);  }

这两个效果是一样的。

关注