Forem: Luciano Baraúna

Um guia para variáveis (custom properties) e componentização no CSS

Luciano Baraúna — Fri, 03 Apr 2020 14:06:27 +0000

Olá pessoa 😉

Vou trazer nesse guia, links que vão mostrar como utilizar variáveis css localmente, globalmente e apresentar padrões de desenvolvimento que devem ajudar você na componentização do seu código CSS.

Desde quando tomei conhecimento sobre as custom properties do CSS, fiquei muito animado e com uma baita vontade de usá-las mas fui cauteloso, esperei aderência dos browsers à nova tecnologia. Dá uma olhada nesse link do caniuse e veja se você consegue usar no seu projeto.

Faz um mês mais ou menos que comecei a estudar para implementar essa nova tecnologia no meu trabalho, projetos pessoais e etc... Por conta disso foi gerado bastante link nos meus favoritos e resolvi compartilhar com vocês essa, quem sabe trilha de estudo :-)

PS: Vou falar em alguns momentos sobre pré-processador e caso você ainda não saiba ainda o que é, recomendo começar por aqui

Índice

Não conheço nada de CSS *custom properties
Mas tá na hora de usar ?
Padrões de desenvolvimento
Mão na massa
- Código sem custom properties
- Código com custom properties
- As variáveis globais
- O componente botão
- Segue o código final
Links complementares

Não conheço nada de CSS *custom properties

Então vou já vou deixar para você esse link da mozilla onde fala sobre a documentação dessa feature.

Mas tá na hora de usar ?

Ao meu ver essa hora já chegou... mas como disse ali em cima, vai depender do suporte do seu projeto.

As custom properties tem coisas bem legais como reatribuição de valores e escopo. No próximo link, o autor vai abordar tudo o que falei de forma resumida. It's Time To Start Using CSS Custom Properties

Padrões de desenvolvimento

Uma coisa que reparei logo no começo dos estudos foi que, a maioria dos artigos que eu encontrava com algum exemplo, as pessoas só estavam utilizado as variáveis dentro de :root, levando assim para um escopo global.

Gente, creio que nem tudo deve ser global, certo ?

E nesse monte de links, acabei encontrando esses três artigos maravilhosos que falam sobre usar ou não usar :root:

E esse aqui mostra alguns padrões com essa nova abordagem:

Patterns for Practical CSS Custom Properties Use

Bom, agora acho que chegamos no final da trilha :-)

Mão na massa

Eu criei um exemplo com tudo que aprendi para fixar melhor os conhecimentos e vou compartilhar com você.

Antes de começar quero te passar mais alguns links sobre alguns padrões que utilizei nesse código, caso não conheça eu recomendo dar uma olhada:

Código sem custom properties

Código com custom properties

Vou comentar algumas partes que acho importantes no código e que são alguns conceitos que estão nos links acima.

As variáveis globais

Declarei primeiro como variáveis de pré-processador para ficar mais fácil a manutenção, organização e escopo.

Com a ajuda da interpolação, nós conseguimos trazer uma dinâmica bem intressante para o código:

// GLOBAL VALUES IN SASS VARIABLES
$fontRoboto: "Roboto", sans-serif;
$fontVidaloka: "Vidaloka", serif;
$fontSizeMobile: 18px;
$fontSizeDesktop: 16px;
$colorBlue: #1c1b34;
$mediaMobile: 46.875rem;

:root {
  /* Global variables */

  --GL-FONT-ROBOTO: #{$fontRoboto}; // Estou usando aqui interpolação
  --GL-FONT-VIDALOKA: #{$fontVidaloka};
  --GL-FONT-SIZE: #{$fontSizeMobile};
  --GL-BLUE: #{$colorBlue};

  @media (min-width: $mediaMobile) {
    --GL-FONT-SIZE: #{$fontSizeDesktop};
  }

  font-size: var(--GL-FONT-SIZE);
}

O componente botão

Uma parte bem interessante do código é o do botão. Repara que, por conta das variáveis e dos padrões que estamos utilizando no código, basta declaramos as variáveis e sobrescrevê-las quando necessário para termos o resultado esperado. E olha só, estou declarando as variáveis antes da lógica, assim temos uma boa separação de conceitos e organização do código

/* Buttons */
.btn {
  --btn-bgColor: #cccccc;
  --btn-bdColor: transparent;
  --btn-color: #ffffff;
  --btn-transition: all ease-in 150ms;

  &:hover {
    --btn-bgColor: transparent;
    --btn-bdColor: #cccccc;
    --btn-color: #cccccc;
    --btn-transition: all ease-out 300ms;
  }
  // .btn--ok = Variação do botão
  &--ok {
    --btn-bgColor: var(--GL-BLUE);

    &:hover {
      --btn-bdColor: var(--GL-BLUE);
      --btn-color: var(--GL-BLUE);
    }
  }
  // .btn--no = Variação do botão
  &--no {
    --btn-bgColor: #f51711;

    &:hover {
      --btn-bdColor: #f51711;
      --btn-color: #f51711;
    }
  }

  background-color: var(--btn-bgColor);
  border: 0.125rem solid var(--btn-bdColor);
  border-radius: 0.313rem;
  color: var(--btn-color);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.625rem 1.25rem;
  transition: var(--btn-transition);
}

