Entrar Ainda não tem acesso?
1
resposta

Erro "Unknown property name"

Referente ao curso Sass: O CSS com superpoderes, no capítulo Controle de fluxo e laços de repetição e atividade Iteração com @each

por Carlos Gabriel Soares Succi
| 83.2k xp | 33 posts

CSS

/// Estas variaveis se referem as cores do nosso blog
$purple: #a050ab;
$light-grey: #eaeaeb;
$dark-grey: #464646;
$yellow: #fabe50;
$img-width: 45%;

@use "sass:math";

%no-decoration {text-decoration: none}
%u-decoration {text-decoration: underline}

@mixin reset-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

@mixin flx($property, $jty-cnt) {
    display: flex;
    #{$property}: $jty-cnt; 
}

@mixin for-phone-only {
    @media (max-width: 767.98px) { @content; }    
}

@mixin for-tablet-only {
    @media (min-width: 768px) and (max-width: 1199.98px) { @content; } 
}

@mixin for-desktop-only {
    @media (min-width: 1200px) { @content; } 
}

@mixin fontSize($size) {
    font-size: calculateRem($size);
}

@function calculateRem($size) {
    @return math.div($size, 16px) * 1rem;
}

@import "header", "footer", "about", "article";

$directions: top, bottom, left, right;
$layout-margin-size: 10px;

@each $direction in $directions {
    %no-margin-#{$direction} {margin-#{direction}: 0;}
    %default-margin-#{$direction} {margin-#{direction}: $layout-margin-size;}
    %double-margin-#{$direction} {margin-#{direction}: $layout-margin-size * 2;}
    %half-margin-#{$direction} {margin-#{direction}: math.div($layout-margin-size, 2);}
}

.main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    font-family: Arial, Helvetica, sans-serif;

    &__content {
        @include for-phone-only {
            width: 100%;
        }
        width: 70%;
        padding: 40px 8px;
    }

    &__post {
        text-align: center;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    &__title {
        text-decoration: none;
        @include fontSize(22px);
        color: $dark-grey;
        letter-spacing: 1.5px;

        &:hover {
            color: $purple;
        }
    }

    &__subtitle {
        display: flex;
        justify-content: center;
        align-items: center;
        @extend %default-margin-top, %double-margin-bottom;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    &__date {
        @extend %no-margin-top, %no-margin-bottom, %default-margin-left, %default-margin-right;
        @include fontSize(12px);
        font-style: italic;
    }

    &__tag {
        @include fontSize(14px);
        padding: 5px 7px;
        color: $purple;
        border: 1px solid $purple;
        @extend %no-margin-top, %no-margin-bottom, %default-margin-left, %default-margin-right;
    }

Print erro

1 resposta
por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Olá Carlos, tudo bem?

Peço desculpas pela demora em dar o retorno.

O erro "Unknown property name" está nos dizendo que o nome da propriedade é desconhecida. Isto ocorre devido um erro de sintaxe na hora de chamar a variável direction no @each. Veja:

@each $direction in $directions {
    %no-margin-#{$direction} {margin-#{direction}: 0;}
    %default-margin-#{$direction} {margin-#{direction}: $layout-margin-size;}
    %double-margin-#{$direction} {margin-#{direction}: $layout-margin-size * 2;}
    %half-margin-#{$direction} {margin-#{direction}: math.div($layout-margin-size, 2);}
}

No Sass as variáveis são chamadas sempre com caractere $ na frente. Dessa forma, nas quatro linhas anteriores a falta desse sinal no {margin-#{direction} fez com que essa variável se comportasse como uma propriedade do CSS.

A partir disso, quando o navegador interpreta essas linhas de código as "enxergando" como uma propriedade, ele percebe que margin-direction: 0 por exemplo, é algo que não existe e consequentemente ele produzirá o erro. Este erro é sinalizado no .main__date e .main__subtitle pois foi onde houve a tentativa de utilizar a variável.

Sendo assim, para que seja interpretado como uma variável de fato, temos sempre que colocar o $ no Sass.

Tente modificar o código dessa maneira e veja se soluciona a questão.

@each $direction in $directions {
    %no-margin-#{$direction} {margin-#{$direction}: 0;}
    %default-margin-#{$direction} {margin-#{$direction}: $layout-margin-size;}
    %double-margin-#{$direction} {margin-#{$direction}: $layout-margin-size * 2;}
    %half-margin-#{$direction} {margin-#{$direction}: math.div($layout-margin-size, 2);}
}

Aguardo para saber se funcionou.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!