scss-字符串连接符

　　 运算可用于连接字符串:

// SCSS 
p {
  cursor: e   -resize;
}
// 编译后的 CSS 样式
p {
  cursor: e-resize;
}

　　请注意，如果带引号的字符串被添加到不带引号的字符串中（也就是说，带引号的字符串在 的左侧）， 

　　那么返回的结果是带引号的字符串。同样，如果一个不带引号的字符串添加到带引号的字符串中（不带引号的字符串在 的左侧）那么返回的结果是一个不带引号的字符串。 例如：

// SCSS
p:before {
    content: "Foo "   Bar;
    font-family: sans-   "serif";
}
// 编译后的 CSS 样式
p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}

　　默认情况下，运算表达式与其他值连用时，用空格做连接符：

// SCSS
p {
    margin: 3px   4px auto;
}
// 编译后的 CSS 样式
p {
    margin: 7px auto; 
}

　　在文本字符串中，#{}式插值可以用来在字符串中放置动态值：

// SCSS
p:before {
    content: "I ate #{5   10} pies!";
}
// 编译后的 CSS 样式
p:before {
    content: "I ate 15 pies!"; 
}

　　在字符串插值时，Null值被视为空字符串：

// SCSS
$value: null;
p:before {
    content: "I ate #{$value} pies!";
}
// 编译后的 CSS 样式
p:before {
    content: "I ate  pies!"; 
}

 

更多专业前端知识，请上 【猿2048】www.mk2048.com