{"id":392,"date":"2016-12-04T17:45:00","date_gmt":"2016-12-04T19:45:00","guid":{"rendered":"https:\/\/cahfelix.tech\/blog\/?p=392"},"modified":"2025-10-29T17:51:28","modified_gmt":"2025-10-29T20:51:28","slug":"para-que-serve-o-at-root-do-sass-com-exemplo-pratico","status":"publish","type":"post","link":"https:\/\/cahfelix.tech\/blog\/para-que-serve-o-at-root-do-sass-com-exemplo-pratico\/","title":{"rendered":"Para que serve o @at-root do Sass (com exemplo pr\u00e1tico)"},"content":{"rendered":"\n<p>Depois de muitas perguntas sobre o uso do <code>@at-root<\/code> no Sass, resolvi escrever este pequeno post para explicar de forma pr\u00e1tica.<\/p>\n\n\n\n<p>O <code>@at-root<\/code> serve para <strong>sair do contexto de aninhamento<\/strong> e levar o c\u00f3digo para o n\u00edvel superior no CSS compilado.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Exemplo<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  font-size: 16px;\n\n  @at-root {\n    header {\n      margin: 0 auto;\n      width: 98%;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Resultado<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n  font-size: 16px;\n}\n\nheader {\n  margin: 0 auto;\n  width: 98%;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Em resumo<\/h3>\n\n\n\n<p>O <code>@at-root<\/code> \u00e9 \u00fatil quando voc\u00ea quer <strong>manter o c\u00f3digo organizado dentro do Sass<\/strong>, mas precisa que <strong>parte do CSS gerado n\u00e3o siga o aninhamento<\/strong>. \u00c9 uma forma elegante de controlar a estrutura final do seu arquivo CSS sem perder legibilidade no c\u00f3digo-fonte.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Depois de muitas perguntas sobre o uso do @at-root no Sass, resolvi escrever este pequeno post para explicar de forma pr\u00e1tica. O @at-root serve para sair do contexto de aninhamento&#8230;<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[46,43],"class_list":["post-392","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-engenharia-de-software","tag-css","tag-front-end"],"aioseo_notices":[],"featured":false,"read_time":1,"_links":{"self":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":3,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":401,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/392\/revisions\/401"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/media\/395"}],"wp:attachment":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}