Sass支持一些生成字符串的运算符:

  • <expression> + <expression>返回一个包含两个表达式值的字符串。如果其中一个值是带引号的字符串,则结果将被带引号;否则,它将被取消报价。

  • <expression> / <expression>返回一个无引号的字符串,其中包含两个表达式的值,以分隔  /

  • <expression> - <expression>返回一个无引号的字符串,其中包含两个表达式的值,以分隔-。这是一个传统运算符,通常应使用插值法

SCSS  语法

@debug "Helvetica" + " Neue"; // "Helvetica Neue"
@debug sans- + serif; // sans-serif
@debug #{10px + 5px} / 30px; // 15px/30px
@debug sans - serif; // sans-serif

Sass语法

@debug "Helvetica" + " Neue"  // "Helvetica Neue"
@debug sans- + serif  // sans-serif
@debug #{10px + 5px} / 30px  // 15px/30px
@debug sans - serif  // sans-serif

这些运算符不仅仅适用于字符串!它们可以与可以写入CSS的任何值一起使用,但有一些例外:

SCSS  语法

@debug "Elapsed time: " + 10s; // "Elapsed time: 10s";
@debug true + " is a boolean value"; // "true is a boolean value";

Sass语法

@debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
@debug true + " is a boolean value"  // "true is a boolean value";

Head️抬头!

使用插值来创建字符串通常比使用此运算符更简洁明了。

一元运算符永久链接一元运算符

由于历史原因,Sass还支持/并且-作为一元运算符,它们仅取一个值:

  • /<expression>返回一个无引号的字符串/,该字符串以表达式的值开头,后跟表达式的值。
  • -<expression>返回一个无引号的字符串-,该字符串以表达式的值开头,后跟表达式的值。

SCSS  语法

@debug / 15px; // /15px
@debug - moz; // -moz

Sass语法

@debug / 15px  // /15px
@debug - moz  // -moz