1

Bem, eu estava estudando sobre textos responsivos e encontrei a classe css do Materialize que deixa os textos responsivos de acordo com a largura da tela. Abrir o código fonte para tentar entender como funcionava mas não conseguir, será que alguém pode me ajudar?

// Flowtext
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default; 

.flow-text{
      font-weight: 300;
      $i: 0;
      @while $i <= $intervals {
        @media only screen and (min-width : 360 + ($i * $interval-size)) {
          font-size: 1.2rem * (1 + (.02 * $i));
        }
        @media only screen and (min-width : 0 + ($i * $interval-size)) {
          line-height: .8rem * (1 + (.13 * $i));
        }
        $i: $i + 1;
      }
    }

1 Resposta 1

2

Na minha resposta, vou assumir que você não tenha entendido absolutamente nada do código. Portanto, perdoe-me pelo ditatismo ou se por ventura eu fale muitos óbvios:

  1. SASS ?

    O código que você postou é SASS. Acrônimo para Syntactically Awesome Style Sheets, ela é uma das várias linguagens de extensão de CSS que existem por aí e, em particular, minha favorita. O SASS tem duas sintaxes e, portanto, dois formatos de arquivo: o .scss e o .sass. A diferença fundamental entre as duas é que a última é baseada na indentação (assim como o python). Ela usa desta indentação para definir os blocos de código. Por exemplo:

    //.sass
    body
        .wrapper
            h2
                color: red
    

    Equivale a:

    //.scss
    body{
        .wrapper{
            h2{
                color:red;
            }
        }
    }
    

    E ambos são compilados para

    //.css
    body .wrapper h2{
        color:red;
    }
    

    Você pode brincar um pouco com ambas as sintaxes neste playground, e ler a documentação aqui.

    O que o SASS faz é basicamente lhe dar uma alternativa mais rápida pra escrever alguns seletores que seriam complicados ou repetitivos de se construir no CSS puro, ou ainda que utilizem de bastante lógica matemática. Precisamente o caso do seu código.

  2. Media queries

    Media queries são, de uma maneira bem crua, condições para as suas regras de estilo. Se você tiver algo como

    //.sass
    @media print
        body
            width: 100%
    

    A propriedade só será aplicada no momento da impressão. (No caso, <body> com 100% de width). Veja aqui o caminhão de coisas que você pode fazer com elas.

Falando especificamente do seu código, o que ele faz é usar os super poderes do SASS para criar uma série de media queries que seriam extremamente complicadas de se construir sem ele. Essas media queries são responsáveis por deixar o texto responsivo.

No ínicio, tem-se essas 3 variáveis (variáveis em SASS são definidas pela presença do caractér $)

// Flowtext 
$range : $large-screen - $small-screen !default; 
$intervals: 20 !default; 
$interval-size: $range / $intervals !default;

Veja que a variável $range depende de outras duas, que são $large-screen e $small-screen. Dei uma caçada dentro do framework, e encontrei os seguintes valores:

$small-screen: 600px !default;
$large-screen: 1200px !default;

A partir desses dois valores, é definido o tamanho do intervalo nos quais as media queries vão agir ($interval-size). A lógica que segue é bem direta: é setado um valor padrão para font-weight da classe .flow-text, assim como um contador $i que é declarado como 0. Ele é usado para controlar o loop que vai criar as (20) media queries, que vão definir font-size e line-height de tudo que está dentro desta classe para uma série (20) de diferentes cortes. Esses valores são definidos em unidades rem. Portanto, o código completo

// Flowtext

//.scss
$small-screen: 600px !default;
$large-screen: 1200px !default;

$range : $large-screen - $small-screen !default; 
$intervals: 20 !default; 
$interval-size: $range / $intervals !default; 

.flow-text{ 
    font-weight: 300; 
    $i: 0; 
    @while $i <= $intervals { 
        @media only screen and (min-width : 360 + ($i * $interval-size)) {
            font-size: 1.2rem * (1 + (.02 * $i)); 
        } 
        @media only screen and (min-width : 0 + ($i * $interval-size)) { 
            line-height: .8rem * (1 + (.13 * $i)); 
        } 
        $i: $i + 1; 
    } 
}

Compilado, fica (prepare-se):

.flow-text {
    font-weight: 300;
}

@media only screen and (min-width: 360px) {
    .flow-text {
        font-size: 1.2rem;
    }
}

@media only screen and (min-width: 0px) {
    .flow-text {
        line-height: 0.8rem;
    }
}

@media only screen and (min-width: 390px) {
    .flow-text {
        font-size: 1.224rem;
    }
}

@media only screen and (min-width: 30px) {
    .flow-text {
        line-height: 0.904rem;
    }
}

