Introdução ao Sass para Novos Designers de Temas WordPress

Como um novo designer de temas WordPress, você rapidamente aprende os desafios de manter arquivos CSS longos, mantendo-os organizados, escaláveis e legíveis.

Muitos designers e desenvolvedores front-end, incluindo os aqui do WPBeginner, recomendam o uso de uma linguagem de pré-processamento CSS como Sass ou LESS para facilitar o trabalho. Mas o que são esses pré-processadores? E como começar com eles?

Este artigo é uma introdução ao Sass para novos designers de temas WordPress. Vamos explicar o que é um pré-processador CSS, por que você precisa dele e como instalá-lo e começar a usá-lo imediatamente.

O que é Sass (Syntactically Awesome Stylesheet)?

O CSS que usamos foi projetado para ser uma linguagem de folha de estilo fácil de usar. No entanto, a web evoluiu, e os designers precisam ter uma linguagem de folha de estilo que lhes permita fazer mais com menos esforço e tempo.

Linguagens de pré-processamento CSS, como Sass, permitem que você use recursos que não estão atualmente disponíveis no CSS, como variáveis, operadores matemáticos básicos, aninhamento, mixins, etc.

É muito parecido com PHP, que é uma linguagem de pré-processamento que executa um script no servidor e gera uma saída HTML. Da mesma forma, Sass pré-processa arquivos .scss para gerar arquivos CSS que podem ser usados pelos navegadores.

Desde a versão 3.8, os estilos da área administrativa do WordPress foram portados para utilizar Sass para desenvolvimento. Existem muitas lojas de temas WordPress e desenvolvedores já utilizando Sass para acelerar seu processo de desenvolvimento.

Primeiros Passos com Sass para Desenvolvimento de Temas WordPress

A maioria dos designers de temas usa um ambiente de desenvolvimento local para trabalhar em seus temas antes de implantá-los em um ambiente de staging ou em um servidor ativo. Como Sass é uma linguagem de pré-processamento, você precisará instalá-lo em seu ambiente de desenvolvimento local.

A primeira coisa que você precisa fazer é instalar o Sass. Ele pode ser usado como uma ferramenta de linha de comando, mas também existem alguns aplicativos GUI agradáveis disponíveis para Sass. Recomendamos o uso do Koala, que é um aplicativo gratuito de código aberto disponível para Mac, Windows e Linux.

Para os propósitos deste artigo, você precisará criar um tema em branco. Simplesmente crie uma nova pasta em /wp-content/themes/. Você pode nomeá-la 'mytheme' ou qualquer outro nome que desejar. Dentro da pasta do seu tema em branco, crie outra pasta e nomeie-a stylesheets.

Na pasta stylesheets, você precisa criar um arquivo style.scss usando um editor de texto como o Bloco de Notas.

Agora você precisa abrir o Koala e clicar no ícone de mais para adicionar um novo projeto. Em seguida, localize o diretório do seu tema e adicione-o como seu projeto. Você notará que o Koala encontrará automaticamente o arquivo Sass no seu diretório de stylesheets e o exibirá.

Clique com o botão direito no seu arquivo Sass e selecione a opção Definir Caminho de Saída. Agora selecione a raiz do diretório do seu tema, exemplo, /wp-content/themes/mytheme/ e pressione Enter. O Koala agora gerará o arquivo de saída CSS no diretório do seu tema.

Para testar isso, você precisa abrir seu arquivo Sass style.scss em um editor de texto como o Bloco de Notas e adicionar este código:

$fonts: arial, verdana, sans-serif; 
body { 
font-family:$fonts;
} 

Agora você precisa salvar suas alterações e voltar para o Koala. Clique com o botão direito no seu arquivo Sass, e a barra lateral deslizará para a direita. Para compilar seu arquivo Sass, simplesmente clique no botão ‘Compilar’.

Você pode ver os resultados abrindo o arquivo style.css no diretório do seu tema, e ele terá o CSS processado como este:

body {
  font-family: arial, verdana, sans-serif; }

Observe que definimos uma variável $fonts em nosso arquivo Sass. Agora, sempre que precisarmos adicionar uma família de fontes, não precisaremos digitar novamente os nomes de todas as fontes. Podemos simplesmente usar $fonts.

Que Outros Superpoderes o Sass Traz para o CSS?

Sass é incrivelmente poderoso, retrocompatível e super fácil de aprender. Como mencionamos anteriormente, você pode criar variáveis, aninhamento, mixins, importação, partições, operadores matemáticos e lógicos, etc.

