<http://schema.org/articleBody>
"Se voc\u00EA \u00E9 um desenvolvedor front-end que est\u00E1 atualmente no mercado, j\u00E1 ouviu/leu palavrinhas como &lt;a href=\"http://lesscss.org/\" target=\"_blank\"&gt;LESS&lt;/a&gt;, &lt;a href=\"http://foundation.zurb.com/\" target=\"_blank\"&gt;Foundation&lt;/a&gt; e &lt;a href=\"http://sass-lang.com\" target=\"_blank\"&gt;Sass&lt;/a&gt;. Alguns sabem do que estou falando, outros n\u00E3o, mas o fato que \u00E9 que esses nomes foram dados \u00E0 pr\u00E9-processadores e frameworks de folhas de estilo para auxiliar na produtividade de c\u00F3digos, principalmente no que diz respeito a repeti\u00E7\u00E3o de uma mesma a\u00E7\u00E3o, diversas vezes.\r\n\r\nQuantas vezes voc\u00EA se pegou copiando e colando aquele monte de classes &lt;em&gt;identadas&lt;/em&gt; com mais de 15 linhas repetidamente e pensou: podia existir uma maneira mais r\u00E1pida de fazer isso.\r\n\r\nAgora eu te digo: tem!\r\n\r\nEu conversei com alguns amigos desenvolvedores e fui saber quais dessas novidades t\u00EAm sido mais usada, e a disputa ficou bastante acirrada entre os pr\u00E9-processadores preferidos e os frameworks mais utilizados. Ainda assim, na mesma semana acabei lendo um artigo t\u00E9cnico sobre o uso do Sass e por isso resolvi tamb\u00E9m test\u00E1-lo para entender como ele funciona.\r\n\r\nBasicamente voc\u00EA come\u00E7a \u201Cinstalando\u201D ele em sua m\u00E1quina. Para os usu\u00E1rios de MAC \u00E9 bem mais tranquilo que para os usu\u00E1rios de PC, porque para o Sass \u201Crodar\u201C precisamos que o\u00A0 &lt;a href=\"http://pt.wikipedia.org/wiki/Ruby_%28linguagem_de_programa%C3%A7%C3%A3o%29\" target=\"_blank\"&gt;Ruby&lt;/a&gt; tamb\u00E9m esteja instalado e isso j\u00E1 \u00E9 nativo no MAC. De qualquer forma, n\u00E3o \u00E9 nenhuma experi\u00EAncia traum\u00E1tica. &lt;a href=\"http://sass-lang.com/download.html\" target=\"_blank\"&gt;No pr\u00F3prio site do Sass voc\u00EA encontra os dois m\u00E9todos de instala\u00E7\u00E3o.&lt;/a&gt;\r\n\r\nEu uso MAC e escolhi instalar o Sass atrav\u00E9s do Git.\r\n\r\nAp\u00F3s clonar o reposit\u00F3rio, criei no diret\u00F3rio escolhido um novo arquivo com o nome de \u201C&lt;strong&gt;style.scss&lt;/strong&gt;\u201D. Neste arquivo de folha de estilo, escrevi as seguintes linhas de c\u00F3digo:\r\n&lt;pre&gt;.content {\r\nbackgoround: #000;\r\nfont-family: Arial;\r\nfont-size: 15px;\r\np{ line-height: 20px;}\r\n}&lt;/pre&gt;\r\nDepois abri o terminal, no diret\u00F3rio onde o arquivo .scss foi salvo e digitei:\r\n&lt;code&gt;sass --watch style.scss:style.css&lt;/code&gt;\r\n\r\nPronto! A m\u00E1gica est\u00E1 feita.\r\n\r\nEste comando cria um novo arquivo &lt;strong&gt;style.css&lt;/strong&gt; no mesmo diret\u00F3rio traduzindo as linhas digitadas acima em:\r\n&lt;pre&gt;.content {\r\n  backgoround: #000;\r\n  font-family: Arial;\r\n  font-size: 15px; }\r\n    .content p {\r\n   line-height: 20px;\r\n}&lt;/pre&gt;\r\nNeste momento voc\u00EA pode estar pensando: Ah, \u00E9 legal, mas n\u00E3o vi tanta m\u00E1gica assim.\r\n\r\nEnt\u00E3o vamos incrementar um pouco as coisas.\r\n\r\nDigite em seu arquivo&lt;strong&gt; .scss&lt;/strong&gt;:\r\n&lt;pre&gt;.varios-elementos{\r\n       background:#ccc;\r\n       p{ color:red}\r\n       a{ color:pink}\r\n       input{\r\n         -moz-border-radius: 20px;\r\n         border-radius: 20px;\r\n         -webkit-border-radius: 20px;\r\n         border-left:solid 1px #eaeaeb;\r\n         border-right:solid 1px #eaeaeb;\r\n         border-bottom:solid 1px #eaeaeb; \r\n         border-top:solid 3px #ccc;\r\n       }\r\n    }&lt;/pre&gt;\r\nSalve e em seguida seu arquivo &lt;strong&gt;style.css&lt;/strong&gt; estar\u00E1 com:\r\n&lt;pre&gt;.varios-elementos {\r\n  background: #ccc; }\r\n  .varios-elementos p {\r\n    color: red; }\r\n  .varios-elementos a {\r\n    color: pink; }\r\n  .varios-elementos input {\r\n    -moz-border-radius: 20px;\r\n    border-radius: 20px;\r\n    -webkit-border-radius: 20px;\r\n    border-left: solid 1px #eaeaeb;\r\n    border-right: solid 1px #eaeaeb;\r\n    border-bottom: solid 1px #eaeaeb;\r\n    border-top: solid 3px #ccc; }&lt;/pre&gt;\r\nPercebeu? \u201C.v\u00E1rios-elementos\u201C foi a classe que criamos, em seguida come\u00E7amos a escrever as caracter\u00EDsticas desta classe e dos elementos que nela continham, de forma bastante intuitiva e direta.\r\n\r\nN\u00E3o tem muito segredo n\u00E9?\r\n\r\nO Sass tamb\u00E9m permite o&lt;strong&gt; uso de vari\u00E1veis&lt;/strong&gt;. Por exemplo:\r\n&lt;pre&gt;$main-color: #d5d5d5\r\n\r\n.botao{\r\n   background: $main-color;\r\n}&lt;/pre&gt;\r\n&lt;strong&gt;O uso de pseudo-elementos&lt;/strong&gt;:\r\n&lt;pre&gt;a {\r\n   color: #ce4dd6;\r\n   &amp;amp;:hover { color: #ffb3ff;}\r\n   &amp;amp;:visited { color: #c458cb; }\r\n  }&lt;/pre&gt;\r\n&lt;strong&gt;O uso de Opera\u00E7\u00F5es e Fun\u00E7\u00F5es&lt;/strong&gt;\r\n&lt;pre&gt;#navbar {\r\n        $navbar-width: 800px;\r\n        $items: 5;\r\n        width: $navbar-width;\r\n        li {\r\n            float: left;\r\n            width: $navbar-width/$items - 10px;\r\n            }\r\n        }&lt;/pre&gt;\r\nE o &lt;strong&gt;uso de interpola\u00E7\u00E3o&lt;/strong&gt;: voc\u00EA pode utilizar vari\u00E1veis n\u00E3o apenas para valores, mas tamb\u00E9m propriedades ou seletores:\r\n&lt;pre&gt;$vert: top;\r\n$horz: left;\r\n$radius: 10px;\r\n.rounded-#{$vert}-#{$horz} {\r\n       border-#{$vert}-#{$horz}-radius: $radius;\r\n       -moz-border-radius-#{$vert}#{$horz}: $radius;\r\n       -webkit-border-#{$vert}-#{$horz}-radius: $radius;\r\n    }&lt;/pre&gt;\r\nTamb\u00E9m \u00E9 permitido importar outros arquivos, como j\u00E1 \u00E9 poss\u00EDvel nos arquivos CSS tradicionais e tamb\u00E9m o uso da diretiva &lt;strong&gt;\u201C@mixin\u201D&lt;/strong&gt; que \u00E9 umas das &lt;em&gt;features&lt;/em&gt; mais valorizadas do Sass, onde voc\u00EA pode aproveitar peda\u00E7os de c\u00F3digos com elementos, seletores ou propriedades, simplesmente importando atrav\u00E9s diretiva \u201C@include\u201C no arquivo .scss:\r\n&lt;pre&gt;@mixin rounded-top-left {\r\n        $vert: top;\r\n        $horz: left;\r\n        $radius: 10px;\r\n        border-#{$vert}-#{$horz}-radius: $radius;\r\n        -moz-border-radius-#{$vert}#{$horz}: $radius;\r\n        -webkit-border-#{$vert}-#{$horz}-radius: $radius;\r\n}\r\n#navbar li { @include rounded-top-left; }\r\n#footer { @include rounded-top-left; }&lt;/pre&gt;\r\nLegal n\u00E9?\r\n\r\nPois ent\u00E3o, enquanto eu testava o Sass me perguntava: vale a pena aprender um novo jeito de escrever CSS? E a resposta foi: vale, dependendo do seu objetivo.\r\n\r\nSe o tempo para o desenvolvimento for curto, o ideal \u00E9 manter-se no que voc\u00EA j\u00E1 conhece e sabe fazer. Experimentar, pode dar muito certo e te fazer adquirir ainda mais conhecimento, mas tamb\u00E9m pode dar errado e voc\u00EA n\u00E3o ter tempo de arrumar, al\u00E9m de atrasar seu cronograma.\r\n\r\nPondere isso, mas n\u00E3o deixe de estudar. Quem sabe numa tarde sem muito job voc\u00EA pode usar o Sass, aprender a aplic\u00E1-lo em sua plenitude e dar tudo muito certo quando voc\u00EA for desenvolver projetos a valer.\r\n\r\n;)\r\n\r\nAt\u00E9 a pr\u00F3xima.\r\n\r\n&amp;nbsp;\r\n\r\nOBS: Pessoal, conforme o coment\u00E1rio abaixo do Duke, existe uma corre\u00E7\u00E3o a ser feita no que diz respeito \u00E0 \"depend\u00EAncia\" do Ruby para a instala\u00E7\u00E3o do Sass:\r\n\r\n&lt;header&gt;&lt;a href=\"http://tableless.com.br/sass-um-outro-metodo-de-escrever-css/#\"&gt;Duke:&lt;/a&gt;&lt;/header&gt;\r\n&lt;div&gt;\r\n&lt;div&gt;\r\n&lt;div&gt;\r\n\r\nO SASS de forma alguma depende do Ruby On Rails, o SASS assim como o Ruby On Rails s\u00E3o gem(plugins) do Ruby, o Mac OS n\u00E3o vem com o Ruby on Rails instalado e sim com o Ruby. Veja no proprio link que voc\u00EA colocou da Wikipedia est\u00E1 l\u00E1 \"Escrito em: Ruby\" ou seja Ruby On Rails est\u00E1 para Ruby assim como CakePHP est\u00E1 para PHP, Django est\u00E1 para Python.\r\n\r\n&amp;nbsp;\r\n\r\n\u00C9 isso a\u00ED ;).\r\n\r\n&amp;nbsp;\r\n\r\n&lt;/div&gt;\r\n&lt;/div&gt;\r\n&lt;/div&gt;"^^<http://www.w3.org/2001/XMLSchema#string>
<http://tableless.com.br/sass-um-outro-metodo-de-escrever-css/>