我有两个SCSS Select 器,我在其中使用相同的正负数量,如下所示:

padding: 0 15px 15px;
margin: 0 -15px 20px -15px;

我更愿意为所有15px的量使用一个变量,但这不起作用:

$pad: 15px;
padding: 0 $pad $pad;
margin: 0 -$pad 20px -$pad;

保证金金额转换为正数.我错过什么了吗?

推荐答案

创建函数

@function neg($val) {
  @return $val * -1
};

然后我就这样用

$gutter: 30px;

.header {
  margin: $gutter neg($gutter);
}

Css相关问答推荐

当optgroup元素不包含任何未使用CSS禁用的选项元素时,如何隐藏它

如何允许在bslb中 Select 输入重叠卡片?

搜索栏突出显示角形HTML中的Mat-Form-field输入框的焦点

带高度的容器查询不工作,但可随宽度调整

Prettier/VS Code 在 CSS 中的 !important 之前添加一个空格,导致它在 WordPress 中崩溃

如何使用 Cypress 从 React 下拉列表中进行 Select

Nextjs Tailwind Marquee 组件溢出

flex-wrap 导致 children 身高加倍

我可以拆分我的 CSS / SASS webpack 加载器规则,还是它们需要成为一个大规则?

如何使用显示网格制作不同大小的列取决于元素的数量

如何禁用 Angular Material Pagination 按钮的波纹效果?

zoom 时闪烁的背景滤镜模糊

子组件的css会影响整个页面

Adobe Illustrator 删除我在 svg 图像上的类名.我怎样才能防止这种情况?

我怎样才能让这个边框出现在按钮元素的上方?

CSS:背景图像和填充

创建 CSS 全局变量:样式表主题管理

如何使用 Bootstrap 3 阻止按钮保持压抑状态

如何更改 Angular Material 上 mat-icon 的大小?

@font-face src: local - 如果用户已经拥有本地字体,如何使用它?