O documento discute as funcionalidades do pré-processador SASS, incluindo variáveis, seletores aninhados, placeholders, extends e mixins. Também aborda o automatizador de tarefas Gulp.js e como configurá-lo para processar arquivos SCSS.

1. Funcionalidades do SASS
Entenda como usá-las

2. Olá eu sou a Laís :)
Laís Lima, 19 anos
Full Stack @ Mercado Orgânico
facebook.com/lalizita98
laislima98@hotmail.com

3. Pré Processadores

4. GULP.JS
Automatizador de tarefas

5. Como o Gulp
funciona?
var sass =
require('gulp-sass');
Na raiz do projeto, ou do
local onde vão ocorrer as
instalações do NPM, vamos
ter um arquivo chamado
“gulpfile.js”
O “gulp-sass” é um
intermediador, ele vai
cuidar da chamada e do
processamento para nós.

6. gulp.task
Com o “gulp.task” definimos uma
tarefa nova ao nosso automatizador.
A sintaxe é Javascript, e o
aprendizado é bem simples.
No exemplo ao lado, temos a task que
processará os nossos arquivos SCSS
que serão contidos/incluidos dentro
de main.scss, e serão concatenados
em um só arquivo.
gulp.task('styles', function () {
console.log('Sass is
compiling...');
gulp.src('scss/main.scss')
.pipe(plumber())
.pipe(sass({
style: 'compressed'
}))
.pipe(notify("Sass is compiled"))
.pipe(gulp.dest('../assets/css/'));
});

7. https://github.com/laislima98/gulpreadyt
ouse

8. Variáveis
SASS
$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
body {
color: $mainColor;
border: 1px $borderStyle
$mainColor;
max-width: $siteWidth;
}
LESS
@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
body {
color: @mainColor;
border: 1px
@borderStyle @mainColor;
max-width:
@siteWidth;
}
Stylus
mainColor = #0982c1;
siteWidth = 1024px;
$borderStyle =
dotted;
body
color mainColor
border 1px
$borderStyle
mainColor
max-width
siteWidth

10. #mobile_top_menu_wrapper .top-menu
.sub-menu ul[data-depth=”2”] li a{
padding-left: 1.25em;
}

11. CSS vs SCSS
CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
SCSS
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
}
}

12. Seletores Avançados

13. &
Seletores parentais
.darth-vader{
color:red;
.luke &{
display:block;
}
}

14. Compila para:
.darth-vader{
color:red;
}
.darth-vader .luke .darth-vader{
display:block;
}
https://codepen.io/laislima/pen/pdyMqz

15. BEM
Block, Element and
Modifier
<div class=”block”>
<div class=”block__element”>
<div
class=”block__element
block__element--modifier”
></div>
</div>
</div>

16. .social-link
.social-link__icon
.social-link__title
.social-link__description

17. .block{
background:blue;
width:330px;
height:150px;
&__element{
background:#fff;
width:250px;
height:100px;
&--modifier{
background:pink;
width:230px;
height:80px;
}
}
}
<div class=”block”>
<div class=”block__element”></div>
<div class=”block__element
block__element--modifier”></div>
</div>

18. &
Continua regras!
.darth-vader{
color:red;
&__filho{
display:block;
}
}

20. Compila para:
.darth-vader{
color:red;
}
.darth-vader__filho{
display:block;
}
https://codepen.io/laislima/pen/OOXLbY

21. Menu
https://codepen.io/laislima/pen/wPJyBe

22. Problemas...

23. Propriedades
aninhadas
Atalhos para propriedades
que estão em “namespaces”
.texto{
font{
family:fantasy;
size:30px;
weight: bold;
}
}

24. Compila para:
.texto{
font-family: fantasy;
font-size:30px;
font-weight: bold;
}

25. Placeholders e
Extend
Estende os seletores
.espaco{
padding:50px 30px;
}
.sessao{
@extend .espaco;
}
p{
@extend .espaco;
}

26. Compila para:
.espaço, p, .sessao{
padding:50px 30px;
}

27. %
Placeholders
%titulo{
color: #ff3;
font-size:30px;
font-weight: bold;
}

28. Compila para…
NÃO COMPILA!

29. % → @extends
%espaco{
padding:20px 0px;
}
.section{
@extend %espaco;
}
.card{
@extend %espaco;
background: #fafafa;
}
Compila para:
.section, .card{
padding: 20px 0px;
}
.card{
background: #fafafa;
}

30. #{ }
$name: footer;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}Interpolação
“encaixar valores dentro
de outros valores”

31. Interpolação
$description = “top”;
echo “as mina são” . $description . “!”;
$description = “top”;
echo “as mina são ${description}!”;

32. Compila para:
p.footer{
border-color: #ff3;
}

33. ????

37. Mixins
É tipo função...
@mixin espaco{
padding:20px 0px;
}
.classe{
@include espaco
}
.objeto{
background:#f33;
@include espaco;
}
##output##
.classe{
padding:20px 0px;
}
.objeto{
background:#f33;
padding:20px 0px;
}

38. Mixins com parâmetros e interpolação
@mixin firefox-message($selector) {
body.firefox #{$selector}:before
{
content: "Hi, Firefox users!";
}
}
@include
firefox-message(".header");
body.firefox .header:before {
content: "Hi, Firefox users!"; }

39. Tá, vamos ver tudo isso na prática?

40. Github do site com
passarinhos
https://github.com/laislima98/funcionalidades_
divertidas

41. Fontes
tableless.com.br
sass-lang.com
css-tricks.com
gulpjs.com
Livro CSS Eficiente - Tárcio Zemel
Ferreira Studio (youtube)