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 😊
Top comments (0)