在 ASP.NET Core Razor 页面中使用 Tailwind，我可以在 calc() 中使用 @model 吗？

Question

这是我的问题。我正在使用 Razor 页面和 Tailwind。我想在顺风语法中使用

@model

表达式。这样我就摆脱了switch case结构。它似乎在浏览器的调试屏幕中正常工作。但是，什么都没有改变。

@foreach (var item in Model.MainClassification)
{
    <button class="flex justify-center align-middle m-auto px-36 py-[calc(27rem/@Model.MainClassification.Count)]">@item</button>
}

值越多，填充区域应该越小。即使我在浏览器中正确看到它，也没有任何变化。

Answer 1

CSS本身不支持Razor语法，因为Razor语法是服务器端C#代码，而CSS是运行在浏览器中的客户端代码。在浏览器中，CSS 是静态样式表，不支持服务器端的动态计算或 Razor 语法。

所以你可以使用下面的代码来实现它。

@foreach (var item in Model.MainClassification)
{
    var paddingY = 27 / Model.MainClassification.Count; 
    <button style="padding-top: @(paddingY)rem; padding-bottom: @(paddingY)rem;" class="flex justify-center align-middle m-auto px-36">
        @item
    </button>
}

测试结果