Sass 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

字符串运算

+ 运算符可以用来连接字符串:

p {
  cursor: e + -resize;
}

被编译为:

p {
  cursor: e-resize; }

注意,如果有引号的字符串被添加了一个没有引号的字符串 (也就是,带引号的字符串在 + 符号左侧), 结果会是一个有引号的字符串。 同样的,如果一个没有引号的字符串被添加了一个有引号的字符串 (没有引号的字符串在 + 符号左侧), 结果将是一个没有引号的字符串。 例如:

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

被编译为:

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

默认情况下,如果两个值彼此相邻,它们会被用空格连接起来:

p {
  margin: 3px + 4px auto;
}

被编译为:

p {
  margin: 7px auto; }

在文本字符串中,#{} 形式的表达式可以被用来在字符串中添加动态值:

p:before {
  content: "I ate #{5 + 10} pies!";
}

被编译为:

p:before {
  content: "I ate 15 pies!"; }

空值会被视作空字符串:

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

被编译为:

p:before {
  content: "I ate  pies!"; }