特殊功能

url（）永久链接url()

该url()函数通常在CSS中使用，但是其语法与其他函数不同：它可以使用带引号或不带引号的URL。由于未引用的URL不是有效的SassScript表达式，因此Sass需要特殊的逻辑来对其进行解析。

如果url()的参数是有效的未加引号的URL，则Sass会按原样对其进行解析，尽管插值也可用于注入SassScript值。如果它不是有效的未加引号的URL（例如，如果它包含变量或函数调用），则将其解析为普通的普通CSS函数调用。

$roboto-font-path: "../fonts/roboto";

@font-face {
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

$roboto-font-path: "../fonts/roboto"

@font-face
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 100


@font-face
    // This is parsed as a normal function call that takes an arithmetic
    // expression.
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 300


@font-face
    // This is parsed as an interpolated special function.
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")

    font-family: "Roboto"
    font-weight: 400

@font-face {
  src: url("../fonts/roboto/Roboto-Thin.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 100;
}
@font-face {
  src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2");
  font-family: "Roboto";
  font-weight: 300;
}
@font-face {
  src: url(../fonts/roboto/Roboto-Regular.woff2) format("woff2");
  font-family: "Roboto";
  font-weight: 400;
}

计算值（），元件（），PROGID：...（），和表达式（）永久calc()，element()，progid:...()，和 expression()

该calc()和element()功能在定义的CSS  规范。由于calc()的数学表达式与Sass的算术冲突，并且element()的ID可以解析为颜色，因此需要特殊的解析。

expression()和开头的progid:功能是使用非标准语法的旧版Internet Explorer功能。尽管最近的浏览器不再支持它们，但Sass会继续解析它们以实现向后兼容性。

Sass允许这些函数调用中的任何文本，包括嵌套括号。除了插值可用于注入动态值外，没有任何东西可解释为SassScript表达式。

.logo {
  $width: 800px;
  width: $width;
  position: absolute;
  left: calc(50% - #{$width / 2});
  top: 0;
}

.logo
  $width: 800px
  width: $width
  position: absolute
  left: calc(50% - #{$width / 2})
  top: 0

.logo {
  width: 800px;
  position: absolute;
  left: calc(50% - 400px);
  top: 0;
}

min（）和max（）永久链接min()和 max()

兼容性：

Dart·Sass（Dart Sass）

从  1.11.0开始

LibSass

✗

rubySass

✗

▶

CSS在Values and Units Level 4中增加了对Values和Units的支持min()和max()功能，由此Safari迅速采用了它们并支持iPhoneX。但Sass支持其自身min()和max() 功能在此之前长，它需要与所有现有的样式表向后兼容。这导致需要特殊语法的技巧。

如果min()或max()函数调用是有效的普通CSS，它将被编译为CSS min()或max()调用。“素CSS ”包括嵌套调用calc()，env()，var()，min()，或max()，以及内插。但是，只要调用的任何部分包含SassScript功能（如变量或函数调用），它就会被解析为对Sass的核心min()或max()函数的调用。

$padding: 12px;

.post {
  // Since these max() calls don't use any Sass features other than
  // interpolation, they're compiled to CSS max() calls.
  padding-left: max(#{$padding}, env(safe-area-inset-left));
  padding-right: max(#{$padding}, env(safe-area-inset-right));
}

.sidebar {
  // Since these refer to a Sass variable without interpolation, they call
  // Sass's built-in max() function.
  padding-left: max($padding, 20px);
  padding-right: max($padding, 20px);
}

$padding: 12px

.post
  // Since these max() calls don't use any Sass features other than
  // interpolation, they're compiled to CSS max() calls.
  padding-left: max(#{$padding}, env(safe-area-inset-left))
  padding-right: max(#{$padding}, env(safe-area-inset-right))


.sidebar
  // Since these refer to a Sass variable without interpolation, they call
  // Sass's built-in max() function.
  padding-left: max($padding, 20px)
  padding-right: max($padding, 20px)

.post {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}

.sidebar {
  padding-left: 20px;
  padding-right: 20px;
}