learnxinyminutes-docs/sass-pt.html.markdown at 04694a00e54272799e50ef8570ddef70a1fd5779

Sass é uma linguagem de extensão CSS que adiciona recursos, como variáveis, aninhamento, mixins e muito mais. Sass (e outros pré-processadores, como Less) ajudam os desenvolvedores a escrever código de fácil manutenção e DRY (Do not Repeat Yourself).

Sass tem duas opções de sintaxe diferentes para escolher. SCSS, que tem a mesma sintaxe de CSS, mas com os recursos adicionais de Sass. Ou Sass (a sintaxe original), que usa o recuo, em vez de chaves e ponto e vírgula. Este tutorial é escrito usando SCSS.

Se você já está familiarizado com CSS3, você será capaz de pegar Sass de forma relativamente rápida. Ele não fornece quaisquer novas opções de estilo, mas sim as ferramentas para escrever sua CSS de forma mais eficiente e fazer a manutenção mais fácilmente.



// Comentários de linha única são removidos quando Sass é compilado para CSS.

/* Comentários multi-line são preservados. */



/*Variáveis
==============================*/



/* É possível armazenar um valor CSS (tais como a cor) de uma variável.
Use o símbolo "$" para criar uma variável. */

$primary-color: #A3A4FF;
$secondary-color: #51527F;
$body-font: 'Roboto', sans-serif;

/* Você pode usar as variáveis em toda a sua folha de estilo.
Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */

body {
	background-color: $primary-color;
	color: $secondary-color;
	font-family: $body-font;
}

/* Quando compilar ficaria assim: */
body {
	background-color: #A3A4FF;
	color: #51527F;
	font-family: 'Roboto', sans-serif;
}


/ * Este é muito mais fácil de manter do que ter de mudar a cor
cada vez que aparece em toda a sua folha de estilo. * /




/*Mixins
==============================*/



/* Se você achar que você está escrevendo o mesmo código para mais de um
elemento, você pode querer armazenar esse código em um mixin.

Use a diretiva '@mixin', além de um nome para o seu mixin. */

@mixin center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

/* Você pode usar o mixin com '@include' e o nome mixin. */

div {
	@include center;
	background-color: $primary-color;
}

/* Apoś compilar ficaria assim: */
div {
	display: block;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	background-color: #A3A4FF;
}


/* Você pode usar mixins para criar uma propriedade estenográfica. */

@mixin size($width, $height) {
	width: $width;
	height: $height;
}

/* O que você pode invocar passando argumentos de largura e altura. */

.rectangle {
	@include size(100px, 60px);
}

.square {
	@include size(40px, 40px);
}

/* Isso compilado ficará assim: */
.rectangle {
  width: 100px;
  height: 60px;
}

.square {
  width: 40px;
  height: 40px;
}



/*Funções
==============================*/



/* Sass fornece funções que podem ser utilizados para realizar uma variedade de
    tarefas. Considere o seguinte */

/* Funções pode ser chamado usando seu nome e passando o
    argumentos necessários */
body {
  width: round(10.25px);
}

.footer {
  background-color: fade_out(#000000, 0.25)
}

/* Compiles to: */

body {
  width: 10px;
}

.footer {
  background-color: rgba(0, 0, 0, 0.75);
}

/* You may also define your own functions. Functions are very similar to
   mixins. When trying to choose between a function or a mixin, remember
   that mixins are best for generating CSS while functions are better for
   logic that might be used throughout your Sass code. The examples in
   the Math Operators' section are ideal candidates for becoming a reusable
   function. */

/* This function will take a target size and the parent size and calculate
   and return the percentage */

/* Você também pode definir suas próprias funções. As funções são muito semelhantes aos
   mixins. Ao tentar escolher entre uma função ou um mixin, lembre-
   que mixins são os melhores para gerar CSS enquanto as funções são melhores para
   lógica que pode ser usado em todo o seu código Sass. Os exemplos
   seção Operadores Math 'são candidatos ideais para se tornar um reutilizável
   função. */

/* Esta função terá um tamanho de destino eo tamanho do pai e calcular
   e voltar a percentagem */

@function calculate-percentage($target-size, $parent-size) {
  @return $target-size / $parent-size * 100%;
}

$main-content: calculate-percentage(600px, 960px);

.main-content {
  width: $main-content;
}

.sidebar {
  width: calculate-percentage(300px, 960px);
}

/* Compila para: */

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}



/* Extend (Herança)
============================== */



/*Extend é uma maneira de compartilhar as propriedades de um seletor com outro. */

.display {
	@include size(5em, 5em);
	border: 5px solid $secondary-color;
}

.display-success {
	@extend .display;
	border-color: #22df56;
}

/* Compiles to: */
.display, .display-success {
  width: 5em;
  height: 5em;
  border: 5px solid #51527F;
}

.display-success {
  border-color: #22df56;
}

/* Ampliando uma declaração CSS é preferível a criação de um mixin
   por causa da maneira agrupa as classes que todos compartilham
   o mesmo estilo base. Se isso for feito com um mixin, a largura,
   altura, e a borda seria duplicado para cada instrução que
   o chamado mixin. Enquanto isso não irá afetar o seu fluxo de trabalho, será
   adicionar inchaço desnecessário para os arquivos criados pelo compilador Sass. */