Segue o código final:

Links complementares

Espero que esse guia seja de grande ajuda para você como foi para mim e não deixa de entrar em contato quando tiver alguma dúvida ou sugestão ;-)

Abrcs!

Mixin e Functions SASS nos ajudam :-)

Luciano Baraúna — Fri, 14 Feb 2020 14:42:22 +0000

Olá pessoal 😉

Esse é o meu primeiro post da vida e queria compartilhar com vocês alguns mixins e funções que utilizo no meu dia a dia.

O objetivo desse post não é explicar como um "mixin" funciona ou uma função funcionam, pois já tem muita coisa na internet explicando o que esses amigos fazem, mas vou deixar um pequeno resumo a partir da documentação e o link para cada página que explica.

Lembrando que todos os códigos sass serão escritos em scss.

O que é um mixin

Os mixins permitem definir estilos que podem ser reutilizados em toda a folha de estilo. Eles facilitam evitar o uso de classes não-semânticas como .float-left e distribuir coleções de estilos nas bibliotecas.

Link da documentação: https://sass-lang.com/documentation/at-rules/mixin

O que é uma function

As funções permitem definir operações complexas nos valores do SassScript que você pode reutilizar em toda a folha de estilo. Eles facilitam abstrair fórmulas e comportamentos comuns de maneira legível.

Link da documentação: https://sass-lang.com/documentation/at-rules/function

PS: Seria bom você dar uma olhada na documentação para aproveitar e compreender melhor os códigos abaixos.

Mixins que utilizo:

Definir fonts:

Esse carinha aqui ajuda você a escrever suas declarações de fontes :-)

@mixin useFont(
  $fontName: '',
  $fontWeight: 400
) {
  $fallbackFonts: 'Arial, Helvetica, sans-serif';

  @if($fontName == 'Roboto'){
    $fontName: 'Roboto, #{$fallbackFonts}';
  }

  @if($fontName == 'Comic San') {
    $fontName: 'Comic Sans, #{$fallbackFonts}'
  }

  @if($fontName == '') {
    $fontName: $fallbackFonts;
  }

  font-family: "#{$fontName}";
  font-weight: $fontWeight;
}

.text {
  @include useFont('Roboto');
}

Código compilado:

.text {
  font-family: "Roboto, Arial, Helvetica, sans-serif";
  font-weight: 400;
}

Media queries

Esse carinha aqui ajuda você a escrever suas declarações de media queries :-)

@mixin media($typeMedia, $width: ''){
  @if ($typeMedia == 'min' or $typeMedia == 'max') {
    @media screen and ('#{$typeMedia}-width': $width){
      @content;
    }
  }

  @if ($typeMedia == 'print') {
    @media print {
      @content;
    }
  }
}

Código compilado:

@media screen and (min-width: 992px) {
  .container {
    cor: red;
  }
}
@media print {
  .container {
    cor: black;
  }
}

Converter px para rem

Encontrei esse achado nesse maravilho site e segue o link no css tricks para vocês entenderem melhor o que está acontencendo aqui.

@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

p {
  @include font-size(13);
}

Código compilado:

p {
  font-size: 130px;
  font-size: 13rem;
}

Funções que utilizo:

A variável $lista-valores é um valor de mapa. Caso você não conheça dá uma olhada nesse link: https://sass-lang.com/documentation/values/maps.

A maioria desses grandes frameworks utilizam essa técnica para
organizarem seus arquivos de configurações.

Pegar valores de um mapa de configuração.

@function getprops-map($obj, $prop-first, $prop-deep:null) {
  @if($prop-deep != null) {
    // Pegando o segundo nível
    @return map-get(map-get($obj, $prop-first), $prop-deep);
  }
  // Pegando o primeiro nível
  @return map-get($obj, $prop-first);
}

$lista-valores: (
  cor: 'red',
  tamanho: (
    sm: 576px
  ),
  background: (
    info: blue,
  )
);

.container {
  color: getprops-map($lista-valores, cor);
  width: getprops-map($lista-valores, tamanho, sm);
  background: getprops-map($lista-valores, background, info);
}

Código compilado:

.container {
  color: "red";
  width: 576px;
  background: blue;
}

Converter uma lista de valores de px para rem.

@function strip-unit($num) {
  @return $num / ($num * 0 + 1);
}

@mixin rem-fallback($property, $values...) {
  $max: length($values);
  $pxValues: '';
  $remValues: '';

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value*16}px;

    @if $i < $max {
      $pxValues: #{$pxValues + " "};
    }
  }

  @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
      $remValues: #{$remValues + " "};
    }
  }

  #{$property}: $pxValues;
  #{$property}: $remValues;
}

body {
    @include rem-fallback(margin, 10, 20, 30, 40);
}

Código compilado:

body {
  margin: 160px 320px 480px 640px;
  margin: 10rem 20rem 30rem 40rem;
}

Bem, como eu disse, esse foi o meu primeiro post de blog da vida e não podia deixar de falar logo de cara sobre css, que é a minha paixão 🥰.

Espero que tenham gostado do conteúdo e aproveitem ele 😊