Sass 混入（mixin ）

作者：李俊才

邮箱：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

1. 混入的概念

在传统的普通CSS语法中，为了描述某个目标的样式我们需要对我们选择的目标分别描述他们的样式，很多时候我们的工作是重复进行的，因此开发者们一直致力于寻找一个能够尽可能地降低重复率的方式。作为一款优秀的预处理器，Sass提供了这样的功能，它就是混入（mixin）。

Sass/Scss 混入（mixin）类似于JavaScript一个自定义的函数。在JavaScript等编程语言中的函数使我们能够定义一个重复使用某一具有相同功能的代码块，而在Sass中的混入（mixin）则让我们能够定义一个可以在整个样式表中重复使用的样式。

2. 混入的使用

2.1 混入的基本使用

Sass 为我们提供了@mixin指令用于定义混入，就像JavaScript为我们提供了function关键字用于定义函数一样。其语法格式如下：

@mixin minxin-name(param1, param2, ...){// your styles...
}

和调用JavaScript函数不一样的是，Sass中的混入在定义后不是仅仅个给出一个混入名就可以了，准确的说这里不叫作调用，而叫做包含。也就是说使用混入指令@mixin定义好的一个混入，要想被包含在另一处位置。实现包含的功能需要使用到另外一个指令，那就是包含指令@include。

具体使用以一个例子来说明：

例如：

@mixin mybox-base {width: 60px;height: 26px;
}.mybox {@include mybox-base;color:#1a1a1a;background-color:#e4e4e4
}.mybox-critical {@include mybox-base;color:#fbff00;background-color:#ff3636
}.mybox-warning {@include mybox-base;color:#00a09d;background-color:#d6da00
}

这里只定义了一个混入，也就是mybox-base，我们在下面三处包含了它。如果你本地安装了sass编译器，可以使用形如sass xxx.sass:xxx.css的命令将它编译成CSS文件，编译后的结果如下：

.mybox {width: 60px;height: 26px;color: #1a1a1a;background-color: #e4e4e4; }.mybox-critical {width: 60px;height: 26px;color: #fbff00;background-color: #ff3636; }.mybox-warning {width: 60px;height: 26px;color: #00a09d;background-color: #d6da00; }/*# sourceMappingURL=test.css.map */

可以看出，@include指令将我们定义的混入中的样式添加到使用包含的位置处了。

2.2 向混入传递变量

在2.1节的例子中我们没有使用参数。然而与函数一样的是，sass中的混入也可以使用参数，这些参数可以包含了颜色、像素、数值等等信息。
下面我们给一个传递变量的例子：

// 允许传入字体颜色与背景色两个变量
@mixin mybox-base($font-color, $bg-color) {width: 60px;height: 26px;color: $font-color;background-color: $bg-color;
}.mybox {@include mybox-base(#1a1a1a, #e4e4e4);
}.mybox-critical {@include mybox-base(#fbff00, #ff3636);
}.mybox-warning {@include mybox-base(#00a09d, #d6da00);
}

将其编译成CSS后的内容与之前不传参数是一样的：

.mybox {width: 60px;height: 26px;color: #1a1a1a;background-color: #e4e4e4; }.mybox-critical {width: 60px;height: 26px;color: #fbff00;background-color: #ff3636; }.mybox-warning {width: 60px;height: 26px;color: #00a09d;background-color: #d6da00; }/*# sourceMappingURL=test.css.map */

但是从写法上看就比之前更加简洁了，因为我们没有在使用@include指令以包含的位置反复使用css关键字定义字体色和背景色，而是仅仅传入了颜色值。

2.3 使用默认参数

上面我一经向大家介绍了 sass 可以使用参数，这里我还要告诉各位，sass 不仅可以使用参数，而且还可以使用默认参数。在上面的应用案例中mybox类完全就可以使用默认参数而不需要再次传入了，这时我们可以这样去定义混入：

@mixin mybox-base($font-color:#1a1a1a, $bg-color:#e4e4e4) {width: 60px;height: 26px;color: $font-color;background-color: $bg-color;
}

对应的，mybox类就不需要再传入参数了：

.mybox {@include mybox-base;
}

2.4 使用可变参数

JS函数的可变参数也被借鉴到混入中来。所谓 可变参数指的是再使用前我们不知道传入参数的个数，这时使用... 以表示可以传入任意多个参数。熟悉CSS的读者都知道，当我们指定一些属性值时，不一定需要指定所有的属性，未指定部分可以让系统默认分配。如border、background等等。

例如：

@mixin my-box($shadows...) {box-shadow: $shadows;
}.shadow-box {@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

这个混入中一次就传入了多个属性值，然而并不是我们在每次引入该混入时都需要指定同样个数的属性值的。

sass 混入（@mixin 与 @include的使用）相关推荐

css sass的@mixin 与 @include引用
@mixin 指令允许定义一个可以在整个样式表中重复使用的样式 @mixin flex-j($type: space-between, $type2: center) { display: flex; ...
sass之mixin的全局引入（vue3.0）
sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){background: $c ...
vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM
文章目录过渡 & 动画 Transition 组件基于 CSS 的过渡效果 CSS 过渡类名 class 为过渡效果命名 CSS 过渡 transition 实例1: 实例2: CSS 动 ...
Vue学习之混入(Mixin)
Vue学习之混入文章目录 Vue学习之混入一.什么是混入? 二.注册混入三.使用混入 1. 局部混入 2.全局混入四.混入的规则总结一.什么是混入? 混入 (mixin) 提供了一种非常灵 ...
vue的混入mixin拙见
混入的作用:可以省很多代码(高类聚低耦合),还方便维护: 他可以把多个组件中重复出现的属性和方法进行封装方便多次调用. 混入就是把公共的方法逻辑抽取出来放在一个公共的组件内.不过里面可以写data数据 ...
vue混入mixin
一.mixin :Mixin 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个 mixin 对象可以包含任意组件选项.当组件使用 mixin 对象时,所有 mixin 对象的选项将被 ...
CSS预处理器 -- stylus 、sass、less
在写CSS的时候我们会发现,为了兼容浏览器等原因,我们往往需要写很多冗余的代码,CSS预处理器就是为了解决CSS的这些问题,简化CSS代码的编写. 目前最主流的CSS预处理器是LESS.SASS和St ...
再谈 CSS 预处理器
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...

sass 混入（@mixin 与 @include的使用）

作者：李俊才

邮箱：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

1. 混入的概念

2. 混入的使用

2.1 混入的基本使用

2.2 向混入传递变量

2.3 使用默认参数

2.4 使用可变参数

sass 混入（@mixin 与 @include的使用）相关推荐

最新文章

热门文章

sass 混入 （@mixin 与 @include的使用）

作者： 李俊才

邮箱 ：291148484@163.com

CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343

本文地址：https://blog.csdn.net/qq_28550263/article/details/123350343

1. 混入的概念

2. 混入的使用

2.1 混入的基本使用

2.2 向混入传递变量

2.3 使用默认参数

2.4 使用可变参数

sass 混入 （@mixin 与 @include的使用）相关推荐

最新文章

热门文章

sass 混入（@mixin 与 @include的使用）

作者：李俊才

邮箱：291148484@163.com

sass 混入（@mixin 与 @include的使用）相关推荐