Vertical Rhythm

[dsoldera]

Olá Pessoal,

Alguém usa/conhece algum mixin sass para controle de Vertical Rhythm em com retorno em rem, que funcione legal?

Eu gosto muito dos mixins que o Compass tem de Vertical Rhythm, mas não gosto de trabalhar com este pois é muito penoso para o projeto (carregamento tendo que usar ruby). Então gostaria de encontrar algo semelhante e mais leve de importat

Nessa imagem segue todos os itens que o Compass tem para uso de Vertical Rhythm:

Agradecida desde já

[felipefialho]

@dsoldera

Não trabalho com SASS, portanto nunca usei Compass. Não conheço o Vertical Rhythm.

Como funciona?

[bernardodiasc]

Vertical Rhythm tem a ver com a altura das linhas na tipografia, para harmonia da leitura. Basicamente mantendo consistência dos espaçamentos verticais em qualquer tamanho de fonte.

https://drewish.com/tools/vertical-rhythm/

[akfzambrana]

Nos sistemas em que eu trabalho controlo o vertical rhytm apenas com variaveis:

$space-v-base: px-to-rem(10px);
$space-v-p: $space-v-base / 2;
$space-v-m: $space-v-base * 2;
$space-v-g: $space-v-base * 3;
$space-v-gg: $space-v-base * 4;

trabalho com variaveis diferentes pra espaçamentos laterais e verticais, sendo que os espaçamentos laterais podem ser aplicados com % ou px dependendo do projeto e os verticais utilizando rem

// espacamentos horizontais
$space-base: 10px;
$space-p: $space-v-base / 2; // 5px
$space-m: $space-v-base * 2; // 20px
$space-g: $space-v-base * 3; // 30px
$space-gg: $space-v-base * 4; // 40px
// espacamentos verticais
$space-v-base: px-to-rem(10px);
$space-v-p: $space-v-base / 2;
$space-v-m: $space-v-base * 2;
$space-v-g: $space-v-base * 3;
$space-v-gg: $space-v-base * 4;