在HTML/SCSS中使用类中的变量值

Question

我对html/css/sass还很陌生，目前我正在为自己开发一个网站。当对齐项目时，我注意到我有时想要一个项目向右填充1em，然后另一个项目向上填充2em等。我在.scs文件中进行定义，目前如下：

_master.scss:

:root {        
--pad-neg-left-1: 0 0 0 -1em;
--pad-top-2: 2em 0 0 0;
}
.pad-neg-left-1{
padding: var(--pad-neg-left-1);
}
.pad-top-2{
padding: var(--pad-top-2);
}

index.html:

<div class=".pad-top-2"> Hi </div>

如果我想将类添加到我的html对象中以适应所有用途，那么它会变得非常大和复杂。相反，我想要一个可以接受参数并使用它的类，可能是这样的：

_master.scss:

function pad(top, right, bottom, left){
padding: top right bottom left;
}

index.html:

<div class=".pad(2, 0, 0, 0)"> Hi </div>

这可能吗？

我可以这样写我的div：<div style="padding: 2 0 0 0;"> Hi </div>，但出于某种原因，我从视频中听说，直接在html中定义样式并使用类是不好的。这是错误的吗？或者我可以使用其他方法吗？

Answer 1

我不明白你为什么要把这个过程复杂化。您可以通过设置class直接编写css。但如果你想创建一个风格标准，你可以使用@mixin和@include或variable来满足你的需求。

例如：

@mixin padding($top:0, $right: 0,$bottom:0, $left:0) {
padding: $top $right $bottom $left;
}
.avatar {
@include padding(2,0,0,0);
}

Answer 2

要在sass中创建变量，需要使用$variableName:语法，@mixin用于可重用代码。

_master.scss

@mixin applyPaddings($padding-top, $padding-right, $padding-bottom, $padding-left) {
padding: $padding-top $padding-right $padding-bottom $padding-left;
// or you can do it separately like
// padding-top: $padding-top;
// ...
}
.paddings {
@include applyPaddings(1rem, 1rem, 1rem, 4rem);
}

index.html

<div class="paddings"> Hi </div>

Answer 3

您可以使用像tailwind这样的样式化解决方案，该解决方案包含许多用于样式化的实用程序类。

这将允许您为不同的元素自定义样式，而无需直接编写任何css。

https://tailwindcss.com/