它提供了使用#{}语法选择器和属性名的SassScript变量。可以在大括号中指定变量或属性名称。
语法
#{$name}
$name 是变量或属性名称的名字。
示例
下面的例子演示了SCSS文件使用插值：
<html> <head> <title>插值 - www.xuhuhu.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Example using Interpolation</h2> <p>SASS stands for Syntactically Awesome Stylesheet...</p> </div> </body> </html>
接下来，创建文件style.scss。
style.scss
p:after {
content: "I have #{8 + 2} books on SASS!";
}
可以告诉SASS监视文件，并随时使用下面的命令更新SASS文件修改CSS：
sass --watch C:\Ruby22-x64\style.scss:style.css
接着执行上面的命令，它会自动创建style.css文件，下面的代码：
style.css
p:after {
content: "I have 10 books on SASS!";
}
输出结果
让我们来执行以下步骤，看看上面的代码执行结果：
-
保存上述的HTML代码到interpolation.htmll文件。
-
在浏览器中打开该HTML文件，输出如下得到显示。
