29 coisas sobre SASS que aprendi com o freeCodeCamp

tl;dr: Finalmente aprendi um pouco (ou tudo) sobre SASS, achei várias das funcionalidades interessantes, como por exemplo, variáveis em CSS, apesar de que isso já pode ser utilizado diretamente na linguagem.

A ideia também de ter ifs, fors, each e etc é bacana, mas até agora não consigo pensar no que usaria esses condicionais no CSS.

Ou seja, das funcionalidades do SASS o mais interessante acaba sendo poder aninhar as várias declarações CSS.

---

SASS: O que significa SASS?

Syntactically Awesome StyleSheets

SASS: O que significa SCSS?

Sassy CSS

SASS: Como se cria uma variável?

Se adiciona $ antes do nome da variável.

SASS: Declare a variável cor-de-texto.

$cor-de-texto

SASS: as regras de CSS podem ser aninhadas no SASS?

Sim.

SASS: O que é um mixin?

É um grupo de declarações CSS que pode ser reusado.

SASS: Como se declara um mixin “border-radius” que recebe o parâmetro “radius“?

@mixin border-radius($radius) {}

SASS: Como se utiliza o mixin “border-radius” com o parâmetro de “15px“?

@include border-radius(15px);

SASS: Como se faz um “se”?

@if

SASS: Como se faz um “senão se”?

@else if

SASS: Como se faz um “senão”?

@else

SASS: Como se compara se “val” é igual a “medium”?

@if $val == medium

SASS: Como se faz um “for”?

@for

SASS: @for $i from 1 through 5 itera até?

5

SASS: @for $i from 1 to 5 itera até?

4

SASS: Como se itera por itens de uma lista?

@each

SASS: Dentro de um loop (for ou each) como se usa a variável “color”

#{$color}

SASS: Como se itera pelas cores “blue, red, white” com um “each”?

@each $color in blue, red, white {}

SASS: Como se faz um “enquanto”?

@while

SASS: O que é uma partial?

É um arquivo SASS que contêm pedaços de código CSS.

SASS: Os nomes das partial começam com?

_ (underscore)

SASS: Para importar uma partial se usa?

@import

SASS: Como se importa a partial chamada “_variables.scss”?

@import 'variables'

SASS: É necessário adicionar o _ do nome da partial no @import?

Não.

SASS: Como se extende uma regra CSS da classe .info?

@extend .info

SASS: Como se compila um arquivo “input.scss” para um arquivo “output.css”?

sass input.scss output.css

SASS: Como se observa um arquivo por mudanças?

sass --watch

SASS: Como se observa a pasta “app/sass” e salva as mudanças em “public/stylesheets”?

sass --watch app/sass:public/stylesheets

SASS: Como se seleciona o elemento pai?

&