{"id":3225,"date":"2021-09-22T10:33:28","date_gmt":"2021-09-22T13:33:28","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3225"},"modified":"2025-09-02T14:24:05","modified_gmt":"2025-09-02T17:24:05","slug":"o-que-e-sass-venha-entender-esse-novo-metodo-de-escrever-css","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2021\/09\/22\/o-que-e-sass-venha-entender-esse-novo-metodo-de-escrever-css","title":{"rendered":"O que \u00e9 SASS? Venha entender esse novo m\u00e9todo de escrever CSS"},"content":{"rendered":"\n<p align=\"left\">O que \u00e9 SASS? Se voc\u00ea j\u00e1 tem algum conhecimento em web design provavelmente j\u00e1 ouviu sobre essa tecnologia, mas pode n\u00e3o conhecer a fundo sobre o que \u00e9 exatamente o SASS \u00e9, o que faz e as maneiras como voc\u00ea deveria ou n\u00e3o utiliz\u00e1-lo.<\/p>\n<p align=\"left\">O SASS \u00e9 uma linguagem de extens\u00e3o do CSS, a sigla significa \u201cSyntactically Awesome Style Sheets\u201d traduzindo ao p\u00e9 da letra, folhas de estilo com uma sintaxe incr\u00edvel. A sua ideia \u00e9 adicionar recursos especiais como vari\u00e1veis, mixins, fun\u00e7\u00f5es e opera\u00e7\u00f5es e outras op\u00e7\u00f5es variadas que iremos comentar. O SASS tem como objetivo tornar o processo de desenvolvimento mais simples e eficiente, agora, veremos alguns exemplos da versatilidade dessa tecnologia.<\/p>\n<p align=\"left\">Sintaxe!<\/p>\n<p align=\"left\">SASS possui duas op\u00e7\u00f5es de sintaxe, sendo elas:<\/p>\n<ul>\n<li>\n<p align=\"left\">SCSS: Utiliza a extens\u00e3o .scss, \u00e9 totalmente compat\u00edvel com a sintaxe padr\u00e3o CSS. \u00c9 obrigat\u00f3rio o uso de chaves e ponto e v\u00edrgula ap\u00f3s cada instru\u00e7\u00e3o. No exemplo abaixo estamos criando um mixin b\u00e1sico, podemos notar a similaridade com o CSS padr\u00e3o, utilizando s\u00edmbolos como o arroba, dolar, chaves e ponto e v\u00edrgula.<\/p>\n<\/li>\n<\/ul>\n<p align=\"left\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-3220 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/1.png\" alt=\"\" width=\"667\" height=\"198\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/1.png 667w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/1-300x89.png 300w\" sizes=\"(max-width: 667px) 100vw, 667px\" \/><\/p>\n<ul>\n<li>\n<p align=\"left\">Indentada(SASS): Utiliza a extens\u00e3o .sass, sem as chaves padr\u00e3o do CSS, todo c\u00f3digo gerado em SASS deve ser transformado em CSS, pois navegadores n\u00e3o leem arquivos .sass. No exemplo abaixo, notamos as diferen\u00e7as do CSS padr\u00e3o, com o uso de s\u00edmbolos e uma sintaxe incompat\u00edvel, sem as cl\u00e1ssicas chaves e ponto e v\u00edrgula.<\/p>\n<\/li>\n<\/ul>\n<p align=\"left\"><img decoding=\"async\" class=\"aligncenter wp-image-3221 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/2.png\" alt=\"\" width=\"674\" height=\"169\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/2.png 674w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/2-300x75.png 300w\" sizes=\"(max-width: 674px) 100vw, 674px\" \/><\/p>\n<h3 align=\"left\">Por que utilizar SASS?<\/h3>\n<p align=\"left\">O SASS foi criado visando facilitar a cria\u00e7\u00e3o de c\u00f3digos CSS, por isso, nos traz v\u00e1rias vantagens que o CSS n\u00e3o possui. Algumas delas s\u00e3o:<\/p>\n<ul>\n<li>\n<p align=\"left\"><strong>Vari\u00e1veis<\/strong><\/p>\n<\/li>\n<\/ul>\n<p align=\"left\">Podemos declarar uma vari\u00e1vel utilizando o operador $, ent\u00e3o passamos a propriedade, podendo ela ser uma cor, fonte, tamanho da fonte, largura ou altura, etc.<\/p>\n<p align=\"left\"><img decoding=\"async\" class=\"aligncenter wp-image-3222 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/3.png\" alt=\"\" width=\"395\" height=\"354\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/3.png 395w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/3-300x269.png 300w\" sizes=\"(max-width: 395px) 100vw, 395px\" \/><\/p>\n<ul>\n<li>\n<p align=\"left\"><strong>Nested Selectors<\/strong><\/p>\n<\/li>\n<\/ul>\n<p align=\"left\">Em uma situa\u00e7\u00e3o em que gostar\u00edamos de acessar uma lista dentro de uma navbar. Seguindo a sintaxe padr\u00e3o do CSS, ir\u00edamos utilizar o seguinte comando \u201cnavbar ul\u201d. Agora, com o SASS, podemos apenas incluir a lista dentro da pr\u00f3pria classe da navbar, facilitando o acesso, visualiza\u00e7\u00e3o e organiza\u00e7\u00e3o do c\u00f3digo, que dessa maneira, flui de uma forma mais eficiente. Segue o exemplo abaixo:<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3223 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/4.png\" alt=\"\" width=\"251\" height=\"283\"><\/p>\n<p align=\"left\">&#8211; <strong>Utilizando Mixins (fun\u00e7\u00f5es)<\/strong><\/p>\n<p align=\"left\">Fun\u00e7\u00f5es s\u00e3o uma excelente maneira de otimizar o c\u00f3digo, impedir repeti\u00e7\u00f5es e facilitar altera\u00e7\u00f5es. Pode parecer um tanto complexo, utilizar fun\u00e7\u00f5es com CSS, por\u00e9m a pr\u00e1tica \u00e9 bem simples.<\/p>\n<p align=\"left\">Por exemplo, n\u00f3s precisamos criar um texto de alerta, com a cor vermelha, em negrito e tamanho maior. Ao inv\u00e9s de chamarmos essas propriedades cada vez que fosse necess\u00e1rio, podemos criar o mixin \u201ctexto-aviso\u201d, incluindo-o dentro da nossa classe perigo, dessa forma, as propriedades inclu\u00eddas nessa fun\u00e7\u00e3o ser\u00e3o passadas para essa classe.<\/p>\n<p align=\"left\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3224 size-full\" src=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/5.png\" alt=\"\" width=\"306\" height=\"324\" srcset=\"https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/5.png 306w, https:\/\/www.ufsm.br\/app\/uploads\/sites\/791\/2021\/09\/5-283x300.png 283w\" sizes=\"(max-width: 306px) 100vw, 306px\" \/><\/p>\n<ul>\n<li>\n<p align=\"left\"><strong>Conclus\u00e3o<\/strong>:<\/p>\n<\/li>\n<\/ul>\n<p align=\"left\">O SASS nos fornece novas funcionalidades que agregam, facilitam e simplificam o processo de desenvolvimento. Para aqueles que estudam web design, o SASS acaba sendo uma \u00f3tima ferramenta, pois al\u00e9m dos recursos, possui uma sintaxe f\u00e1cil de compreender. Agora voc\u00ea j\u00e1 pode utiliz\u00e1-lo em seus projetos, espero que tenham gostado.<\/p>\n<p align=\"left\">&nbsp;<\/p>\n<p style=\"text-align: right\">&#8211; Leonardo Michelotti<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O que \u00e9 SASS? Se voc\u00ea j\u00e1 tem algum conhecimento em web design provavelmente j\u00e1 ouviu sobre essa tecnologia, mas pode n\u00e3o conhecer a fundo sobre o que \u00e9 exatamente o SASS \u00e9, o que faz e as maneiras como voc\u00ea deveria ou n\u00e3o utiliz\u00e1-lo. O SASS \u00e9 uma linguagem de extens\u00e3o do CSS, a [&hellip;]<\/p>\n","protected":false},"author":2948,"featured_media":3226,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[149,192],"class_list":["post-3225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3225"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3225\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3226"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}