Agora mostraremos alguns exemplos, e você pode experimentá-los em seu tema WordPress.

Gerenciando Múltiplos Arquivos de Estilo

Um problema comum que você enfrentará como designer de temas WordPress são grandes arquivos de estilo com muitas seções. Você provavelmente ficará rolando para cima e para baixo para corrigir coisas enquanto trabalha em seu tema.

Usando Sass, você pode importar vários arquivos em seu arquivo de estilo principal e gerar um único arquivo CSS para o seu tema.

E quanto ao @import do CSS?

O problema de usar @import em seu arquivo CSS é que cada vez que você adiciona um @import, seu arquivo CSS faz outra requisição HTTP ao servidor. Isso afeta o tempo de carregamento da sua página, o que não é bom para o seu projeto.

Por outro lado, quando você usa @import no Sass, ele incluirá os arquivos em seu arquivo Sass e os servirá todos em um único arquivo CSS para os navegadores.

Para aprender como usar @import no Sass, primeiro você precisa criar um arquivo reset.scss no diretório de estilos do seu tema e colar este código nele.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Agora você precisa abrir seu arquivo principal style.scss e adicionar esta linha onde você deseja que o arquivo de reset seja importado:

@import 'reset';

Observe que você não precisa inserir o nome completo do arquivo. Para compilar isso, você precisa abrir o Koala e clicar no botão de compilar novamente. Agora abra o arquivo principal style.css do seu tema, e você verá seu reset CSS incluído nele.

Aninhamento no Sass

Ao contrário do HTML, CSS não é uma linguagem aninhada. Sass permite que você crie arquivos aninhados que são fáceis de gerenciar e trabalhar. Por exemplo, você pode aninhar todos os elementos para a seção <article>, sob o seletor de artigo.

Como designer de temas WordPress, isso permite que você trabalhe em diferentes seções e estilize cada elemento facilmente. Para ver o aninhamento em ação, adicione isto ao seu arquivo style.scss:

.entry-content { 
p { 
font-size:12px;
line-height:150%;  
} 
ul { 
line-height:150%; 
}
a:link, a:visited, a:active { 
text-decoration:none;
color: #ff6633;
} 
} 

Após o processamento, ele gerará o seguinte CSS:

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 150%; }
.entry-content a:link, .entry-content a:visited, .entry-content a:active {
  text-decoration: none;
  color: #ff6633; }

Como designer de temas, você estará projetando um visual e uma sensação diferentes para widgets, posts, menus de navegação, cabeçalho, etc. Usar aninhamento em Sass o torna bem estruturado, e você não precisa escrever as mesmas classes, seletores e identificadores repetidamente.

Usando Mixins em Sass

Às vezes, você precisará reutilizar algum CSS em todo o seu projeto, mesmo que as regras de estilo sejam as mesmas, porque você as usará em diferentes seletores e classes. É aqui que os mixins são úteis. Vamos adicionar um mixin ao seu arquivo style.scss:

@mixin hide-text{
    overflow:hidden;
    text-indent:-9000px;
    display:block;
}

Este mixin basicamente oculta algum texto de ser exibido. Aqui está um exemplo de como você pode usar este mixin para ocultar texto para o seu logo:

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Observe que você precisa usar @include para adicionar um mixin. Após o processamento, ele gerará o seguinte CSS:

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Mixins também são muito úteis com prefixos de fornecedor. Ao adicionar valores de opacidade ou raio de borda, usando mixins você pode economizar muito tempo. Veja este exemplo, onde adicionamos um mixin para adicionar raio de borda.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
       -o-border-radius: $radius;
          border-radius: $radius;
}
 
.largebutton { @include border-radius(10px); }
.smallbutton { @include border-radius(5px); }

Após a compilação, ele gerará o seguinte CSS:

.largebutton {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px; }
 
.smallbutton {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px; }

Recursos Adicionais

Sass Lang
The Sass Way

Esperamos que este artigo tenha ajudado você a aprender sobre Sass para o desenvolvimento de temas WordPress. Muitos designers de temas WordPress já o utilizam. Alguns chegam a dizer que no futuro todo o CSS será pré-processado, e os desenvolvedores de temas WordPress precisam aprimorar suas habilidades. Você também pode querer ver nosso guia sobre dicas de classe de corpo do WordPress para designers de temas, ou nossas escolhas de especialistas dos melhores construtores de páginas WordPress drag and drop.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.