• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： scss 中文手册 -> scss 内置模块

    内置模块

    Sass提供了许多内置模块，其中包含有用的函数（以及偶尔的mixin）。这些模块可以像任何用户定义的样式表一样加载@use规则加载，并且可以像任何其他模块成员一样调用它们的函数。所有内置模块 URL 都以 sass 开头：表示它们是sass本身的一部分。

    ⚠️注意！
    在引入 Sass 模块系统之前，所有 Sass 功能始终全局可用。许多函数仍然有全局别名（这些在他们的文档中列出）。Sass 团队不鼓励使用它们，并最终会弃用它们，但目前它们仍然可以与旧 Sass 版本和 Lib Sass（尚不支持模块系统）兼容。
    即使在新的模块系统中，也只有少数函数全局可用，要么因为它们具有特殊的求值行为（if()），要么因为它们在内置 CSS 函数（rgb()和hsl()上添加了额外的行为）。这些不会被弃用，可以自由使用。
    scss 语法css 语法
    @use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

    .button {
  color: #6b717f;
  border: 1px solid #878d9a;
}


    Sass 提供了以下内置模块：

    • sass:math模块，提供了对数字进行操作的函数。
    • sass:string模块，使组合、搜索或拆分字符串变得容易。
    • sass:color模块，基于现有颜色生成新颜色，从而轻松构建颜色主题。
    • sass:list模块，允许您访问和修改列表中的值。
    • sass:map模块，可以在map中查找与键关联的值等等。
    • sass:selector模块，提供对 Sass 强大的选择器引擎的访问。
    • sass:meta模块，公开了 Sass 内部工作的细节。


    全局函数

    if()

    if($condition, $if-true, $if-false)

    如果$condition为真，则返回$if-true；否则，返回$if-false。

    这个函数的特殊之处在于它甚至不计算未返回的参数，因此即使未使用的参数会引发错误，调用也是安全的。

    @debug if(true, 10px, 15px); // 10px
@debug if(false, 10px, 15px); // 15px
@debug if(variable-defined($var), $var, null); // null


    hsl()和hsla()

    hsl($hue $saturation $lightness)
hsl($hue $saturation $lightness / $alpha)
hsl($hue, $saturation, $lightness, $alpha: 1)
hsla($hue $saturation $lightness)
hsla($hue $saturation $lightness / $alpha)
hsla($hue, $saturation, $lightness, $alpha: 1) //=> color

    返回具有给定色调、饱和度和亮度以及给定 alpha 通道的颜色。

    色调是介于 0 度和 360 度（包括 0 度和 360 度）之间的数字，可以是无单位的。饱和度和亮度是介于 0%和 100%（包括 0%和 100%）之间的数字，不能是无单位的。alpha 通道可以指定为 0 到 1（含）之间的无单位数，或 0%到 100%（含）之间的百分比。

    您可以将特殊函数（如calc()或var()代替任何参数）传递给hsl()。您甚至可以使用var()代替多个参数，因为它可能会被多个值替换！当以这种方式调用颜色函数时，它会使用与调用它的相同签名返回一个未加引号的字符串。

    @debug hsl(210deg 100% 20% / var(--opacity)); // hsl(210deg 100% 20% / var(--opacity))
@debug hsla(var(--peach), 20%); // hsla(var(--peach), 20%)

    Sass 对斜线分隔值的特殊解析规则使得在使用签名$lightness时传递变量变得困难。考虑改用。

    $alphahsl($hue $saturation $lightness / $alpha)hsl($hue, $saturation, $lightness, $alpha)

    @debug hsl(210deg 100% 20%); // #036
@debug hsl(34, 35%, 92%); // #f2ece4
@debug hsl(210deg 100% 20% / 50%); // rgba(0, 51, 102, 0.5)
@debug hsla(34, 35%, 92%, 0.2); // rgba(242, 236, 228, 0.2)
    ⚠️注意！
    有些语言认为更多的值是假的，而不仅仅是false和null。Sass 不是那种语言！空字符串、空列表和数字0，在 Sass 中都是真实的。


    rgb()和rgba()

    rgb($red $green $blue)
rgb($red $green $blue / $alpha)
rgb($red, $green, $blue, $alpha: 1)
rgb($color, $alpha)
rgba($red $green $blue)
rgba($red $green $blue / $alpha)
rgba($red, $green, $blue, $alpha: 1)
rgba($color, $alpha) //=> color

    如果传递了$red、$green、$blue和可选的$alpha，则返回具有给定red,green,blue和alpha通道的颜色。

    每个通道可以指定为 0 到 255（含）之间的无单位数，或 0%到 100%（含）之间的百分比。alpha 通道可以指定为 0 到 1（含）之间的无单位数，或 0%到 100%（含）之间的百分比。

    您可以传递特殊函数，如calc()或var()，以代替任何参数传递给rgb()。您甚至可以使用var()代替多个参数，因为它可能被多个值替换！当以这种方式调用颜色函数时，它返回一个未加引号的字符串，该字符串使用与调用相同的签名。

    @debug rgb(0 51 102 / var(--opacity)); // rgb(0 51 102 / var(--opacity))
@debug rgba(var(--peach), 0.2); // rgba(var(--peach), 0.2)

    Sass 对斜线分隔值的特殊解析规则使得在使用签名$blue时传递变量变得困难。考虑改用。

    $alphargb($red $green $blue / $alpha)rgb($red, $green, $blue, $alpha)

    @debug rgb(0 51 102); // #036
@debug rgb(95%, 92.5%, 89.5%); // #f2ece4
@debug rgb(0 51 102 / 50%); // rgba(0, 51, 102, 0.5)
@debug rgba(95%, 92.5%, 89.5%, 0.2); // rgba(242, 236, 228, 0.2)

    如果$color和$alpha被传递，则返回$color给定$alpha通道而不是其原始 alpha 通道。

    @debug rgb(#f2ece4, 50%); // rgba(242, 236, 228, 0.5);
@debug rgba(rgba(0, 51, 102, 0.5), 1); // #003366

    下篇：sass:color