![\"Gif](\"../../../assets/2015/10/madruga.gif\")
SASS é um pré-processador incrível não acha? Mas muitos não sabem como organizar seus projetos com ele, nesse artigo vou lhe mostrar como organizar uma estrutura \"foda\" usando SASS e Atomic Design, vem comigo.
\n\n\nNão vou explicar o que é Atomic Design, não é o intuito desse artigo, mas vou deixar aqui alguns links para que você dê uma lida antes de continuar.
\n
Depois que você entendeu bem o que é Atomic Design e como ele funciona vamos começar a desenhar a estrutura do nosso projeto.
\nNós sabemos que atomic design é dividido em 5 itens, atoms, molecules, organisms, templates e pages, mas nós usaremos apenas 3 desses itens: atoms, molecules e organisms e, claro, criaremos um diretório pra cada item, mais ou menos assim:
\nsass-e-atomic-design/\n └── sass/\n ├── atoms/\n │ └── # Arquivos sass para atoms\n ├── molecules/\n │ └── # Arquivos sass para molecules\n └── organisms/\n └── # Arquivos sass para organismsAinda junto com esses 2 itens do Atomic Design vamos adicionar mais 2 diretórios, core/ e vendor/.
Fica mais ou menos assim:
\nsass-e-atomic-design/\n └── sass/\n ├── atoms/\n │ └── # Arquivos sass para atoms\n ├── core/\n │ └── # Arquivos sass para variaveis e mixins\n ├── molecules/\n │ └── # Arquivos sass para molecules\n ├── organisms/\n │ └── # Arquivos sass para organisms\n └── vendor/\n └── # Arquivos sass de terceirosVamos começar com o diretório core/, nele vamos criar 4 outros diretórios: bosons/, functions/, mixins/ e variables/, e 4 arquivos _bosons.scss, _functions.scss, _mixins.scss e _variables.scss.
Vamos deixar functions/, mixins/ e variables/ de lado e vamos nos concentrar em bosons/, é ai que começa a fazer sentido a metodologia Atomic Design. Nesse diretório vamos criar um bóson que muita gente conheçe, o famoso button.
Crie um arquivo chamado _buttons.scss e coloque a seguinte estrutura.
%button {\n padding: 0.8em 2em;\n text-decoration: none;\n border: none;\n margin-top: 1em;\n display: inline-block;\n color: #fff;\n font-size: 1.2em;\n text-align: center;\n transition: 0.4s background ease, 0.4s color ease;\n border-radius: 0.4em;\n background: #c12b2c;\n font-weight: bold;\n text-transform: uppercase;\n\n &:hover,\n &:focus,\n &:active {\n background: lighten(#c12b2c, 7%);\n text-decoration: none;\n color: #fff;\n }\n}\n\n%button-ghost {\n background-color: transparent;\n border: 2px solid #fff;\n border: 2px solid rgba(#fff, 0.9);\n\n &:hover,\n &:focus,\n &:active {\n border-color: rgba(#fff, 0.7);\n background-color: rgba(#fff, 0.1);\n text-decoration: none;\n color: #fff;\n }\n}A estrutura acima tem dois bósons que darão massa aos átomos de botões por todo nosso projeto, é bem simples, basta usar o @extend %button; que a mágica acontece.
Esse é só um pequeno exemplo de como podemos criar os nossos placeholders de SASS em nosso projeto, pense em bóson como algo que você vai usar muito e por todo o seu projeto, algo que será igualmente repetido em muitos lugares, assim você abstrai o CSS e o arquivo final ficá sem repetição de código.
\n\n\nLeia mais sobre bósons e quarks em nomadev
\n
Essa é a primeira parte do nosso tutorial de SASS e Atomic Design, no próximo episódio veremos como unir os bósons e os atoms e como isso pode reduzir o seu CSS final, ajudando assim na performace do seu projeto. Até lá!
\n/end
","excerpt":"SASS é um pré-processador incrível não acha? Mas muitos não sabem como organizar seus projetos com ele, nesse artigo vou lhe mostrar como organizar…","timeToRead":4,"frontmatter":{"category":["sass"],"date":"há 11 anos","description":"SASS é um pré-processador incrível não acha? Mas muitos não sabem como organizar seus projetos com ele","path":"/sass-e-atomic-design","tags":["sass","css","pre-processador"],"title":"SASS + Atomic design","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":605}}}},{"node":{"id":"88d05e9a-3b19-57e6-b01b-592ff9f4524d","html":"\n\nEsse artigo foi traduzido de: How to use tags and categories on github pages without plugins
\n
GitHub Pages serviço é simplesmente incrível, e com a integração Jekyll ele fica ainda mais impressionante! Mas existem algumas limitações neste grande sistema automatizado:
\nComo você já deve saber:
\nTriste... Mas isso era algo que eu realmente queria ter!
\nEntão eu construí minha própria Data-Template-NoPlugin-System e funciona.
\nVocê pode ver uma demonstração ao vivo nesta página.
\nAqui está um pequeno guia de como implementá-lo:
\n{% assign post = page %}\n{% if post.tags.size > 0 %}\n {% capture tags_content %}Posted with {% if post.tags.size == 1 %}<i class=\"icon icon-tag\"></i>{% else %}<i class=\"icon icon-tags\"></i>{% endif %}: {% endcapture %}\n {% for post_tag in post.tags %}\n {% for data_tag in site.data.tags %}\n {% if data_tag.slug == post_tag %}\n {% assign tag = data_tag %}\n {% endif %}\n {% endfor %}\n {% if tag %}\n {% capture tags_content_temp %}{{ tags_content }}<a href=\"/blog/tag/{{ tag.slug }}/\">{{ tag.name }}</a>{% if forloop.last == false %}, {% endif %}{% endcapture %}\n {% assign tags_content = tags_content_temp %}\n {% endif %}\n {% endfor %}\n{% else %}\n {% assign tags_content = '' %}\n{% endif %}tags_content onde quiser dentro do seu layout post.html<p id=\"post__meta\">{{ tags_content }}</p><h1>Articles by tag :{{ page.tag }}</h1>\n<div>\n {% if site.tags[page.tag] %}\n {% for post in site.tags[page.tag] %}\n <a href=\"{{ post.url }}/\">{{ post.title }}</a>\n {% endfor %}\n {% else %}\n <p>There are no posts for this tag.</p>\n {% endif %}\n</div>post entry o front-matter, como de costume.---\ntitle: How To Use Tags And Categories On GitHub Pages Without Plugins\ncategory: programming\ntags: [github, github-pages, jekyll]\n---_data/tags.yml- slug: github-pages\n name: GitHub Pages---layout: blog_by_tag\ntag: github-pages\npermalink: /blog/tag/github-pages/\n---\n\nPara uma implementação mais complexa de categorias e tags veja nesse repositório: github.com/nandomoreirame/nandomoreira-jekyll-theme
\n
/end
","excerpt":"Esse artigo foi traduzido de: How to use tags and categories on github pages without plugins GitHub Pages serviço é simplesmente incrível, e com a…","timeToRead":2,"frontmatter":{"category":["jekyll"],"date":"há 11 anos","description":"GitHub Pages serviço é simplesmente incrível! E com a integração Jekyll ele fica ainda mais impressionante! Mas existem algumas limitações neste grande sistema automatizado","path":"/usando-categorias-e-tags-no-jekyll","tags":["github","gh-pages","jekyll"],"title":"Usando categorias e tags no Jekyll","image":{"publicURL":"/static/get-started-with-jekyll-89fd15d1dd2f602e9773098c7b895352.jpg","name":"get-started-with-jekyll"}},"fields":{"readingTime":{"words":394}}}},{"node":{"id":"988c40c6-1f25-5fb1-84ee-7dd6b3968a84","html":"Você deve estar se perguntando: \"Front-end de graça? Como assim?\"
\nÉ isso mesmo que você leu, Faço front-end de graça, mas tem alguns requisitos necessários para que isso aconteça, vem comigo que te explico como...
\nUltimamente estou gostando muito de ajudar a criar projetos open source, então um dos requisitos para que eu possa fazer um HTML bonitão para o seu projeto é que ele precisa estar no Github para que todos possam ver, usar e contribuir com ele.
\nIsso mesmo! Você tem um framework e quer fazer uma documentação bonita pra dele? Tem um projeto bacana e quer uma landing page ou hotsite? Conte comigo!!
\nOutro requisito, caso não seja possível cumprir com o primeiro, é a troca de conhecimento
\nEu tenho amplo conhecimento em tecnologias para front-end como HTML(Jekyll/liquid, jade, Haml, Erb), CSS(CSS3, SASS, Less, Stylus) e Javascript(jQuery, AngularJS, NodeJS, Gulp.js), e eu posso contribuir com o seu projeto SEM LHE COBRAR NADA POR ISSO, se e somente se, você tiver algum conhecimento(que possa ser de meu interesse, claro) você pode ensina-lo a mim, seria algo como: uma nova linguagem de programação, um framework bacana, tocar violão, guitarra, sax, bombardão, teclado, piano, dançar, cozinhar... ou seja qualquer coisa mesmo!!!
\n
Eu apoio totalmente a troca deconhecimento, seja em uma boa conversa sobre culinária ou em um repositório no Github.
\nVocê quer troca figurinhas comigo? Seu projeto está no Github e você precisa de um front-end? Você sabe tocar algum instrumento e tem um projeto bacana para colocar no ar? Podemos nos encontrar e conversar sobre o assunto, podemos fazer isso acontecer...
\nSó se for agora 🤘
\n/end
","excerpt":"Você deve estar se perguntando: \"Front-end de graça? Como assim?\" É isso mesmo que você leu, Faço front-end de graça, mas tem alguns requisitos…","timeToRead":1,"frontmatter":{"category":["geral"],"date":"há 11 anos","description":"É isso mesmo que você leu, Faço front-end de graça, mas tem alguns requisitos necessários para que isso aconteça, vem comigo que te explico como","path":"/faco-front-end-de-graca","tags":["front-end","open-source","geral"],"title":"Faço front-end de graça, saiba como!","image":{"publicURL":"/static/madruga-36f27130dd0b43b1f3490d021e88740d.gif","name":"madruga"}},"fields":{"readingTime":{"words":286}}}},{"node":{"id":"16ff37f4-5d52-5879-b6f2-c9569a728c1b","html":"Esse post não poderia começar melhor, com um \"I love U\" para MalaPronta.com, um ambiente descontraído com piadas ruins (mas que são boas) e uma sala que não é nem quente nem fria e nem escura ou clara(entendedores entenderão).
\nEu queria poder dizer que to feliz com tudo isso, mas não to. Eu amava trabalhar lá, apesar de muitas intrigas e desavenças, eu amava meu emprego.
\nEu vou compartilhar com vocês meus 8 meses de experiência em uma startup com 10 anos de vida, posso dizer que não vi o começo de tudo, mas vi o fim do começo, vi o fim de sonhos e planos, amizades e desavenças, tudo se acabar dentro de uma sala de reuniões de um hotel, tudo se acabou com algumas palavas ditas em dois idiomas, porque um só já não bastava.
\nTudo começou em meados Janeiro, quando nos meus primeiros dias de empresa eu teria que entender um sistema desconhecido, entender como melhorar (ou deixar menos ruim) o HTML, o CSS e o JS daquele sistema, esse sistema era chamado de Reserva Imediata.
\nNo começo tudo parecia muito confuso, muitos arquivos de configs, era configs pra tudo, pra por CSS, pra tirar CSS, pra por JS, pra tirar JS.. isso tudo era novo pra mim, mas bora lá melhorar esse projeto.
\nO primeiro desafio, que me foi solicitado, foi Ajudar a melhorar a performance do projeto. Todos estavam envolvido nesse novo desafio, DBA, Integrações, Back-end e Front-end, confesso que tava com receio de não conseguir ajudar em quase nada mas eu aceitei o desafio.
\nPrimeira coisa que configurei no projeto foi o Gulp, com ele eu consegui minificar quase 4 mil arquivos CSS e JS, e comprimir as mais de 3 mil imagens em questões de minutos, depois fizemos uma \"marotagem\" com regex para minificar o HTML processado pelo PHP, com isso reduziriamos relativamente o tamanho dos arquivos de download do site, foi um bom ganho.
\nResultado, conseguimos baixar a média do site de 14s pra 8s, quase a metade não? Claro que isso não se deve só a mim, a galera trabalhou duro para isso acontecer, equipe massa (faltou o churrasco pra comemorar hein!).
\nEu tava quase fechando dois meses de empresa quando veio o segundo desafio: Transformar o Reserva Imediata em um site responsivo, esse eu encarei com a cara e a coragem. Eu nunca tinha pego um site antigo, de código legado, que sequer tinha visto uma media query na vida (talvez a media print mas essa não conta) e transformado em responsivo, esse seria um desafio e tanto.
\nResultado, em duas semanas a versão responsiva do site já podia ir pro ar, a galera curtiu, eles iriam eliminar completamente o m., um projeto que era uma pedra no sapato dos devs.
\nEsse era com certeza o maior desafio de todos, Desenvolver o novo Reserva Imediata. Quando eu entrei eles já estavam criando o layout há algum tempo, inclusive o meu teste foi em cima de um HTML feito com base nesse layout.
\nComo tudo na vida é injusto, o que fizeram com o trabalho do designer que criou essa versão do layout também foi injusto, com a entrada do novo UX, foram meses/anos de trabalho jogados fora. Posso dizer que vi o projeto ser jogado fora e começado de novo do zero, sem graça e sem vida... e vi ele tomando vida aos poucos com a entrada da nova designer.
\nTodos sabem que designers e desenvolvedores não se dão muito bem em agências, mas ali era diferente, nos dávamos bem até, só a distância que nos separava que não era pra ser tão grande assim(eram 3 andares), no começo eu queria que ficassemos todos juntos (front, designer, ux), mas não, os designer precisavam dar prioridades pra outros projetos, não pro site (que era o principal produto da empresa), mas não liguem, esse terceiro desafio nunca será completado.
\nEu tinha uma equipe massa quando eu entrei, atenciosos, focados e determinados ao extremo e tínhamos um team leader foda pra caralho. Éramos em 5 membros, sendo 1 team leader e 3 devs e 1 front(eu). Nosso entrosamento era o máximo, tínhamos reuniões diária (das quais eu quase não participava), tínhamos almoços só da equipe (partiu Madero?), mas as perdas foi deixando isso tudo para trás, primeiro um dos membros virou Analista, logo ele foi deixando de fazer parte da equipe, deixando de ir nas reuniões e tudo mais. Entrou uma nova programadora pra ajudar nas demandas do site atual enquanto nós focavamos nossos recursos no site novo. Depois de algum tempo anunciada a saída do nosso team leader, logo mais os outros foram indo também, acabou ficando só eu e a nova programadora no time do site.
\nEntão foi realocado um programador de outro time para o nosso e ficamos em 3 na equipe. Essa nova formação trabalhou duro para entregar as demandas do Reserva Imediata e desenvolver novas features para o novo projeto e muito mais, até que..
\nEstávamos todos ansiosos para ver uma versão do novo site funcionando, principalmente quem não estava acompanhando o desenvolvimento de perto (pessoal do sexto), então fizemos uma versão e colocamos em um ambiente de \"testes\"(entre aspas porque alguns ainda não entenderam que era apenas testes).
\nEntão na metade da terceira semana de setembro meu gerente me chamou para fazer nosso one one mensal, e ele me passou uma lista de ajustes para se fazer no site, que era pertinente ao meu trabalho. Até aí tranquilo né, lista de ajustes é normal em sites de testes, deve ta quebrando alguma coisa no layout ou tem um ajuste de erro de digitação.
\nTa bom, vai vendo..
\nO documento contia coisas do tipo: \"A indentação no navegador está errada(bagunçada), isso prejudica manutenções futuras\"... E também: \"As classes que você usou nos títulos estão confusas, isso prejudica manutenções futuras\"... E mais: \"Muitas linhas no seu CSS, pode impactar na performance\".. E ainda: \"Muitas linhas no seu JS, pode impactar na performance\".. Pode isso Arnaldo?
\nTem como não levar para o lado pessoal? Tem como não ter isso como um insulto ao meu trabalho? Pois bem.. Deixarei que você, que está lendo isso agora, responda essas perguntas e tire suas própias conclusões.
\nEu não posso deixar de mencionar o famoso Quarteto Fantástico que era a equipe de infraestrutura, preciso deixar os meus agradecimentos aqui por todas as pausas para o café que tivemos no sétimo andar e todos os papos nerds(e outros papos sem futuro e de buling uns com os outros), com esses com certeza materei eterno contato. Continuem salvando o mundo e fazendo ótimos cafés como vocês sempre fizeram que tudo ficará bem.
\nComo eu comentei no início desse post, por mais que existiam intrigas, fofocas e desavenças eu amava trabalhar na MalaPronta, me sentia livre para trabalhar, pesquisar e implementar novas coisas. Novas ideias surgiram de mim, como criar um framework pra padronizar códigos CSS e JS, criar um blog de TI da MalaPronta pra compartilhar nossas soluções com outras pessoas, como muitas empresas de TI fazem por ai.
\nEu aprendi muito com as pessoas em minha volta, desenvolvedores super inteligentes, antenados e focados no trabalho. Aprendi tecnologias novas como Symfony, Vagrant, sistemas de deploys inteligentes, sistemas de monitoramentos, aprendi a ser humilde com os caras mais humildes que já conheci e que são fodas pakas, aprendi que nunca uma piada sua é boa ou tão ruim se não tiver ouvintes que a entendam bem, aprendi que um ambiente (quente ou frio, escuro ou claro) nunca é acolhedor se não tiver pessoas legais é carismáticas nele.
\nSempre vou sentir saudades das pessoas do porão da MalaPronta, vulgo 3° andar.
\nNos artigos anteriores eu falei sobre Funções e sobre Mixins do SASS, mas sem sombra de dúvidas, uma das funcionalidades mais legais do SASS (na minha opinião) é você poder criar [placeholders](http://sass-lang.com/documentation/file.SASSREFERENCE.html#placeholderselectors)_ para agrupamento de códigos repetidos.
\nUm placeholder selector (transuzindo para o português: seletor de espaço reservado) se assemelha com os sectores de ID's (#) e de classes (.), ou seja você cria o seu bloco de CSS normal mas ao invés de usar . ou # você usa % para suas declarações.
![Pode isso Arnaldo?](\"http://geradormemes.com/media/created/18qk4w.jpg\"){kind=link}
%background-white {\n background-color: #fff;\n}\n\n%heading-big {\n font-size: 52px;\n padding: 30px 15px;\n @extend %background-white;\n}\n\nbody {\n @extend %background-white;\n}\n\n.post-heading {\n @extend %heading-big;\n border-bottom: 1px solid #eee;\n margin-bottom: 60px;\n}\n\n.post-page {\n @extend %heading-big;\n color: #333;\n}Outra diferença de ID's e Classes é que os placeholders não ficam visíveis quando meu CSS for processado, ele só aparece se for invocado com @extend por alguma classe ou ID.
No código acima os placeholders %background-white e %heading-big não aparecerão no meu CSS processado enquanto não forem chamados, mesmo invocando o %background-white dentro de %heading-big eles ainda continuarão invisíveis.
A grande vantagem de se usar placeholders é o agrupamento de propriedades CSS iguais, isso deixa o seu CSS final muito mais limpo e consequentemente menor, veja o resultado final:
\nbody,\n.post-heading,\n.post-page {\n background-color: #fff;\n}\n\n.post-heading,\n.post-page {\n font-size: 52px;\n padding: 30px 15px;\n}\n\n.post-heading {\n border-bottom: 1px solid #eee;\n margin-bottom: 60px;\n}\n\n.post-page {\n color: #333;\n}Note que o agrupamento dos selectores body, .post-heading e .post-page com a propriedade background-color e .post-heading e .post-page com as propriedades font-size e padding. Isso é incrível não?
Bom, por hoje é só..
\nGostou do artigo, compartilhe para que outros possam ler também e comenta ai?
\n/end
","excerpt":"Nos artigos anteriores eu falei sobre Funções e sobre Mixins do SASS, mas sem sombra de dúvidas, uma das funcionalidades mais legais do SASS (na minha…","timeToRead":2,"frontmatter":{"category":["sass"],"date":"há 11 anos","description":"Uma das funcionalidades mais legais do SASS é você poder criar placeholders para agrupamento de códigos repetidos","path":"/sass-parte-5-placeholder","tags":["sass","css","pre-processador"],"title":"#5 - Conhecendo o pré-processador SASS | Placeholder","image":{"publicURL":"/static/conhecendo-o-pre-processador-sass-b6a1f24254111b01aa97dae9042b5345.jpg","name":"conhecendo-o-pre-processador-sass"}},"fields":{"readingTime":{"words":348}}}},{"node":{"id":"ddb42064-5bab-50fc-9fdf-6963612e9122","html":"Eu criei um repositório no Github onde mantenho atualizado com um boilerplate para Gulp, o repositório era pra ser pessoal mas eu resolvi compartilhar.
\nTodo mundo já usou ou já ouviu falar dos pacotes do NodeJS os famosos npm, eu queria saber como fazer um e talvez, quem sabe, criar um pra saber que gostinho tem :)
\nEu gosto muito da ideia do Yeoman de poder iniciar um projeto rápido com os seus generators, dai eu pensei: \"Porque não fazer o um generator também?\"
\nDessa ideia que saiu o Generator Gulp Boilerplate.
\nA documentação do Yeoman é bem simples e fazer um generator é bem fácil, eu realmente não tive dificuldades e com a ajuda do blog do Da2k eu consegui publicar ele no repositório do npmjs.com.
\nComo o Yeoman é um componente do NodeJS então você deve instalar ele com o comando npm install, assim:
sudo npm install -g yoCom o Yeoman devidamente instalado em sua máquina basta só ir no repositório e escolher o generator que quer instalar, a escolha não vai ser fácil pois atualmente tem mais de 3 mil generators no repositório do Yeoman.
\n\n\nProcure por \"gulp-boilerplate\" no campo de busca que vc vai encontrar o meu generator por lá..
\n
Após escolher o seu generator basca clicar nele que você irá para o repositório do Github do generator, lá terá a documentação daquele generator, basta segui-la.
\nPara instalar o Gulp Boilerplate basta executar o seguinte comando:
\nsudo npm install -g generator-gulp-boilerplateSimples e fácil.
\nCrie um diretório para trabalhar e entre nele.
\nmkdir my-project\ncd my-project/Basta executar o generator que foi escolhido e instalado por você basta escrever yo e em seguida o \"slug\" do generator, assim:
yo gulp-boilerplateO generator vai criar todo o \"start\" do projeto pra você, sem reclamar ;)
\n\n\n\"Mas afinal o que tem de especial nesse tal Gulp Boilerplate pra me fazer instalar e usar ele?\"
\n
Calma jovem, vou listar abaixo todos os pacotes e as tasks do Gulp Boilerplate pra você não ficar ai todo curioso:
\ngulp default ou apenas gulp: executa a task gulp servegulp serve: executa o watch do projeto para os arquivos de .jade, .sass e .js e executa também um servidor usando o browser-sync e toda a vez que um arquivo HTML, CSS ou JS é alterado ele dá o reload nos navegadores.gulp html: usando os pacotes jade e gulp-jade essa tarefa processa arquivos .jadegulp sass: tarefa para executar o pré-processador SASS, aqui usamos o pacote gulp-compass.gulp lint: aqui executamos o lint para aquivos que estão em js/components/ que são os arquinos js de produção.gulp js: essa tarefa usa o pacote gulp-include para incluir arquivos JS como é feito em SASS e emseguida minificar e salvar em dois aquivos FILE.js e FILE.min.js.gulp images: usando gulp-imagemin e imagemin-pngquant reduzimos o tamanho de todas as imagens para produção.gulp fonts: apenas copiamos do diretório /src/fonts/ para dist/assets/fonts/gulp build: faz o build do projeto executando as tasks gulp html, gulp sass, gulp js, gulp images e gulp fontsBem, basicamente essa é a forma que eu trabalho com gulp, se você gostou da um like e um fork lá do repositório do projeto e comenta ai em baixo.
\nAbraço.
\n/end
","excerpt":"Eu criei um repositório no Github onde mantenho atualizado com um boilerplate para Gulp, o repositório era pra ser pessoal mas eu resolvi compartilhar…","timeToRead":4,"frontmatter":{"category":["gulp"],"date":"há 11 anos","description":"Eu criei um repositório no Github onde mantenho atualizado com um boilerplate para Gulp, o repositório era pra ser pessoal mas eu resolvi compartilhar.","path":"/yeoman-generator-gulp-boilerplate","tags":["gulp","generator","yeoman"],"title":"Yeoman Generator Gulp Boilerplate","image":{"publicURL":"/static/yeoman-5ff3a946146c6cb519048cd74d3f18aa.jpg","name":"yeoman"}},"fields":{"readingTime":{"words":625}}}},{"node":{"id":"cead83f8-83fb-57c3-a946-531770bd2975","html":"Gulp 4 não foi liberado ainda e se você não pode esperar para colocar suas mãos sobre ele, aqui vai como instalar o Gulp 4.
\nSe você tiver uma versão anterior do Gulp instalado, desinstale primeiro. Talvez seja necessário executar este comando como um administrador ou um superusuário, dependendo do seu sistema.
\nnpm uninstall -g gulp\nnpm install -g \"gulpjs/gulp-cli#4.0\"\nNa minha máquina (Linux Mint Rebecca), eu não tinha problemas contínuos usando Gulp < 4 depois de instalar globalmente Gulp 4.Se você usar uma versão anterior do Gulp (ie Gulp 3.8.x ou anterior), remova-o do repositório que você deseja atualizar. Não se esqueça de especificar --save-dev ou --save para que o seu package.json seja atualizado.
\ncd your_repo/\nnpm uninstall gulp --save-dev # removendo o gulp 3.8.x local\nnpm install \"gulpjs/gulp#4.0\" --save-dev # instalando o gulp 4.0 localNa minha máquina, a versão anterior do Gulp não foi devidamente removida e eu comecei a ficar esse erro ao tentar executar:
\n/usr/local/lib/node_modules/gulp/bin/gulp.js:129\n gulpInst.start.apply(gulpInst, toRun);\n ^\nTypeError: Cannot call method 'apply' of undefined\n at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20\n at process._tickDomainCallback (node.js:492:13)O que significa esse erro de rastreamento uso tel? gulp.start() não está mais no Gulp 4 e não deve ser chamado e o pacote gulp-cli deve ser chamado no lugar de pacote gulp.
\nEu corri o seguinte comando:
\nls -l $`whereis gulp`E percebi que eu ainda tinha um arquivo do Gulp antigo em uma pasta bin:
\nlrwxrwxrwx 1 root root 40 May 3 11:17 /usr/bin/gulp -> ../lib/node_modules/gulp-cli/bin/gulp.js\nlrwxrwxrwx 1 root root 40 May 3 11:17 /usr/bin/X11/gulp -> ../lib/node_modules/gulp-cli/bin/gulp.js\nlrwxrwxrwx 1 root root 36 Apr 3 21:41 /usr/local/bin/gulp -> ../lib/node_modules/gulp/bin/gulp.jsSimplesmente remova arquivos antigos:
\nsudo rm /usr/local/bin/gulp\nsudo rm -rf /usr/local/lib/node_modules/gulp/done.
","excerpt":"Gulp 4 não foi liberado ainda e se você não pode esperar para colocar suas mãos sobre ele, aqui vai como instalar o Gulp 4. Instale o Gulp globalmente…","timeToRead":2,"frontmatter":{"category":["sass"],"date":"há 11 anos","description":"Gulp 4 não foi liberado ainda e se você não pode esperar para colocar suas mãos sobre ele, aqui vai como instalar o Gulp 4.","path":"/como-instalar-o-gulp-4","tags":["node","gulp","instalação"],"title":"Como instalar o Gulp 4","image":{"publicURL":"/static/gulp-29ad534bcd8c62207f472d6b92fe7f99.png","name":"gulp"}},"fields":{"readingTime":{"words":308}}}},{"node":{"id":"efde819c-fb8f-58fe-ad4e-e5440f66d298","html":"Meu amigo Wilson gostou muito da ideia de poder publicar o blog dele no github usando Jekyll. Pode-se dizer que eu sou um “Evangelista do Jekyll” porque ele é um convertido da minha palavra. (huehuehue)
\nBom, ele usou por algum tempo o tema default gerado pelo jekyll, é até “bonitinho” mas convenhamos, sempre pode melhorar né.
\nO link do projeto é: wprosdocimo.com.br
\nO resultado foi bem bacana, veja logo abaixo.
\n/end
","excerpt":"Meu amigo Wilson gostou muito da ideia de poder publicar o blog dele no github usando Jekyll. Pode-se dizer que eu sou um “Evangelista do Jekyll…","timeToRead":1,"frontmatter":{"category":["sass"],"date":"há 11 anos","description":"Meu amigo Wilson gostou muito da ideia de poder publicar o blog dele no github usando Jekyll. Pode-se dizer que eu sou um “Evangelista do Jekyll” porque ele é um convertido da minha palavra.","path":"/blog-wilson-luiz-prosdocimo","tags":["jekyll","projeto","portfolio"],"title":"Blog Wilson Luiz Prosdocimo com Jekyll","image":{"publicURL":"/static/wprosdocimo-57672ce2f00915b9d3c4e757a6eb2e88.jpg","name":"wprosdocimo"}},"fields":{"readingTime":{"words":95}}}},{"node":{"id":"6ca3b3c5-864d-5cb3-99d8-0a2e2abea4ba","html":"Mixin foi definitivamente algo novo para mim, você consegue passar valores por parâmetros assim como funções, a diferença é que uma função retorna apenas 1 único valor e mixin retorna um bloco inteiro de CSS.
\nO principal objetivo do Mixin é você poder reutilizar um determinado bloco de código por todo seu projeto.
\n\n\nUm mixin permite fazer grupos de declarações CSS que você deseja reutilizar em todo o site. Você pode até mesmo passar valores para fazer a sua mixin mais flexível.\n Traduzido de: sass-lang.com
\n
Vamos fazer um exemplo simples, o mesmo usado na documentação do SASS (sass-lang.com/guide).
\n@mixin border-radius($radius) {\n -webkit-border-radius: $radius;\n -moz-border-radius: $radius;\n -ms-border-radius: $radius;\n border-radius: $radius;\n}\n\n.card {\n @include border-radius(4px);\n}Esse bloco acima vai nos gerar o seguinte trecho de CSS:
\n.card {\n -webkit-border-radius: 4px;\n -moz-border-radius: 4px;\n -ms-border-radius: 4px;\n border-radius: 4px;\n}Legal não!?
\nPense em Mixin como uma função que irá retornar um bloco inteiro de CSS ao invés de um valor único e que você pode usa-la em vários lugares do seu projeto sem precisar repetir ou copiar e colar blocos que são iguais.
\nPor enquanto é isso, obrigado.
\nEsse artigo será bem rápido, vou falar sobre o recurso que deixa o SASS ainda mais com cara de linguagem de programação, são as funções.
\nEu comentei no artigo anterior que \"Mixins são como funções que retornam um bloco inteiro de CSS\", esse recurso fica ainda mais completo se somado com funções.
\nVamos fazer um exemplo clássico, somar a + b.
@function soma($a, $b: 0) {\n $c: $a + $b;\n @return $c;\n}\n\n.card {\n width: soma(500px, 200);\n}O exemplo acima vai me retornar o valor da soma do primeiro parâmetro com a do segundo, resultando em 700px de largura para a classe .card. Simples não é mesmo?
E o que aconteceria se eu aplicasse somente o primeiro parâmetro?
\n.card {\n width: soma(500px);\n}Isso mesmo que você pensou! O resultado seria apenas de 500px pois a variável $b está com valor inicial de zero.
Se você precisar resolver alguma conta ou converter algum número, provavelmente você irá usar funções, caso contrário use Mixins.
\nEu particularmente não uso muitas funções, tenho apenas algumas em meu arcenal, posso até listar elas aqui para vocês.
\n// Converte numeros para inteiro\n//\n@function parseInt($n) {\n @return $n / ($n * 0 + 1);\n}\n\n// remove a unidade deixando apenas o numero\n// strip-unit(10px) retorna apenas o numero 10\n//\n@function strip-unit($number) {\n @if type-of($number) == 'number' and not unitless($number) {\n @return $number / ($number * 0 + 1);\n }\n\n @return $number;\n}\n\n// Converte unidades px para em\n//\n$font-size-base: 16px;\n\n@function em($pixels, $context: $font-size-base) {\n @if (unitless($pixels)) {\n $pixels: $pixels * 1px;\n }\n\n @if (unitless($context)) {\n $context: $context * 1px;\n }\n\n @return $pixels / $context * 1em;\n}É isso ai moçada, se tiverem alguma dúvida comentem ai que reponderei em \"dois palitos\".
\nAbraço!
\nVamos continuar nossa série \"Conhecendo o pré-processador SASS\", mas agora falando de Variáveis.
\n\n\nSe você quer saber o que é o SASS e como instalar, por favor leia a parte 1 desse artigo aqui
\n
Se você está começando agora no mundo do desenvolvimento você precisa ter uma base de como funciona variáveis.
\nO conceito de variáveis no SASS é bem parecido com este na programação em geral.
\nDe acordo com o Google:
\n\n\nVariável é a característica de interesse que é medida em cada elemento da amostra ou população. Como o nome diz, seus valores variam de elemento para elemento. As variáveis podem ter valores numéricos ou não numéricos.\nGoogle.com (https://goo.gl/dlslou)
\n
Basicamente você cria um espaço na memória, da um nome pra ele e armazena um valor para ser usado em algum lugar ou ser manipulado de alguma forma.. é isso.
\nVamos testar o seguinte código:
\n$cor: #f00;\n\nbody {\n bakground-color: $cor;\n}Se você rodar sass --watch style.scss:style.css e visualizar seu HTML no navegador, você verá o fundo vermelho.
Isso aconteceu porque o a cor que estáva armazenada na variável $cor passou a ser o fundo da nossa tag <body>
Fácil não?!
\nPra quem \"manja dos parauês\" de programação sabe que existem tipos de variáveis.
\nSe levarmos em consideração que SASS também \"pode\" ser considerada uma linguagem de programação ela teria a Tipagem fraca, pois a variável pode ter o seu valor automaticamente alterado para outro tipo para possibilitar uma operação.
\nUma variável pode ser do tipo inteiro e no meio do caminho se tornar uma string, e vise-versa.
\nMas no SASS a coisa é um pouco diferente. Temos tipos próprios de CSS, que não precisam de \"aspas\" como string.
\n$mutable-var: '->'; // variavel do tipo string\n$mutable-var: 200; // variavel do tipo inteiro\n$mutable-var: 2.2; // variavel do tipo double\n$mutable-var: #fff; // variavel do tipo hexadecimal (para cores)\n$mutable-var: 150px; // variavel do tipo medida em pixel\n$mutable-var: 1em; // variavel do tipo Unidade relativa\n$mutable-var: 100%; // variavel do tipo porcentagem\n\nbody {\n width: $mutable-var;\n}Se você processar o código acima verá que o valor de width é de 100%, o SASS pegou automaticamente o valor setado na ultima linha.
body {\n width: 100%;\n}Pra falar a verdade o SASS aceita qualquer valor que não vai gerar erro nenhum 😊
\nVariável é algo muito útil no desenvolvimento com SASS, eu particularmente uso bastante esse recurso.
\nEu sempre crio um arquivo chamado variables.scss para agrupar as variáveis globais do meu projeto.
\nSe você for usar um determinado valor em vários lugares e/ou arquivos não exite em momento algum, crie uma variável e armazene esse valor, você vai me agradecer mais tarde.
\nAbraço!
\nNa minha opinião todo desenvolvedor web deveria conhecer algum pré-processador CSS, seja ele Less, SASS, Stylus ou qualquer outro.
Hoje vou começar uma série de artigos com algumas dicas sobre o pré-processador SASS... sei que existem muitos tutoriais e artigos bacanas por ai, mas eu vou explicar o meu ponto de vista sobre essa forma de escrever CSS.
\n\n\nUm pré-processador é um programa que recebe texto e efectua conversões léxicas nele. As conversões podem incluir substituição de macros, inclusão condicional e inclusão de outros ficheiros.\nGoogle.com (https://goo.gl/OeWJWB)
\n
Pense num pré-processador como uma nova linguagem para escrever CSS.
\nChame de tradutor de linguagem, ou de compilador.. não tem problema, tudo vira CSS no final.
\n\n\nSass is the most mature, stable, and powerful professional grade CSS extension language in the world.\nsass-lang.com
\n
Resumidamente, SASS é um pré-processador de CSS. Com ele você tem vários recursos que não existem nativamente no CSS, como:
\nCom ele você consegue organizar o seu CSS de forma modular, deixar cada componente em arquivos separados e usando @import importar todos em apenas um arquivo.
Usando herança e variáveis você esquece o famoso Ctrl+C e Ctrl+V.
Cara isso é magnífico, mesmo!
\nNosso amigo SASS é uma RubyGem então você precisa ter o Ruby instalado em seu computador.
\nA instalação é bem simples, tendo o Ruby instalado e funcionando basta rodar o comando abaixo:
\nsudo gem install sassSe nada falhar você já tem o SASS instalado em sua máquina, rode sass -v do seu terminal para certificar que tudo ocorreu bem.
Vamos criar um arquivo SASS para teste.
\nAbra o seu editor favorito, crie um novo arquivo com o seguinte código:
\n$cor: #006699;\n$bg: #f1f1f1;\n\nbody {\n background-color: $bg;\n font-size: 16px;\n}\n\na {\n color: $cor;\n\n &:hover,\n &:focus {\n text-decoration: none;\n border-top: 1px dashed $cor;\n }\n}Depois salve com a extensão .scss com o nome que preferir.. eu salvei como style.scss.
No terminal rode:
\nsass --watch style.scss:style.cssNo código acima nós executamos o SASS passando o parâmetro --watch para que ele fique assistindo nosso arquivo style.scss, assim a cada Ctrl+S que damos no arquivo ele executa e processa nosso CSS final.
O código processado ficou assim:
\n.box {\n background-color: #f1f1f1;\n font-size: 16px;\n}\n\n.box p {\n margin: 0;\n}\n\na {\n color: #006699;\n}\n\na:hover, a:focus {\n text-decoration: none;\n border-top: 1px dashed #006699;\n}Incrível não?!
\nEsse é só o começo de uma longa jornada com o Pré-processador SASS, logo vou explicar detalhes do código acima e muito mais.
\nAguardem..
\n