Se você está lendo isso provavelmente significa que você está familiarizado com CSS e ter ouvido da ESCS ou Sass, mas ainda não tomou a mergulhar.,
Bem boa notícia. O Sass vai tornar a tua vida muito melhor. Você finalmente será capaz de secar (não se repita) o seu código para fora em CSS.
basicamente, CSS está faltando algumas grandes características que ajudariam a transformá-lo em um fácil de usar e ler. O SAS adiciona variáveis, nidificação, parciais, mixinas, extensão/herança, e operadores. Algumas destas são coisas que as linguagens de programação tendem a ter., Se não sabes o que alguns deles são, tudo bem. Vamos definir cada um deles e mostrar como eles podem ser usados.
uma Sass pode ser compilada em arquivos CSS, tornando-se a escrita de muitos arquivos fácil.
Se estiver a usar a aplicação create react está com sorte porque a parte de processamento já está a ser tratada por si. Caso contrário, pode utilizar o Grunt ou Gulp para processar os seus ficheiros Sass/SCSS em CSS. Se ainda não se encontra num ambiente que o faça, sugiro que o configure primeiro. Este artigo é para falar sobre as características do Sass e como usá-los.,
Qual é a diferença entre Sass e SCSS. Ambos podem ser compilados em CSS. A verdadeira diferença está na sintaxe. O SCSS usa principalmente a mesma sintaxe do CSS, enquanto o SAS tira chavetas e semi-colões. Em ambos você pode usar os recursos adicionais que o SAS fornece.
o seguinte mostra as diferenças sintáticas.
Se você usar qualquer linguagem de codificação você sabe o que é uma variável. Por isso, não vou aprofundar muito isto. Essencialmente Sass finalmente permite que você defina variáveis de modo que se você decidir mudar dizer uma cor você não tem que mudá-la 1000 vezes., Você pode apenas mudar a sua variável de cor primária em um lugar e você está pronto para ir
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
nidificar
em CSS você não pode nidificar. Vamos ver estes dois selectores. Não há nada de mal nisto. Mas estamos a repetir o código.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
podemos nidificar em Sass como tal. Isto parece muito mais limpo.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Parciais
os Parciais são Sass ou Escs arquivos que têm um carácter de sublinhado na frente do nome do arquivo. Por exemplo. “_teste.scss”. O que é que isto faz?, Denota que este arquivo em particular não deve ser transformado em CSS quando chegar a hora. Estes ficheiros irão conter excertos de CSS que poderão então ser importados por outros ficheiros SCSS.esta é uma ótima maneira de modularizar seu CSS e manter as coisas mais fáceis de manter. Por exemplo, você pode querer armazenar variáveis que serão usadas em vários arquivos. É assim que se faz.
mixinas
mixinas são interessantes porque elas adicionam uma característica de linguagem de codificação. Você vai reconhecer imediatamente o que eu quero dizer ao ver o código:
em vez de digitar “rodar(30deg)” 3 vezes., Você pode criar o que essencialmente se sente como uma função e age como uma. Você passa na propriedade para a transformação() mixin.
para usar este pedaço de código, você deve usar a palavra-chave “@include”.
Mais informações se carregar aqui.
Extend / Inheritance & Operators
i will talk about these in Part 2 as they are a bit more involved. Estes são alguns dos recursos mais úteis no SCSS, então por favor siga e eu estarei postando este blog na próxima semana!por favor, siga-me no Twitter @thedrewprint e encontre-me no LinkedIn em Andrew Richards., Obrigado por ler!