mixin 背后的原理与开发语言中的类背后的原理相同:创建易于重用、可扩展且可在多种情况下使用的代码。
让我们从一个例子开始:我想你已经遇到过所谓的浏览器前缀(或供应商前缀);对于那些不知道它们是什么的人,我提醒你,它们是各种浏览器提供商用来实验和测试新属性而不会产生向后兼容性问题的前缀(你可以在这里找到更多信息)。让我们以边框半径
属性为例:正确的语法使得我们可以充分确定此属性在大多数浏览器上都有效,如下所示:
您会明白,每次我们添加类似的语法时,我们都会浪费 肯尼亚电报号码数据库 大量的时间,而且出错的风险很高,尤其是在编辑时(谁没有修复过 Webkit 上的错误而将其留在 Mozilla 中?)。通常,这样的语法也显示出我们开发人员的懒惰:小小的声音说“嘿,来吧,不要太参与,不要在乎 Opera,来吧......谁用它“?”变得非常明显。如果我们在代码的某一处发现这样的语法,我们就会压制这个小声音,但是如果代码中充满了这样的函数,即使是圣人也会倾向于遵循它……
那该怎么办呢?很简单:使用 SASS mixins!让我们看看如何
这段代码是 mixin 的定义:实际上,我们告诉编译器存在这样的函数,并且一旦通过传递值来调用它,就必须按照里面写的规则进行编译。 Mixins 的调用方式如下:
SCSS 代码 classe {@include border-radius(10px);}
我们已经在一些文章中插入了这种符号:例如,在这里您会发现一些特殊的 CSS 形式。只需复制混合,并在必要时使用所需的变量调用它们即可轻松获得所需的形状。
现在,想象一下,如果有一种方法可以将 mixins 保存到文件中,以便您在需要时可以调用所需的文件,那将是多么酷?好的,我知道你明白了:这种