iJhefe 384 Posted March 12, 2018 CSS Tutorial: Conhecendo SASS e SCSS Se você gosta de ficar por dentro do mundo de Desenvolvimento Web, já deve ter ouvido falar em SASS ou SCSS mas não sabia o que era, então aqui trago uma explicação resumida. SASS, SCSS e LESS são Pré-Processadores e Frameworks de CSS (folha de estilo) que auxiliam a produtividade de códigos, principalmente no quesito de repetição de uma mesma ação, diversas vezes. Você fica copiando e colando valores no CSS, se perguntando se havia uma forma mais rápida e prática para isso? A resposta é SIM, com esses Pré-Processadores. Qual a diferença entre eles? Ambos são sintaxes diferentes do SASS, mas a funcionalidade é a mesma. O Sass era originalmente a sintaxe oficial, mas era um tanto diferente do CSS e atualmente o Scss é a sintaxe oficial por se parecer com o CSS. Vejamos um exemplo de cada: SASS: #main color: #ed423f font-size: 0.8rem a font-family: Segoe font-weight: bold &:hover color: lightblue SCSS: #main { color: #ed423f; font-size: 0.8rem; a { font-family: Segoe; font-weight: bold; } &:hover { color: lightblue; } } Resultado em CSS: #main { color: #ed423f; font-size: 0.8rem; } #main a { font-family: Segoe; font-weight: bold; } #main:hover { color: lightblue; } Como podemos ver, Sass não apresenta chaves ou ponto e virgula, a regra de separação dele se deve ao espaçamento. Já o Scss, é bem parecido com CSS comum em relação a estrutura. Uso de variáveis em SCSS e SASS Para facilitar o trabalho repetitivo, ambos os processadores permitem armazenar variáveis e declara-las livremente, como: Scss $amarelo: #FFC300; $roxoEscuro: #581845; $bordaRoxoE: 1px solid #7F2364; $font-titulo: 1.5rem; $font-corpo: 0.8rem; $cor-corpo: #DCDCDC; $bg-widget: #3d3; .widget { background: $bg-widget; } .box { background: $roxoEscuro; border: $bordaRoxoE; } .box .titulo { color: $amarelo; font-size: $font-titulo; } .box p { color: $cor-corpo; font-size: font-corpo; } Quando processado para CSS, as variáveis se transformam no valor das mesmas, por exemplo, $amarelo se transforma em #FFC300. @mixin e @include Scss Com @mixin e @include você terá uma maior facilidade para construir códigos longos. O @mixin serve para "habilitar" a class a ser incluída e o @include, para incluir. Exemplo: @mixin widget { $pretoCorpo-bg: #3d3; //variavel $shadow: 0px 0px 1px #faf; //variavel $radius: 4px; //variavel background: $pretoCorpo-bg; box-shadow: $shadow; border-radius: $radius; } #widget li { @include widget; } #footer .aba { @include widget; } Isso vai fazer com que as class's receba os valores de widget. Como utilizar Para usar Sass ou Scss, é necessário uma IDE que possibilite isso, muitas são encontradas na internet, mas o que eu prefiro utilizar para Dev. Front-End é o Dreamweaver CC 2018, ele vem equipado com um conjunto de ferramentas que facilita a programação front e pré-processadores não poderiam estar de fora. Breve tutorial pra quem quiser usar o sass: ( by @Luan ) Spoiler Baixe o Ruby (o que eu uso e recomendo) Clicando AQUI. Baixe a versão recomendada, após isso procure no menu iniciar "Start Command Prompt with Ruby" ou só "Ruby" e procure pelo que é um cmd (Execute como administrador), após executar digite "gem install sass", depois de instalar acesse a pasta do seu arquivo css através do cmd (usando o comando cd ou sei lá como vocês fariam), logo após digite sass --watch (nome do arquivo.sass):(nome do arquivo.css). Exemplo: sass --watch style.sass:style.css (OBS: os dois arquivos devem existir dentro da pasta), depois é só criar seu site de boas, ao salvar (CTRL + C) o arquivo .sass vai ser compilado para o .css automaticamente Lembrando que os arquivos .scss e .sass, são transformados em .css com o mesmo nome*, ou seja, você deverá linkar em seu projeto o arquivo .css gerado. Em caso de dúvidas, comente. Haze Fórum - iJhefe 2 Share this post Link to post Share on other sites
Warpp 305 Posted March 12, 2018 Hum... Mas em sua opinião qual seria o melhor?? SASS por não utilizar virgulas etc.. Ou SCSS por ser melhor para se localizar?curiosidade 1 Share this post Link to post Share on other sites
iJhefe 384 Posted March 12, 2018 39 minutos atrás, Jumper disse: Hum... Mas em sua opinião qual seria o melhor?? SASS por não utilizar virgulas etc.. Ou SCSS por ser melhor para se localizar?curiosidade Prefiro utilizar o Scss, mas é mais pelo motivo de o Sass, no Dreamweaver, não aparecer ajuda de Sintaxe e Seletor de Cores Share this post Link to post Share on other sites
T0E 795 Posted March 13, 2018 Interessante, vou por em prática e utilizar para não esquecer rápido, é bem chato ter que ficar repetindo mesmo, eu não conhecia esses tipos de CSS, adorei! Share this post Link to post Share on other sites
iJhefe 384 Posted March 13, 2018 25 minutos atrás, T0E disse: Interessante, vou por em prática e utilizar para não esquecer rápido, é bem chato ter que ficar repetindo mesmo, eu não conhecia esses tipos de CSS, adorei! Você acha que pq eu faço as coisas de CSS rápido? Share this post Link to post Share on other sites