百科狗-知识改变命运!
--

@mixin 与 @include - 混入和引用 - scss 规则

是丫丫呀1年前 (2023-11-21)阅读数 27#技术干货
文章标签参数

@mixin 与 @include

Mixins允许您定义可以在整个样式表中重复使用的样式。它们可以很容易地避免使用非语义类,如.float-left,并在库中分发样式集合。

Mixins是使用@mixi规则定义的,该规则编写为@mixin{...}或者@mixin name(){...}。mixin 的名称可以是任何 Sass 标识符,并且它可以包含除顶级语句之外的任何语句。它们可用于封装可放入单个样式规则中的样式;它们可以包含自己的样式规则,可以嵌套在其他规则中,或包含在样式表的顶层;或者它们可以只用于修改变量。

使用@include规则将Mixins包含到当前上下文中,该规则写为@include或者@include(),其中包含 mixin 的名称。

SASS 导入与 CSS 导入具有相同的语法,只是它们允许多个导入用逗号分隔,而不是要求每个导入都有自己的@import。此外,在缩进语法中,导入的 URL 不需要有引号。

scss 语法css 语法
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}
Mixin 名称和所有 Sass 标识符一样,将连字符和下划线视为相同。这意味着reset-listandreset_list都指的是同一个 mixin。这是 Sass 早期的历史遗留问题,当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法,这两者就等同于使迁移更容易。


参数

Mixins还可以接受参数,这允许每次调用时对其行为进行自定义。参数在@mixin名称之后的 mixin 规则中指定,作为用括号括起来的变量名称列表。然后,mixin 必须以SassScript 表达式的形式包含相同数量的参数。这些表达式的值在 mixin 的主体中作为相应的变量可用。

scss 语法css 语法
@mixin rtl($property, $ltr-value, $rtl-value) {
  #{$property}: $ltr-value;

  [dir=rtl] & {
    #{$property}: $rtl-value;
  }
}

.sidebar {
  @include rtl(float, left, right);
}
.sidebar {
  float: left;
}

[dir=rtl] .sidebar {
  float: right;
}
参数列表也可以有尾随逗号!这可以使重构样式表时更容易避免语法错误。


可选参数

通常,当包含 mixin 时,必须传递 mixin 声明的每个参数。但是,您可以通过定义一个默认值来使该参数成为可选参数,如果该参数未传递,则将使用该默认值。默认值使用与变量声明相同的语法:变量名,后跟一个冒号和一个SassScript 表达式。这使得定义灵活的 mixin API 变得容易,这些 API 可以以简单或复杂的方式使用。

scss 语法css 语法
@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}
.mail-icon {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;
  background-image: url("/images/mail.svg");
  background-repeat: no-repeat;
  background-position: 0 50%;
}
默认值可以是任何SassScript表达式,它们甚至可以引用早期参数!


关键字参数

当包含一个 mixin 时,除了通过它们在参数列表中的位置传递它们之外,还可以通过名称传递参数。这对于具有多个可选参数的 mixin 或布尔参数特别有用,这些参数在没有名称的情况下意义不明显。关键字参数使用与变量声明和可选参数相同的语法。

scss 语法css 语法
@mixin square($size, $radius: 0) {
  width: $size;
  height: $size;

  @if $radius != 0 {
    border-radius: $radius;
  }
}

.avatar {
  @include square(100px, $radius: 4px);
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}
⚠️注意!
因为任何参数都可以通过名称传递,所以在命名 mixin 的参数时要小心……它可能会破坏你的用户!将旧名称作为可选参数,保留一段时间并在有人通过它时打印警告会很有帮助,因此他们知道要迁移到新参数。


接收任意参数

有时,mixin 能够接受任意数量的参数很有用。如果@mixin声明中的最后一个参数以...结尾,则该 mixin 的所有额外参数,都将作为列表传递给该参数。此参数称为参数列表。

scss 语法css 语法
@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, "input.name", "input.address", "input.zip");
input.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}


接收任意关键字参数

参数列表也可用于获取任意关键字参数。该meta.keywords()函数接受一个参数列表,并返回任何额外的关键字,这些关键字作为从参数名称(不包括$)到这些参数值的映射传递给 mixin 。

scss 语法css 语法
@use "sass:meta";

@mixin syntax-colors($args...) {
  @debug meta.keywords($args);
  // (string: #080, comment: #800, variable: #60b)

  @each $name, $color in meta.keywords($args) {
    pre span.stx-#{$name} {
      color: $color;
    }
  }
}

@include syntax-colors(
  $string: #080,
  $comment: #800,
  $variable: #60b,
)
pre span.stx-string {
  color: #080;
}

pre span.stx-comment {
  color: #800;
}

pre span.stx-variable {
  color: #60b;
}
如果您从未将参数列表传递给meta.keywords()函数,则该参数列表将不允许额外的关键字参数。这有助于你的 mixin 的调用者,确保他们没有意外拼错任何参数名称。

@mixin 与 @include - 混入和引用 - scss 规则


传递任意参数

就像参数列表允许 mixin 接受任意位置或关键字参数一样,可以使用相同的语法将位置和关键字参数传递给 mixin。如果您传递一个列表,然后...将其作为包含的最后一个参数,则其元素将被视为附加的位置参数。同样,后跟的映射...,将被视为附加关键字参数。你甚至可以同时通过!

$form-selectors: "input.name", "input.address", "input.zip" !default;

@include order(150px, $form-selectors...);

因为参数列表同时跟踪位置参数和关键字参数,所以可以使用它将这两个参数同时传递给另一个mixin。这使得为 mixin 定义别名变得超级容易!

@mixin btn($args...) {
  @warn "The btn() mixin is deprecated. Include button() instead.";
  @include button($args...);
}


内容块

除了获取参数外,mixin 还可以获取整个样式块,称为内容块。mixin 可以通过在其主体中包含@content规则来声明它接受内容块。与 Sass 中的任何其他块一样,内容块使用花括号传递,并被注入以代替@content规则。

scss 语法css 语法
@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

.button {
  border: 1px solid black;
  @include hover {
    border-width: 2px;
  }
}
.button {
  border: 1px solid black;
}
.button:not([disabled]):hover {
  border-width: 2px;
}
一个 mixin 可以包含多个@content规则。如果有,则内容块将分别包含在每个@content中。⚠️注意!
内容块是词法范围的,这意味着它只能看到包含 mixin 的范围内的局部变量。它看不到在它传递到的 mixin 中定义的任何变量,即使它们是在调用内容块之前定义的。


将参数传递给内容块

一个 mixin 可以通过写入@content()将参数传递给其内容块,就像它将参数传递给另一个mixin一样。编写内容块的用户可以通过编写@includeusing()来接受参数。内容块的参数列表就像 mixin 的参数列表一样,而@content传递给它的参数就像传递给 mixin 的参数一样。

⚠️注意!
如果 mixin 将参数传递给其内容块,则该内容块必须声明它接受这些参数。这意味着只按位置(而不是按名称)传递参数是个好主意,这意味着传递更多参数是一个重大变化。如果您想灵活地传递给内容块的信息,请考虑传递一个包含它可能需要的信息的地图!
scss 语法css 语法
@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}
@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)