百科狗插值 - scss 样式
插值
插值几乎可以在 Sass 样式表中的任何地方使用，以将 SassScript 表达式的结果嵌入到 CSS 块中。只需在以下任何地方包装一个表达式#{}：
- 样式规则中的选择器。
- 声明中的属性名称。
- 自定义属性值。
- CSS 规则。
- @extends。
- 纯 CSS @import。
- 带引号或不带引号的字符串。
- 特殊函数。
- 纯 CSS 函数名称。
- 注释。
| scss 语法 | css 语法 |
|---|---|
@mixin corner-icon($name, $top-or-bottom, $left-or-right) {
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute; #{$top-or-bottom}: 0; #{$left-or-right}: 0;
}
}
@include corner-icon("mail", top, left);
| .icon-mail {
background-image: url("/icons/mail.svg");
position: absolute;
top: 0;
left: 0;
}
|
在 SassScript 中
在 SassScript 中可以使用插值将 SassScript 注入到未引用的字符串中。这在动态生成名称（例如动画）或使用斜线分隔值时特别有用。请注意，SassScript 中的插值始终返回不带引号的字符串。
| scss 语法 | css 语法 |
|---|---|
@mixin inline-animation($duration) {
$name: inline-#{unique-id()};
@keyframes #{$name} {
@content;
}
animation-name: $name;
animation-duration: $duration;
animation-iteration-count: infinite;
}
.pulse {
@include inline-animation(2s) {
from { background-color: yellow }
to { background-color: red }
}
}
| .pulse {
animation-name: inline-u6jo6wl9a;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes inline-u6jo6wl9a {
from {
background-color: yellow;
}
to {
background-color: red;
}
}
|
color:$accent而不是写color:#{$accent}。⚠️注意！对插值使用数字，是一个坏主意。插值返回未加引号的字符串，所以不能用于任何数学运算，它避免了 Sass 的内置保护措施，以确保正确使用单位。
Sass 具有强大的单位算法，您可以使用它来代替。例如，不要写
#{$width}px，而是，开始根据px，声明$width变量，然后写$width * 1px。这样，如果$width已经有单位，你会得到一个的错误消息提示，而不是编译虚假的 CSS。带引号的字符串
在大多数情况下，如果将表达式用作属性值，则插值会注入完全相同的文本。但是有一个例外：引用字符串周围的引号会被删除（即使这些引用字符串在列表中）。这使得编写包含 SassScript 中不允许的语法的带引号的字符串（如选择器）成为可能，并将它们插入到样式规则中。
| scss 语法 | css 语法 |
|---|---|
.example {
unquoted: #{"string"};
}
| .example {
unquoted: string;
}
|
虽然使用此功能，将带引号的字符串转换为不带引号的字符串，很诱人，但使用该string.unquote()函数，会更加清晰。所以要写
string.unquote($string)，而不是#{$string}鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)
图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)
相关文章
