{"componentChunkName":"component---src-templates-single-template-tsx","path":"/sass-parte-4-funcoes","result":{"data":{"site":{"siteMetadata":{"siteUrl":"https://blog.nandomoreira.dev","author":{"name":"Fernando Moreira","site":"https://nandomoreira.dev","social":{"disqus":"fernandomoreira"}}}},"markdownRemark":{"html":"

Esse artigo será bem rápido, vou falar sobre o recurso que deixa o SASS ainda mais com cara de linguagem de programação, são as funções.

\n

Eu comentei no artigo anterior que \"Mixins são como funções que retornam um bloco inteiro de CSS\", esse recurso fica ainda mais completo se somado com funções.

\n

Vamos fazer um exemplo clássico, somar a + b.

\n
@function soma($a, $b: 0) {\n  $c: $a + $b;\n  @return $c;\n}\n\n.card {\n  width: soma(500px, 200);\n}
\n

O exemplo acima vai me retornar o valor da soma do primeiro parâmetro com a do segundo, resultando em 700px de largura para a classe .card. Simples não é mesmo?

\n

E o que aconteceria se eu aplicasse somente o primeiro parâmetro?

\n
.card {\n  width: soma(500px);\n}
\n

Isso mesmo que você pensou! O resultado seria apenas de 500px pois a variável $b está com valor inicial de zero.

\n

Conclusão

\n

Se você precisar resolver alguma conta ou converter algum número, provavelmente você irá usar funções, caso contrário use Mixins.

\n

Eu particularmente não uso muitas funções, tenho apenas algumas em meu arcenal, posso até listar elas aqui para vocês.

\n
// Converte numeros para inteiro\n//\n@function parseInt($n) {\n  @return $n / ($n * 0 + 1);\n}\n\n// remove a unidade deixando apenas o numero\n// strip-unit(10px) retorna apenas o numero 10\n//\n@function strip-unit($number) {\n  @if type-of($number) == 'number' and not unitless($number) {\n    @return $number / ($number * 0 + 1);\n  }\n\n  @return $number;\n}\n\n// Converte unidades px para em\n//\n$font-size-base: 16px;\n\n@function em($pixels, $context: $font-size-base) {\n  @if (unitless($pixels)) {\n    $pixels: $pixels * 1px;\n  }\n\n  @if (unitless($context)) {\n    $context: $context * 1px;\n  }\n\n  @return $pixels / $context * 1em;\n}
\n

É isso ai moçada, se tiverem alguma dúvida comentem ai que reponderei em \"dois palitos\".

\n

Abraço!

\n
\n
    \n
  1. Conhecendo o pré-processador SASS - Instalação
    2. \n
  2. Conhecendo o pré-processador SASS - Variáveis
    3. \n
  3. Conhecendo o pré processador SASS - Mixins
    4. \n
  4. Conhecendo o pré processador SASS - Funções
    5. \n
  5. Conhecendo o pré-processador SASS - Placeholder
    6. \n
","excerpt":"Esse artigo será bem rápido, vou falar sobre o recurso que deixa o SASS ainda mais com cara de linguagem de programação, são as funções. Eu comentei…","timeToRead":2,"frontmatter":{"category":["sass"],"date":"há 11 anos","datePublished":"2015-09-05T00:00:00.000Z","description":"Conhecendo o pré-processador SASS-Parte 4","path":"/sass-parte-4-funcoes","tags":["sass","css","pre-processador"],"title":"#4 - Conhecendo o pré processador SASS | Funções","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":340}}}},"pageContext":{}}}