Iniciando no Sass com os dois pés na porta

주의: 저는 앞으로 이 글을 영어로 번역할 수 있습니다. 그때까지 브라질 포르투갈어 사용자가 아니라면 이 테스트를 직접 번역할 수 있습니다with this extension.
Esse textoépra vocêque sente que tátodo mundo ao seu redor usando Sass menos você
Geralmente quem quer começar a aprender Sass se mete com as seguintes perguntas:

뭐가 다르죠?

Sasséa linguagem,éum CSS estendido,em sua forma originaléescrito com aninhamentos identidos igualzinho ao HTML,o que torna mais tanquiro escrever relaçes de elementos pais com os filhos.Jáo Scsséuma sintaxe dessa linguagem queémuito parecida com CSS.Ambas linguagens estendem as funões do CSS e são pré-processadas e transformadas em CSS antes de ir pro navegador.A grande maioria das vezes que vocêouvir sobre Sass subentenda que A sintaxe utilizadaéScss,éA mais popular.

Pré-processamento？

O préprocessamentoéuma rotina que traduz seu código Sass pra CSS.Pode ser feito com Gulp,Grunt,Webpack entre n outros,o que Pode ser uma barreira pra algumas pessoas que querem aprender Sass mas sentem dificuldade com esses automatizadores.gente vai mastigar essa Deficuldade usando Live Sass 컴파일러-uma extens ão do VSCode.

Processando Sass com Live Sass 컴파일러

Primeiro baixe a extensãoLive Sass Compiler no Marketplace do VSCode
A extensão vai procurar todos os arquivos de Sass e criar um CSS normal e um minificadoápartir deles na mesma pasta.Caso queira configurar qual pasta vocêdeseja que os arquivos finais sejam salvos,basta ir nas configuraçes da extensãe acessar o settings.json dela.

Ai basta adicionar essa seço de código ao documento(ou alterar caso ela exista).Nessa se231;o vocèdefine o formato do código-seéexpandido ou minificado-qual o nome das extensões de cada um e qual local vocèquer salvar.Eu deixo a opçogenerateMapcomo false porque o map a gente não utiliza.

"liveSassCompile.settings.formats":[ 
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "app/css"
    },
    {
        "format": "compressed",
        "extensionName": ".min.css",
        "savePath": "app/css"
    },
  ],
  "liveSassCompile.settings.generateMap": false,

Caso vocêtenha mais de um arquivo,vocêpode editar as configuraçes pra desconsiderar os arquivos dentro de alguns diretórios:

"liveSassCompile.settings.excludeList": [

    "**/node_modules/**",
    ".vscode/**",

    //adicione sua pasta aqui!!
    "**/exemplo/**" 
  ],

O이상적인casovocêdivida는folhasdeestiloporcomponentes로서,crieumafolhadeestiloprincipaledentrodelavocêimportetodas는suasfolhasdeestilo로,dessaformavocêsóprecisacompilerumúnicoarquivo입니다.
Dentro do main.scss

@import './components/button.scss';
@import './components/reset.scss';
@import './components/variables.scss';

Quer fazer na unha?RecoEndoesse artigo que ensina a compilar Sass com Gulp.

에스트루툴라 드 아쿠보스

Caso o tamanho do seu código justique,éimportant criarmos uma separaão responsibilidades dentro das folhas de estilo para que o código fique mais fácil de manter e corrigir.
Existe um padr ão de estrutura de Sassem projetos chamado 7 x 1 n ão é alemãque separa os elementos em 7 pastas differentes que ão importadas pra dentro de um arquivo base, 하나의 estrutura fica assim:

sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

Para entender melhor como functiona essa pattern leiaessa documentação.

Variáveis Sass x Variáveis CSS

수출 algumas diferen as entre as vari á veis CSS:

Variáveis Sassão estáticas

A variável Sass após compileada vira um valor estático,jáA do CSS continua uma variável,podendo ser editada na web usando do developer tools do navegador e também acessada usando javascript.

Variáveis CSS não functionam como par–metros de media querys

@media screen and (max-width: var(--small-screen)) {
  /* Vai dar pau */
}

@media screen and (max-width: $small-screen) {
  /* Vai funfar :) */
}

Vocèn ão pode usar variá veis de CSS dentro dos@media 조회,mas Vocè pode usar variá veis Sass.Issoútil quando vocêquer predefinir em variáveis os seus breakpoints ou colocar valores din–micos neles.

Variáveis Sass não são escopadas pelos elementos do DOM DOM

:root {
 --font-size: 3em;
}

@media screen and (max-width: 432px) {
/* No viewport com 432px de largura o font-size vai ser de 2em */
  --font-size: 2em;
}

CSS는 variá veis ão escopadas dentro dos seletores e herdas pelos seletores filhos, já as variá veis Sass não possuem escopo, pois como são pré-processadas antes de chegar No browser, elas não acessam o DOM으로 없습니다.A sintaxe e utilizaão das duas são parecidas:

//CSS
--btn-color: #CD4445;

//Sass
$btn-color : #CD4445;

Uma implementaão interestsante desses escoposécriar temas de cores e implementationá-los dentro de diferentes seletores:

:root {
  --primary: #34CED1;
  --secondary: #FCFAF7;
  --success: #505155; 
}

.dark-theme {
  --primary: #FCFAF7;
  --secondary: #505155;
  --success: #34CED1; 
}

