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 😊

Blog

Mixin e Functions SASS nos ajudam :-)

Luciano Baraúna

O que é um mixin

O que é uma function

Mixins que utilizo:

Definir fonts:

Media queries

Converter px para rem

Funções que utilizo:

Pegar valores de um mapa de configuração.

Converter uma lista de valores de px para rem.

Join Our Newsletter. No Spam, Only the good stuff.

Related