Mixin e Functions SASS nos ajudam :-)
Tags: css, saas, frontend
Published: 2020-02-14 14:42:22

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](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 :-)

```scss
@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:
```css
.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 :-)

```scss
@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:
```css
@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](https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/) para vocês entenderem melhor o que está acontencendo aqui.
```scss
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}

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

```

Código compilado:
```css
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](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.
```scss
@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:
```css
.container {
  color: "red";
  width: 576px;
  background: blue;
}
```
### Converter uma lista de valores de px para rem.

```scss
@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:
```css
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 😊