Para implementar basta inserir a classe.dark-themeno body do documento,como o seletor de classe tem specificidade maior que a do seletor:root,os estilos do tema vão sobrepor os de base:

<body class="dark-theme">
  <!-- As variáveis dentro dessa classe serão herdadas
  por todos os elementos do body! -->
</body> 

Vocêpode usar Sass pra mais do que escrever CSS aninhado

Eu vejo muita gente UTILITIZANDO Sass apenas pra escrever CSS chique,e Eu não julgo Eu julgo sim,masépossível fazer muito melhor do que isso,principalmente se vocêescreve usando algum padrão de CSS como BEM ou smacksépossível anihar elementos dentro dos seus respectivos blocos de maneira muito va.Olha o Examplo de um botão feito com Sass x CSS gerado.
👉 회사 명

.btn{
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;
  &--red {
    background-color: #F02947;
    &:hover {
      background-color: #D63C53;
    }
  }
}

👉 CSS

.btn {
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;
}

.btn--red {
  background-color: #F02947;
}

.btn--red:hover {
  background-color: #D63C53;
}

Dentro do Sass podemos usar o caractere ampersand(e commercial&)para concatenar os nomes dos seletores,assim podemos agrupar os blocos de maneira mais lógica.이상적인 també mé separarmos o có digo por bloco e criar aninhamentos dentro de cada bloco, isso evita que fa çamos aninhamentos extremente complexos comoesse aqui:

body{
  /*...*/
  nav{
    /*...*/
    ul{
      /*...*/
      li{
        /*...*/
        a{
          /*Imagina o CSS disso aqui*/
        }
      }
    }
  }
}

O idealéque O aninhamento tenha no máximo 3 níveis,caso vocêprecise usar mais que isso,éinterestsante utilizar a at rule@at-root.Isso faz com que o seletor utilizado seja compilado na raiz do documento e não aninhado no código,tornando CSS mais legível.Vocêpode ler mais sobre o@at rootnessa documentação.
Pra quem quiser saber mais sobre BEM,recomendoesse artigo do Julio Lozovei.

Utilizando 맵, 목록 e 순환

Claro que vocêpode aninhar dentro de.btnos modificadores--red, --blue, --green,cada um com seu reserveivo:hover,mas tem um jeito muitíssimo mais prático de fazer isso-utilizando os maps.Vocêtalvez conheça o map como Hash ou Objeto,um map recebe uma chave e um valor dentro de si.Épossível também guardar mais elementos utilizando uma notaço de lista.
👉 지도.

$font-weights: (
 "regular": 400,
 "medium": 500,
 "bold": 700,
);

👉 회사 명

$buttons: (
 "regular"   $primary $white,
 "danger"    $danger  $white,
 "success"   $success $white,
 "secondary" $white   $darkgrey
);

Dentro da lista$buttons,temos uma string com o nome do botão,a cor do plano de fundo e a cor da fonte,dessa forma podemos utilizar dessa lista para criar os differentes botões utilizando um loop@each,que functiona de maneira bem parecida com o for in ou o for each de algumas linguagens de programaão.
Essa funço abaixo diz que para cada elemento da lista$buttons,ele vai fazer uma determinada aço.Nesse caso a nossa lista tem grupos de três elementos separados por vírgula.Dentro do@eachdefinimos uma variável pra cada elemento de um grupo da lista,assim,a cada iteraão que o@eachfizer em um grupo,essas variáveis vão assumir valores diferentes.Lembra que dentro de.btnaninhamos seus modificadores com cada uma de suas cores?podemos fazer a mesma coisa dentro do@each,sóque ao concatenar seletores com variáveis,utilizamos a notaço#{ }e passamos dentro dela o nome da variável,no caso$name.

$buttons: (
 "regular"   $primary $white,
 "danger"    $danger  $white,
 "success"   $success $white,
 "secondary" $white   $darkgrey
);

.btn{
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;

  @each $name, $bg, $color in $buttons {
    &__#{$name} {
       /*... código */
    }
  }
}

Dentro desse seletor podemos colocar a variável$bgcomobackground-colore$colorcomo 색상.possível também aninhar com o pseudo classe:hovere passar uma cor mais escura utilizando a uma funão de cor do Scss chamada darken.짙은 색 recebe dois par – metros - 한variável ou valor da cor e a porcentagem que se deve escurecer a cor.

$buttons: (
 "regular"   $primary $white,
 "danger"    $danger  $white,
 "success"   $success $white,
 "secondary" $white   $darkgrey
);

.btn{
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;

  @each $name, $bg, $color in $buttons {
    &__#{$name} {
      background-color: $bg;
      color: $color;
      &:hover {
        background-color: darken($bg, 10%);
      }
    }
  }
}

Ao usar as funões de cor nativas do Sass vocènèo precisa manualmente declarator os níveis de brilho das suas cores padrèo.Pra conhecer todas as funões de cor vocèpode olharnessa documentação.
Vocêpode ver esse código completo no meu Codepen,o padrão fica bem parecido com o Bootstrap(que por acaso foi construido com Sass).
Dessa mesma forma vocêpode construir modificadors para seus components de maneira din–mica utilizando como base seus design token.
próximoartigoeuvoufalarmaissobre funöes,mixins,blocose cálculos가 없습니다.Se isso foiútil pra vocè,comparilha com quem vocèacha que isso vai ajudar.Dúvidas,sugestões?Comente ou mandaum salve lá no meu 트위터.