Merge pull request #29 from deverebor/docs/scss-and-sass-proposal

docs/scss-and-sass-proposal

Author: Novout

README.md

@@ -40,15 +40,15 @@ Os programas a seguir são necessários para estender, modificar e utilizar o pr
 
 ### Instalação
 
-Clone o repositorio
+Clone o repositório
 
-```sh
+```zsh
 git clone https://github.com/Novout/vue4noobs.git
 ```
 
 Rode o projeto:
 
-```js
+```zsh
 yarn && yarn dev
 ```
 
@@ -69,3 +69,4 @@ são **extremamente apreciadas**
 ## Colaboradores
 
 Giovane Cardoso - Developer [@NovoutT](https://twitter.com/NovoutT) - [email protected]
+Lucas Souza (@deverebor) - *Frontend Software Engineer at Juntos Somos Mais* - [Twitter](https://twitter.com/deverebor)

REFERENCES.md

@@ -1,13 +1,13 @@
-O projeto utilizou estes links como auxilio para o desenvolvimento do curso, e não sua cópia.
-
-[LifeCycle](https://alligator.io/vuejs/component-lifecycle/)
-
-[Load Error](https://alligator.io/vuejs/vue-async-components-load-error/)
-
-[Class and Styles](https://vuejs.org/v2/guide/class-and-style.html)
-
-[Async Components](https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components)
-
-[Mixins in Vue](https://levelup.gitconnected.com/how-to-use-mixins-in-vuejs-a40cc3fb4428)
-
-[BusEvent](https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860)
+# Referencias para a construção das seções
+
+**O projeto utilizou estes links como auxilio para o desenvolvimento do curso, e não sua cópia.**
+
+- [LifeCycle](https://alligator.io/vuejs/component-lifecycle/)
+- [Load Error](https://alligator.io/vuejs/vue-async-components-load-error/)
+- [Class and Styles](https://vuejs.org/v2/guide/class-and-style.html)
+- [Async Components](https://vueschool.io/articles/vuejs-tutorials/async-vuejs-components)
+- [Mixins in Vue](https://levelup.gitconnected.com/how-to-use-mixins-in-vuejs-a40cc3fb4428)
+- [BusEvent](https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860)
+- [Sass Guidelines](https://sass-guidelin.es/pt/) by *community*
+- [SCSS como você nunca viu](https://dev.to/deverebor/scss-como-voce-nunca-viu-1d99) by *@deverebor*
+- [Sass Basics](https://sass-lang.com/guide) by *Sass*

docs/tutorial/2-Conceitos/11-Pre-Processadores.md

@@ -2,25 +2,45 @@
 
 Nas seções de introdução, demos o exemplo que no **Vue** é possível utilizar pre-processadores de forma facilitada, agora iremos explicar como implementar:
 
-* Nas opções de criação do projeto manual usando o **VueCLI**, é possivel adicionar os pre-processadores diretamente por lá.
+* Nas opções de criação do projeto manual usando o **VueCLI**, é possível adicionar os pre-processadores diretamente por lá.
 
-## CSS
+## SCSS - SASS
 
-Vamos instalar primeiramente as dependencias necessárias:
+Vamos instalar primeiramente as dependências necessárias:
 
-`yarn add sass-loader node-sass --save-dev`
+```zsh
+ yarn add sass-loader sass --save-dev
+```
 
 Dessa forma, podemos agora utilizar o sass:
 
-```css
+```vue
 <style lang="sass">
 
 </style>
 ```
 
+Para essa estilização se manter apenas no seu escopo, é necessário que você adicione o `scoped` no seu `style`:
+
+```vue
+<style lang="sass" scoped>
+
+</style>
+```
+
+Dessa maneira o estilo que for escrito aqui não passara para outro componente.
+
+Caso a estilização do seu componente se torne grande ou você deseja organizar melhor seus estilos é possível criar um arquivo `.scss` adicionamos como dependência:
+
+```vue
+<style src="./MyComponentStyle" lang="sass" scoped />
+```
+
 ## PugJS
 
-`yarn add pug --save-dev`
+```zsh
+  yarn add pug --save-dev
+```
 
 ```html
 <template lang="pug">
@@ -31,4 +51,4 @@ main
 
 Na próxima seção, iremos para as nossas considerações de tudo oque aprendemos sobre os conceitos base do **Vue**, te vemos lá!
 
-[Próxima Seção](./12-Considerações.md)
+[Próxima Seção](./12-SCSS.md)