Calc() e SASS - dúvida

Fala ai Luiz, tudo bem? Vamos lá:

Existe alguma forma de utilizar variáveis no calc() do CSS ou realizar a operação 100% - $x de outra forma (sendo $x em rem)?

Tente criar variaveis nativas do CSS à partir das variaveis do SASS, algo assim:

.algum-seletor {
    --uma-variable: $mais-outra-variavel;
    --mais-uma-variable: $mais-outra-variavel;
    width: calc(var(--uma-variable)- var(--mais-uma-variable));
}

Acredito que possa resolver seu problema.

Espero ter ajudado.

Deu certo, obrigado! Na verdade não sabia que dava para usar variáveis CSS dessa forma. Acho que precisaria de um curso no Alura sobre isso, ou sobre o tópico CSS Custom Properties.

Estava usando o projeto Alura Store (curso Grid) para tentar usar variáveis SASS ao invés de valores na hora de montar os templates. Mas realmente consegui fazer apenas usando CSS Variables (já que não adianta usar pré-processador porque não resolve o calc antes)

Declarando o número de colunas, linhas e o gap desejado, usei o calc para fazer as contas. Dai se o template do projeto mudar seria somente alterar as variáveis.

.destaques {
    @extend %grid-layout;

    /* cols = 4 ; grid-gap = .2rem */
    --cols: 4;
    --rows: 3;
    --grid-gap: .2rem;

    --grid-col-width: calc(calc(100% - calc(var(--grid-gap) * calc(var(--cols) - 1))) / var(--cols));
    --grid-row-height: calc(100% / var(--rows));

    grid-template: repeat(var(--rows),var(--grid-row-height)) / repeat(var(--cols), var(--grid-col-width));
    grid-gap: var(--grid-gap);

    height: calc(100vh - 50px);
}

Fala Luiz, boa, fico feliz que tenha dado certo.

Você mesmo pode sugerir cursos para a gente gravar, no rodapé tem um link "SUGIRA UM CURSO".

Abraços e bons estudos.