我正在使用Bootstrap 5&SCSS来定义我的css.我知道我可以在html中包含p-2作为填充.但我如何才能在SCSS本身中引用该填充呢?我不想超越任何事情,我只想能够做,比如说:

.x {
  color: $gray2;
  padding: //one that is same for p-2 - whatever it is
}

我不想给那个填充精确的px值,因为这可能会改变.

推荐答案

您最有可能是在寻找extend号房产.

假设p-2看起来像这样.

.p-2 {
   padding: 2rem;
}

然后在您的类上使用EXTEND

.x {
  @extend .p-2;
  color: $gray2;
}

会在最终的css中给出这一点.

.x {
  padding: 2rem;
  color: $gray2;
}

Css相关问答推荐

转换间隙值时基于百分比的弹性元素&跳转

如何使用css::Part()定位Web组件shadowDOM中的第N个元素

可折叠/可展开的数据表行:如何使Shadcn数据表中的可折叠内容全宽?

如何仅使用CSS Select 器根据列表中第n个项的子项属性 Select 该项

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

禁用MUI DataGrid上的悬停效果

带有 flex 的 CSS 空 div 以扩展并保持纵横比

如何使用props 为 Vue 中的组件创建动态背景图像?

如何使 css 不重复同一个类?

宽度为 x VW 的元素似乎对窗口调整大小没有react

AngularJS Graphs & Charts - 实线和虚线的混合

将复选框对齐到中心

twitter-bootstrap:当鼠标悬停在 -tag 中的 btn-group 上时,如何go 掉带下划线的按​​钮文本?

通过javascript删除或禁用浏览器的焦点边框

从样式设置为 % 的元素获取宽度(以像素为单位)?

CSS flex,如何在第一行显示一个项目,在下一行显示两个项目

通过 Bootstrap4 对列进行排序

如何使 window.scrollTo() 效果平滑

带有一些 LESS 魔法的花式媒体查询

CSS背景图像不透明度?