@media only screen and (min-width: 420px) {
    .flow-text {
        font-size: 1.248rem;
    }
}

@media only screen and (min-width: 60px) {
    .flow-text {
        line-height: 1.008rem;
    }
}

@media only screen and (min-width: 450px) {
    .flow-text {
        font-size: 1.272rem;
    }
}

@media only screen and (min-width: 90px) {
    .flow-text {
        line-height: 1.112rem;
    }
}

@media only screen and (min-width: 480px) {
    .flow-text {
        font-size: 1.296rem;
    }
}

@media only screen and (min-width: 120px) {
    .flow-text {
        line-height: 1.216rem;
    }
}

@media only screen and (min-width: 510px) {
    .flow-text {
        font-size: 1.32rem;
    }
}

@media only screen and (min-width: 150px) {
    .flow-text {
        line-height: 1.32rem;
    }
}

@media only screen and (min-width: 540px) {
    .flow-text {
        font-size: 1.344rem;
    }
}

@media only screen and (min-width: 180px) {
    .flow-text {
        line-height: 1.424rem;
    }
}

@media only screen and (min-width: 570px) {
    .flow-text {
        font-size: 1.368rem;
    }
}

@media only screen and (min-width: 210px) {
    .flow-text {
        line-height: 1.528rem;
    }
}

@media only screen and (min-width: 600px) {
    .flow-text {
        font-size: 1.392rem;
    }
}

@media only screen and (min-width: 240px) {
    .flow-text {
        line-height: 1.632rem;
    }
}

@media only screen and (min-width: 630px) {
    .flow-text {
        font-size: 1.416rem;
    }
}

@media only screen and (min-width: 270px) {
    .flow-text {
        line-height: 1.736rem;
    }
}

@media only screen and (min-width: 660px) {
    .flow-text {
        font-size: 1.44rem;
    }
}

@media only screen and (min-width: 300px) {
    .flow-text {
        line-height: 1.84rem;
    }
}

@media only screen and (min-width: 690px) {
    .flow-text {
        font-size: 1.464rem;
    }
}

@media only screen and (min-width: 330px) {
    .flow-text {
        line-height: 1.944rem;
    }
}

@media only screen and (min-width: 720px) {
    .flow-text {
        font-size: 1.488rem;
    }
}

@media only screen and (min-width: 360px) {
    .flow-text {
        line-height: 2.048rem;
    }
}

@media only screen and (min-width: 750px) {
    .flow-text {
        font-size: 1.512rem;
    }
}

@media only screen and (min-width: 390px) {
    .flow-text {
        line-height: 2.152rem;
    }
}

@media only screen and (min-width: 780px) {
    .flow-text {
        font-size: 1.536rem;
    }
}

@media only screen and (min-width: 420px) {
    .flow-text {
        line-height: 2.256rem;
    }
}

@media only screen and (min-width: 810px) {
    .flow-text {
        font-size: 1.56rem;
    }
}

@media only screen and (min-width: 450px) {
    .flow-text {
        line-height: 2.36rem;
    }
}

@media only screen and (min-width: 840px) {
    .flow-text {
        font-size: 1.584rem;
    }
}

@media only screen and (min-width: 480px) {
    .flow-text {
        line-height: 2.464rem;
    }
}

@media only screen and (min-width: 870px) {
    .flow-text {
        font-size: 1.608rem;
    }
}

@media only screen and (min-width: 510px) {
    .flow-text {
        line-height: 2.568rem;
    }
}

@media only screen and (min-width: 900px) {
    .flow-text {
        font-size: 1.632rem;
    }
}

@media only screen and (min-width: 540px) {
    .flow-text {
        line-height: 2.672rem;
    }
}

@media only screen and (min-width: 930px) {
    .flow-text {
        font-size: 1.656rem;
    }
}

@media only screen and (min-width: 570px) {
    .flow-text {
        line-height: 2.776rem;
    }
}

@media only screen and (min-width: 960px) {
    .flow-text {
        font-size: 1.68rem;
    }
}

@media only screen and (min-width: 600px) {
    .flow-text {
        line-height: 2.88rem;
    }
}

Perceba o parto que seria escrever (e calcular!) essas media queries sem o poder do pré-processamento. Vale lembrar que os valores nos quais são baseados os cálculos (i.e., font-size: 1.2rem * (1 + (.02 * $i));, foram definidos pelos autores do framework. Eles possivelmente fizeram testes e mais testes para concluir que o cálculo que deve ser feito é exatamente esse e que os valores que eles resultam são os que proporcionam o resultado que eles buscavam. Você pode alterar esses valores e ver o resultado.

1
  • Valeu cara, ajudou muito! (apesar que eu já sábia algumas coisas) Commented 6/06/2015 às 1:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .