I'm using CSS calc to help make my links the proper width and still account for the margins that separate them. The number of links here will vary between 3 and 5 and I wanted to not have to update my CSS when this changes. The code below works except the code is written after CSS is run and therefore doesn't set the width for the links as I'd want. Is there a way to get this to work using Craft or is this a problem with the way calc works?
{% set contactLinkCSS %}
{% for block in contactLinks.contactLinks.type("contactLink") %}
{% set count = 100 / loop.length %}
.{{ block.contactLinkName | slugify }}:hover {
width:calc({{ count }}% - 0.625rem);
background-color: {{ block.contactLinkColor }}
}
{% endfor %}
{% endset %}