参见英文答案 >
Adding a unit to a number in Sass1
我正在尝试跟随 this tutorial的响应布局设计,但使用SASS / SCSS作为我的基本规范语言.
我正在尝试跟随 this tutorial的响应布局设计,但使用SASS / SCSS作为我的基本规范语言.
为此,我已经定义了以下SCSS：
body {
font: 100%/1.5;
}
h1 {
$h1_size: 24;
font-size: ($h1_size / 16)em;
line-height:(28 / $h1_size)em;
margin-top: (24 / $h1_size)em;
}
不幸的是,从sass到CSS格式的输出如下所示：
h1 {
font-size: 1.5 em;
line-height: 1.167 em;
margin-top: 1 em;
}
– 将单位与空格分隔开. Chrome会将这些值拒绝为无效,并且仅在手动自行移除空格时才使用它们.
有没有办法通过调整我的SCSS来解决这个问题,或者传递一个选项来解决这个问题？
到目前为止,我已经尝试过：
将本机放在计算中：
>(font-size：($h1_size / 16em))=>语法错误
>(font-size：(($h1_size)em / 16)=> font-size：24 em / 16;这是我想要修复的同样的问题
解决方法
您可以将em推入$h1_size定义,这将允许您简单地除以16并在ems中获得结果.
如果这个部门的双方都在,你的结果将是无单位的.如果需要,您可以轻松地乘以1em让您的装置恢复.
h1 {
$h1_size: 24em;
font-size: ($h1_size / 16);
line-height:(28em / $h1_size);
margin-top: (24em / $h1_size * 1em);
}
乘以1em也可以使您更接近您的原始示例工作.您通常可以保持单位无关,当您想要显示单位时,只能乘以1em.这避免了我的第一个例子中的一些无意义的扩散：
h1 {
$h1_size: 24;
font-size: ($h1_size / 16 * 1em);
line-height:(28 / $h1_size);
margin-top: (24 / $h1_size * 1em);
}
