当前位置: 首页 > 面试题库 >

CSS calc()函数中的Sass变量

仉刚洁
2023-03-14
问题内容

我正在尝试calc()在Sass样式表中使用该函数,但遇到了一些问题。这是我的代码:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

如果我使用文字50px而不是body_padding变量,那么我得到的正是我想要的。但是,当我切换到变量时,这是输出:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

如何让Sass认识到它需要替换calc函数中的变量?


问题答案:

插值:

body
    height: calc(100% - #{$body_padding})

对于这种情况,border-box也足够了:

body
    box-sizing: border-box
    height: 100%
    padding-top: $body_padding


 类似资料:
  • 我在一个. scss文件中有以下sass代码,它可以完美地工作。 但是Intellij将其显示为无效代码。这可能是我的IDE上的无效设置还是Intellij错了? 我在下面的建筑上 IntelliJ IDEA 2017.3(终极版)Build#IU-173.3727.127,于2017年11月27日发布JRE:1.8.0_152-release-1024-b6 x86_64 JVM:OpenJDK

  • 本文向大家介绍sass 变数,包括了sass 变数的使用技巧和注意事项,需要的朋友参考一下 示例 如果您具有经常使用的值,则可以将其存储在变量中。例如,您可以使用它来定义配色方案。您只需要定义一次方案,然后就可以在整个样式表中使用它。 要定义变量,必须在变量名前加上$符号。(就像您在PHP中一样。) 您可以将任何有效的CSS属性值存储在变量中。例如颜色,字体或URL。 范例1:          

  • 问题内容: 有什么方法可以根据html元素上的类设置颜色变量?还是通过其他方式实现这一目标? 问题答案: 这是基本主题。您可能想使用mixin或包含一个CSS文件中的多个主题。这是使用包括以下内容的方法: _theme.scss main.scss 您可以轻松地制作一个混合色,它使用3种颜色作为其参数来代替include:

  • 问题内容: 我有几个scss选择器,在其中我使用相同数量的正负值,如下所示: 我希望对所有15px的量都使用一个变量,但这不起作用: 保证金金额转换为正数。我想念什么吗? 问题答案: 像这样尝试

  • 我有两个scss选择器,使用相同数量的正片和负片,如: 我更喜欢使用一个变量为所有的15px金额,但这不工作: 保证金金额转换为正数。我错过什么了吗?

  • 问题内容: 我想知道是否存在一种实现类似于map getter的功能的方法:它返回返回值作为第一个参数,(可选地分配)第二个值作为第二个参数。因此,我需要可以通过以下方式调用的函数: 问题答案: 不,它无法完成,唯一的选择是返回一个指针并检查它是否为nil。