/*Assentamento
==============================*/



/ * Sass permite seletores ninhos dentro seletores * /

ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: #FF0000;
	}
}

/* '&' será substituído pelo selector pai. */
/* Você também pode aninhar pseudo-classes. */
/* Tenha em mente que o excesso de nidificação vai fazer seu código menos sustentável.
Essas práticas também recomendam não vai mais de 3 níveis de profundidade quando nidificação.
Por exemplo: */


ul {
	list-style-type: none;
	margin-top: 2em;

	li {
		background-color: red;

		&:hover {
		  background-color: blue;
		}

		a {
		  color: white;
		}
	}
}

/* Compila para: */

ul {
  list-style-type: none;
  margin-top: 2em;
}

ul li {
  background-color: red;
}

ul li:hover {
  background-color: blue;
}

ul li a {
  color: white;
}



/*Parciais e Importações
==============================*/


/* Sass permite criar arquivos parciais. Isso pode ajudar a manter seu Sass
   código modularizado. Arquivos parciais deve começar com um '_', por exemplo, _reset.css.
   Parciais não são geradas em CSS. */



/* Considere o seguinte CSS que nós vamos colocar em um arquivo chamado _reset.css */

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

/* Sass offers @import which can be used to import partials into a file.
   This differs from the traditional CSS @import statement which makes
   another HTTP request to fetch the imported file. Sass takes the
   imported file and combines it with the compiled code. */

/* Sass oferece @import que pode ser usado para importar parciais em um arquivo.
   Isso difere da declaração CSS @import tradicional, que faz
   outra solicitação HTTP para buscar o arquivo importado. Sass converte os
   importadas arquivo e combina com o código compilado. */

@import 'reset';

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}

/* Compiles to: */

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font-size: 16px;
  font-family: Helvetica, Arial, Sans-serif;
}



/*Placeholder Selectors
==============================*/  



/* Placeholders are useful when creating a CSS statement to extend. If you
   wanted to create a CSS statement that was exclusively used with @extend,
   you can do so using a placeholder. Placeholders begin with a '%' instead
   of '.' or '#'. Placeholders will not appear in the compiled CSS. */

/* Os espaços reservados são úteis na criação de uma declaração CSS para ampliar. Se você
   queria criar uma instrução CSS que foi usado exclusivamente com @extend,
   Você pode fazer isso usando um espaço reservado. Espaços reservados começar com um '%' em vez
   de '.' ou '#'. Espaços reservados não aparece no CSS compilado. * /

%content-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  @extend %content-window;
  background-color: #0000ff;
}

/* Compilado para: */

.message-window {
  font-size: 14px;
  padding: 10px;
  color: #000;
  border-radius: 4px;
}

.message-window {
  background-color: #0000ff;
}



/*Operações Math
============================== * /


/* Sass provides the following operators: +, -, *, /, and %. These can
   be useful for calculating values directly in your Sass files instead
   of using values that you've already calculated by hand. Below is an example
   of a setting up a simple two column design. */

/* Sass fornece os seguintes operadores: +, -, *, /, e %. estes podem
   ser úteis para calcular os valores diretamente no seu Sass arquivos em vez
   de usar valores que você já calculados pela mão. Abaixo está um exemplo
   de uma criação de um projeto simples de duas colunas. * /

$content-area: 960px;
$main-content: 600px;
$sidebar-content: 300px;

$main-size: $main-content / $content-area * 100%;
$sidebar-size: $sidebar-content / $content-area * 100%;
$gutter: 100% - ($main-size + $sidebar-size);

body {
  width: 100%;
}

.main-content {
  width: $main-size;
}

.sidebar {
  width: $sidebar-size;
}

.gutter {
  width: $gutter;
}

/* Compiles to: */

body {
  width: 100%;
}

.main-content {
  width: 62.5%;
}

.sidebar {
  width: 31.25%;
}

.gutter {
  width: 6.25%;
}

SASS ou Sass?

Alguma vez você já se perguntou se Sass é um acrônimo ou não? Você provavelmente não tem, mas vou dizer-lhe de qualquer maneira. O nome do idioma é uma palavra, "Sass", e não uma sigla. Porque as pessoas estavam constantemente a escrevê-lo como "SASS", o criador da linguagem de brincadeira chamou de "StyleSheets Sintaticamente Incríveis".

Prática Sass

Se você quiser jogar com Sass em seu navegador, vá para SassMeister. Você pode usar uma sintaxe, basta ir para as configurações e selecionar Sass ou SCSS.

Compatibilidade

Sass pode ser usado em qualquer projeto, desde que você tenha um programa para compilá-lo em CSS. Você vai querer verificar se o CSS que você está usando é compatível com os seus navegadores de destino.

QuirksMode CSS e CanIUse são ótimos recursos para verificação de compatibilidade.

Leitura

Official Documentation
The Sass Way fornece tutoriais (iniciante avançados) e artigos.

11 KiB Raw Blame History

SASS ou Sass?

Prática Sass

Compatibilidade

Leitura

11 KiB

Raw Blame History