{"id":394,"date":"2016-12-15T14:54:18","date_gmt":"2016-12-15T16:54:18","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=394"},"modified":"2016-12-15T15:21:08","modified_gmt":"2016-12-15T17:21:08","slug":"css-com-sass","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/css-com-sass\/","title":{"rendered":"CSS com SASS"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/12\/sass.png\" alt=\"CSS com SASS\" \/>\n<p>J\u00e1 est\u00e1 confort\u00e1vel com o CSS e deseja partir para um pr\u00f3ximo n\u00edvel? Est\u00e1 na hora de voc\u00ea aprender SASS. D\u00ea uma olhada no curso completo de SASS aqui: <a href=\"https:\/\/www.origamid.com\/grade-curso\/css-com-sass\/\">https:\/\/www.origamid.com\/cursos\/css-com-sass\/<\/a><\/p>\n<p>O projeto principal do curso \u00e9 o site Le Scone, e voc\u00ea pode conferir em: <a href=\"https:\/\/www.origamid.com\/projetos\/lescone\/\">https:\/\/www.origamid.com\/projetos\/lescone\/<\/a><\/p>\n<p>SASS \u00e9 um pr\u00e9-processador de CSS, com ele voc\u00ea poder\u00e1 utilizar fun\u00e7\u00f5es de uma linguagem de programa\u00e7\u00e3o para gerar o seu CSS final.<\/p>\n<p data-height=\"300\" data-theme-id=\"24256\" data-slug-hash=\"27a0e5105ffd33eb63b0929feb79dc0f\" data-default-tab=\"css\" data-user=\"origamid\" data-embed-version=\"2\" data-pen-title=\"27a0e5105ffd33eb63b0929feb79dc0f\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/27a0e5105ffd33eb63b0929feb79dc0f\/\">27a0e5105ffd33eb63b0929feb79dc0f<\/a> by Andre  Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"https:\/\/production-assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Voc\u00ea ter\u00e1 a capacidade de criar vari\u00e1veis, mixins, fun\u00e7\u00f5es, loops e mais. Abaixo eu falo das principais fun\u00e7\u00f5es e como elas v\u00e3o te ajudar.<\/p>\n<p>1 &#8211; Vari\u00e1veis<\/p>\n<pre><code class=\"language-css\">\n$roxo: #84E;\n$cinza: #333333;\n$tipo-1: Helvetica, Arial, sans-serif;\n\na {\n color: $roxo;\n font-family: $tipo-1;\n}\n\ndiv {\n background: $cinza;\n border: 2px solid $roxo;\n}\n<\/code><\/pre>\n<p>Com o SASS voc\u00ea pode criar vari\u00e1veis, assim como no JavaScript, e utiliza-las quantas vezes quiser no seu c\u00f3digo. Uma vez que voc\u00ea sentir a necessidade de mudar o valor (por exemplo, voc\u00ea quer outro tom de roxo), basta mudar uma vez na vari\u00e1vel que o valor ser\u00e1 atualizado em todo o site.<\/p>\n<p>2 &#8211; Mixins<\/p>\n<pre><code class=\"language-css\">\n@mixin tipografia-1 {\n font-size: 1.5em;\n line-height: 1.3;\n font-family: monospace;\n font-weight: bold;\n}\n\nh1 {\n @include tipografia-1;\n}\n\n.titulo {\n @include tipografia-1;\n margin-bottom: 20px;\n}\n<\/code><\/pre>\n<p>Mixins s\u00e3o blocos de propriedades que voc\u00ea pode reaproveitar em todo o seu site. Voc\u00ea define o mixin uma vez e pode reutiliz\u00e1-lo quantas vezes quiser.<\/p>\n<p>3 &#8211; Loops<\/p>\n<pre><code class=\"language-css\">\n@for $i from 1 through 12 {\n $width: $i \/ 12 * 100%;\n grid-#{$i} {\n  width: $width;\n }\n}\n<\/code><\/pre>\n<p>O c\u00f3digo acima vai gerar:<\/p>\n<pre><code class=\"language-css\">\ngrid-1 {\n  width: 8.33333%;\n}\n\ngrid-2 {\n  width: 16.66667%;\n}\n\ngrid-3 {\n  width: 25%;\n}\n\ngrid-4 {\n  width: 33.33333%;\n}\n\n\/* E por ai vai, at\u00e9 o grid-12 *\/\n<\/code><\/pre>\n<p>Voc\u00ea pode utilizar loops para criar sistemas de grid sem precisar ficar fazendo o c\u00e1lculo do tamanho de cada coluna na m\u00e3o.<\/p>\n<p>Isso foi uma pequena demonstra\u00e7\u00e3o do poder do SASS. Vale lembrar que este \u00e9 um pr\u00e9-processador, isso significa que voc\u00ea ter\u00e1 um compilador rodando no seu computador que vai gerar um arquivo .css sempre que voc\u00ea salvar o seu arquivo de SASS.<\/p>\n<p>Ou seja, ao final disso tudo um arquivo .css \u00e9 gerado e \u00e9 este arquivo que ser\u00e1 utilizado no seu site.<\/p>\n<p>Existem 2 formas de se escrever SASS, uma \u00e9 a sintaxe original do SASS e a outra \u00e9 SCSS, a que eu utilizei aqui (e tamb\u00e9m a mais comum), \u00e9 a SCSS que \u00e9 totalmente similar a forma original de se escrever CSS.<\/p>\n<p>N\u00e3o se esque\u00e7a de conferir o curso. Lembrando que o acesso dele \u00e9 liberado para todos os assinantes da Origamid (se voc\u00ea ainda n\u00e3o \u00e9 assinante, \u00e9 poss\u00edvel assistir at\u00e9 3 aulas gratuitas).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>J\u00e1 est\u00e1 confort\u00e1vel com o CSS e deseja partir para um pr\u00f3ximo n\u00edvel? Est\u00e1 na hora de voc\u00ea aprender SASS. D\u00ea uma olhada no curso completo de SASS aqui: https:\/\/www.origamid.com\/cursos\/css-com-sass\/ O projeto principal do curso \u00e9 o site Le Scone, e voc\u00ea pode conferir em: https:\/\/www.origamid.com\/projetos\/lescone\/ SASS \u00e9 um pr\u00e9-processador de CSS, com ele voc\u00ea [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/394"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=394"}],"version-history":[{"count":12,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/394\/revisions"}],"predecessor-version":[{"id":407,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/394\/revisions\/407"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}