SlideShare uma empresa Scribd logo
Funcionalidades do SASS
Entenda como usá-las
Olá eu sou a Laís :)
Laís Lima, 19 anos
Full Stack @ Mercado Orgânico
facebook.com/lalizita98
laislima98@hotmail.com
Pré Processadores
GULP.JS
Automatizador de tarefas
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.
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/'));
});
https://github.com/laislima98/gulpreadyt
ouse
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
#mobile_top_menu_wrapper .top-menu
.sub-menu ul[data-depth=”2”] li a{
padding-left: 1.25em;
}
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;
}
}
}
}
Seletores Avançados
&
Seletores parentais
.darth-vader{
color:red;
.luke &{
display:block;
}
}
Compila para:
.darth-vader{
color:red;
}
.darth-vader .luke .darth-vader{
display:block;
}
https://codepen.io/laislima/pen/pdyMqz
BEM
Block, Element and
Modifier
<div class=”block”>
<div class=”block__element”>
<div
class=”block__element
block__element--modifier”
></div>
</div>
</div>
.social-link
.social-link__icon
.social-link__title
.social-link__description
.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>
&
Continua regras!
.darth-vader{
color:red;
&__filho{
display:block;
}
}
Compila para:
.darth-vader{
color:red;
}
.darth-vader__filho{
display:block;
}
https://codepen.io/laislima/pen/OOXLbY
Menu
https://codepen.io/laislima/pen/wPJyBe
Problemas...
Propriedades
aninhadas
Atalhos para propriedades
que estão em “namespaces”
.texto{
font{
family:fantasy;
size:30px;
weight: bold;
}
}
Compila para:
.texto{
font-family: fantasy;
font-size:30px;
font-weight: bold;
}
Placeholders e
Extend
Estende os seletores
.espaco{
padding:50px 30px;
}
.sessao{
@extend .espaco;
}
p{
@extend .espaco;
}
Compila para:
.espaço, p, .sessao{
padding:50px 30px;
}
%
Placeholders
%titulo{
color: #ff3;
font-size:30px;
font-weight: bold;
}
Compila para…
NÃO COMPILA!
% → @extends
%espaco{
padding:20px 0px;
}
.section{
@extend %espaco;
}
.card{
@extend %espaco;
background: #fafafa;
}
Compila para:
.section, .card{
padding: 20px 0px;
}
.card{
background: #fafafa;
}
#{ }
$name: footer;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}Interpolação
“encaixar valores dentro
de outros valores”
Interpolação
$description = “top”;
echo “as mina são” . $description . “!”;
$description = “top”;
echo “as mina são ${description}!”;
Compila para:
p.footer{
border-color: #ff3;
}
????
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;
}
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!"; }
Tá, vamos ver tudo isso na prática?
Github do site com
passarinhos
https://github.com/laislima98/funcionalidades_
divertidas
Fontes
tableless.com.br
sass-lang.com
css-tricks.com
gulpjs.com
Livro CSS Eficiente - Tárcio Zemel
Ferreira Studio (youtube)

Mais conteúdo relacionado

Semelhante a Funcionalidades do SASS

Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
Bruno Said
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
Altair Borges
 
Pre vs Pos
Pre vs PosPre vs Pos
Pre vs Pos
Nath Paiva
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
Devmedia
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
Cezinha Anjos
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
Marcio Romu
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
Renato Galvão
 
Erick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPressErick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPress
iMasters
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-end
Cezar Luiz
 
iMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPressiMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPress
Erick Belluci Tedeschi
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
Pedro Sousa
 
J query
J queryJ query
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
Wellington Dutra
 
Php 07 Cakephp
Php 07 CakephpPhp 07 Cakephp
Php 07 Cakephp
Regis Magalhães
 
Alo mundojpa
Alo mundojpaAlo mundojpa
Alo mundojpa
Sonia Góes
 
Alo mundojpa
Alo mundojpaAlo mundojpa
Alo mundojpa
Sonia Góes
 

Semelhante a Funcionalidades do SASS (20)

Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
 
Pre vs Pos
Pre vs PosPre vs Pos
Pre vs Pos
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Devmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end FoundationDevmedia - Conhecendo o framework front-end Foundation
Devmedia - Conhecendo o framework front-end Foundation
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
Agilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASSAgilizando o desenvolvimento web com SASS
Agilizando o desenvolvimento web com SASS
 
Erick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPressErick Belluci Tedeschi - Segurança em WordPress
Erick Belluci Tedeschi - Segurança em WordPress
 
The Flash no front-end
The Flash no front-endThe Flash no front-end
The Flash no front-end
 
iMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPressiMasters Intercon Dev WordPress - Segurança em WordPress
iMasters Intercon Dev WordPress - Segurança em WordPress
 
Workshop Ruby on Rails dia 2 ruby-pt
Workshop Ruby on Rails dia 2  ruby-ptWorkshop Ruby on Rails dia 2  ruby-pt
Workshop Ruby on Rails dia 2 ruby-pt
 
J query
J queryJ query
J query
 
CSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEMCSS com SASS e SMACSS faz BEM
CSS com SASS e SMACSS faz BEM
 
Php 07 Cakephp
Php 07 CakephpPhp 07 Cakephp
Php 07 Cakephp
 
Alo mundojpa
Alo mundojpaAlo mundojpa
Alo mundojpa
 
Alo mundojpa
Alo mundojpaAlo mundojpa
Alo mundojpa
 

Funcionalidades do SASS