Pa: : M a M  N íO 

SEÉ

H: .W% J- W L W I f. ;  <

 .
WÍHEUS COSTA
 .  . .Aʧ. .|  FH Vai»  T:  

http: //motheusogcosto. com

 

_fã 'x
.  -J g À 
 W,  à FDG INTERIOR Hgqabg

...
COMO FUNCIONAM

PRÉ-PROCESSADORES css
IHE RPZ,  SUSSH? 
QQ TH ROLHNDO? 

 

E HÍ RHPHZ,  TUDO BEM? 
o QUE É QUE ESTÉ HCONTECENDO?
SAIBA OOS

RECURSOS
.pa1 í
. fi1ha í
. neta (3
[c1ass*= "box"] í
&: [c1ass*= "-dark"], 
&: pseudo-e1em í)

E
mb. .. -. 
E! ... 
É
. 
O!  a
O. .

. Lrr.
[c1ass*= "box"] í
. ie-fix & í
1
E
@var:  LESS; 
$var =  Sty1us

$var:  ;
@headings:  hl,  h2, h3;
$headings =  hl,  h2, h3

$headings:  ;
//  Assim pfv

/ * Assim não!  */
& when:  (LESS = = LESS) í]

if Sty1us = = Sty1us [3
@if = = f]
.1ess-ph1der() (3
$sty1us-ph1der [1

% fl
a» 

r'a: :-“'; * *() (3
CtyT “Is-auf xi r O

@mfxia  =  -  a  (3
[Í Ei É¡ É* É*  "FI f* r¡ r, §'. ::: ¡:.  m _r-'J

skins:  fírãrgcíiü 1_›“J-O. «”
FOAMÉWORKS
O   u IOLIOIECA  

  DE MIXINS 

FTW!
?x- ea
a a  i” (J í
j
(less3 + É

s. 

HTTPJ/ IESSHAIMADEBYSOURCECOM/
List of mixins: 

1.
2
3
4
5.
6
7
8
9

10.
11 . 
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

align-co...
Aya. : + 

| -ITI'P: //NIBS'I'YLUS/
mixins

Gradient

Position

Clearfix

Border Fladius
Responsive Images
Ellipsis

Reset

Shadow Stroke

Border
Size

box-sh...
aterrar;  lg# l' 1:15# Intl* a
MIXINS

Animation

Animation Delay
Animation Direction
Animation Duration
Animation F ll Mode
Animation lteration Count
An...
IA PRONÍO MEU

WORKF LOW?
“í

MDS
Semantic grid helper mixins

HTFPSJ/ GITHUBCOM/ IAMBACON/ SEMANHC-GRID-HELPER
.sotürldlflldtfnaargocolunin.  dcsktopcolUnlls,  hblotcolUnlh.  mobllocolUnlh)

sets the column units for four common brea...
:Í/ .ÍElÊFAí E333'
Usage Example

<html>
<head>
<link rel= "stylesheet" href= "foo. css">
</ head>
<body>
<section>
<aside›Sidebar</ aside›
<...
Bourbon

NEAT

I-HTPJ/ NEAIBOURBONJO/
@include Outer-container; 

! include span-columns ( 6 );  !include span-columns( 6 ): 

Multiple rows

@include enter-con...
P J ll i ll li . E  í 

^
C©DEPEN

HTI'P: //CODEPEN. IO/
li] : um m ¡Li  w i 'mia  [Lin

 

. 
; é
l'_1
ill
-w
ill

 

, _ __
 o  K  i ; dama l 'Í3', t't= i¡nu_gs.  › ! It-uniu H ...
ffm-. iinugs-

 

 

m ' . 
S'fífí'

 

.33 : IIML I i-
: IIML . lawabtqílyin ÉHÍEWIIH

CSS Pre processor 0
Stylus

 

CSS...
C@DEPEN

0

HTM L CSS

Save 'ft Settings

JavaScript Behavior

 

r Need an add-on7 l

3t'l', l--1¡›_«Í-)›! ~_'i§')| -_k*
...
HTWz/ /CODÉPENÉEO/ MÀTHEUSÀGCOSTÀ/
hi3¡ ELÁÍiS-l* LÍ* 5§7-i_': ”“: 

@Blá : É e
pra mim tanto faz, se é less, stylus ou sass
pra mim tanto faz, se é less, stylus ou sass
pra mim tanto faz, se é less, stylus ou sass
pra mim tanto faz, se é less, stylus ou sass
pra mim tanto faz, se é less, stylus ou sass
pra mim tanto faz, se é less, stylus ou sass
Próximos SlideShares
Carregando em…5
×

pra mim tanto faz, se é less, stylus ou sass

556 visualizações

Publicada em

Pré-processadores estão aí, mas como tirar o proveito máximo deles? Nessa talk você vai aprender como aprimorar todas as features desses caras, independente da sua escolha.

Publicada em: Educação
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
556
No SlideShare
0
A partir de incorporações
0
Número de incorporações
41
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

pra mim tanto faz, se é less, stylus ou sass

  1. 1. Pa: : M a M N íO SEÉ H: .W% J- W L W I f. ; < Â .
  2. 2. WÍHEUS COSTA . . .Aʧ. .| FH Vai» T: http: //motheusogcosto. com _fã 'x . -J g À W, à FDG INTERIOR Hgqabg CORAÇÃO »www-www
  3. 3. COMO FUNCIONAM PRÉ-PROCESSADORES css
  4. 4. IHE RPZ, SUSSH? QQ TH ROLHNDO? E HÍ RHPHZ, TUDO BEM? o QUE É QUE ESTÉ HCONTECENDO?
  5. 5. SAIBA OOS RECURSOS
  6. 6. .pa1 í . fi1ha í . neta (3
  7. 7. [c1ass*= "box"] í &: [c1ass*= "-dark"], &: pseudo-e1em í) E
  8. 8. mb. .. -. E! ... É . O! a O. . . Lrr.
  9. 9. [c1ass*= "box"] í . ie-fix & í 1 E
  10. 10. @var: LESS; $var = Sty1us $var: ;
  11. 11. @headings: hl, h2, h3; $headings = hl, h2, h3 $headings: ;
  12. 12. // Assim pfv / * Assim não! */
  13. 13. & when: (LESS = = LESS) í] if Sty1us = = Sty1us [3 @if = = f]
  14. 14. .1ess-ph1der() (3 $sty1us-ph1der [1 % fl
  15. 15. a» r'a: :-“'; * *() (3 CtyT “Is-auf xi r O @mfxia = - a (3
  16. 16. [Í Ei É¡ É* É* "FI f* r¡ r, §'. ::: ¡:. m _r-'J skins: fírãrgcíiü 1_›“J-O. «”
  17. 17. FOAMÉWORKS
  18. 18. O u IOLIOIECA DE MIXINS FTW!
  19. 19. ?x- ea
  20. 20. a a i” (J í
  21. 21. j
  22. 22. (less3 + É s. HTTPJ/ IESSHAIMADEBYSOURCECOM/
  23. 23. List of mixins: 1. 2 3 4 5. 6 7 8 9 10. 11 . 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. align-conten! flexbox . alígn-items flexbox . alígn-self flexbox . animation animation-delay . animation-direction . animation-duration . anímation-fiII-mede . animation-iteration-count animation-name animation-plawstate anímation-timíng-function appearance backface-visibility background-clip background-image background-origin background-size blur f i lte r bOrder-bOttOmJeft-radius border-bottom-right-radius border-image bordervradius border-top-left-radius border-top-right-radius box-shadow box-sízíng 28. brightness filter 29. calc 30. column-count 31. column-gap 32. column-rule 33. column-width 34. celumns 35. contrast filter 3G. display flexbex 37. drop-shadow filter 38. filter 39. flex flexbex 40.f| ex-basís flexbox rttflex-dírectien flexbex 42. flex-grow flexbox 43.fIex-shrink flexbox 44.fIex-wrap flexbox 45. font-face 46. grayscale filter 47. hue-rotate filter 48. hyphens 49. invert filter 50. justify-content flexbox 51. keyframes 52.opac¡ty 53. order 54. perspective 55. perspective-origin 56. placeholder 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75 75 7 7 78 79 80 B1 82 83 B4 85 86 rotate transform rotatead transform rotateX transferm rotateY transform- rotateZ transfonn saturate filter scale transferm scale3d transform scaIeX transform scaIeY transform scaIeZ transform selection sepia filter size width, height skew transform skewX transform skewY transform transform . transform-origín . transform-style . transition . transition-delay . transitien-duratien . transition-property . transition-timing-functíon . translate transferm . trans| ate3d transtorn- . translateX transform . transIateY transferm . transIateZ transform
  24. 24. Aya. : + | -ITI'P: //NIBS'I'YLUS/
  25. 25. mixins Gradient Position Clearfix Border Fladius Responsive Images Ellipsis Reset Shadow Stroke Border Size box-shadow radial-gradient user-select column-count column-gap column-rule column-rule-color column-rule-width column-rule-style column-width background-size transform border-image transition transition-property transition-duration transition-tim¡ng-function transition-delay backface-visibility opacity box-sizing box-orient box-flex box-flex-group box-align box-pack box-direction animation animation-name animation-duration animation-delay animation-direction animation-iteration-count animation-timing-function animation-pIay-state animation-fill-mode border-image hyphens appearance
  26. 26. aterrar; lg# l' 1:15# Intl* a
  27. 27. MIXINS Animation Animation Delay Animation Direction Animation Duration Animation F ll Mode Animation lteration Count Animation Name Animation Play State Animation Timing Function Appearance Backface Visibzlily Background Background Image Border Image Sex-Shane Calc Columns Filter Flexbox Font Face Font Feature Settings HIDPI Media Query Hyphens Image Rendering Keyframes Linear Gradient Perspective Placeholder Radial Gradient Selection Text Decoration Transform Transitions User Select FUNCTIONS Flex-Gee Grid-Width Linear Gradient Modular Scale Pixel to Ems Pixel to Rems Strip Unlts Tint 8. Shade Unpack ADD-OMS Border Color Border Radius Border Style Border Wldth Buttees Buttons (variable) Clearilx Direclional Property Ellipsis Font Stacks Hde Text Margin Padding Position Prefixer Betina Image Slze Text Inputs Timlng Functions Triangle Word Wrap SÉFHNGS Global Asset Pipeline Global Prefixer Global EM Base
  28. 28. IA PRONÍO MEU WORKF LOW?
  29. 29. “í MDS
  30. 30. Semantic grid helper mixins HTFPSJ/ GITHUBCOM/ IAMBACON/ SEMANHC-GRID-HELPER
  31. 31. .sotürldlflldtfnaargocolunin. dcsktopcolUnlls, hblotcolUnlh. mobllocolUnlh) sets the column units for four common breakpoints using piedefined column widths. gutter widths and column numbers. Example: / / Sets column units for 4 breakpoints. // 6 Columns, 8 Columns, 1 cclumns L 3 Columns. .col1 ( #grid › . setüridwidthslõ, B, 1, 3); l . extraLameGrMmlts. pushoffset, pulloflset) Sets the column units, push and pull offset for the predeñned ext ra large mediequsry breakpoim. Example: / / Sets column units for extra large breakpoint. // 3 Columns, push offset 1, pull offset 0. . coll l #grid › . extraLargeGridB, 1, O); l . desktopGddlunits. pushOffeef. pUIlOffset) Sets the column units, push and pull offset for the prsdsfined desktop mediaqusry bieakpoint. Example: / / Sets column units for desktop breakpoint. // 3 Columns, push offset 1, pull offset 0. . coli l #grid › . desktopGridl3, 1, O); i
  32. 32. :Í/ .ÍElÊFAí E333'
  33. 33. Usage Example <html> <head> <link rel= "stylesheet" href= "foo. css"> </ head> <body> <section> <aside›Sidebar</ aside› <article>Content</ article› </ section> </ b0dy> </ html> @import 'jeet' editl) section center() aside col(1/3) article col(2/3)
  34. 34. Bourbon NEAT I-HTPJ/ NEAIBOURBONJO/
  35. 35. @include Outer-container; ! include span-columns ( 6 ); !include span-columns( 6 ): Multiple rows @include enter-container; (1) @include apan-coiumnslll); E include omega( ); @include span- ! include span-coiumnsuo); columnslz); @include omega( ); @include span- @include span-columnsw); columnslll): @include omega( );
  36. 36. P J ll i ll li . E í ^
  37. 37. C©DEPEN HTI'P: //CODEPEN. IO/
  38. 38. li] : um m ¡Li w i 'mia [Lin . ; é l'_1 ill -w ill , _ __ o K i ; dama l 'Í3', t't= i¡nu_gs. › ! It-uniu H #leur-lim I "' : uz-talUaun¡: (I-l~gi¡a| ¡v~i'. 'i= (=in. llnumvllule. É]
  39. 39. ffm-. iinugs- m ' . S'fífí' .33 : IIML I i- : IIML . lawabtqílyin ÉHÍEWIIH CSS Pre processor 0 Stylus CSS Base H Normalize Reset 9 Neither Vendor Prefixing B Autoprefixer Preñxfree »à Nelther Add External css 9 https. Hyourwebsitecom/ stylecss http: //codepenio/ username/ pen/ aBcDef I-z-talvzii-HKI-lmgi¡= i¡¡'-k1'. 'i=1=is lll›1ra»f›l'¡lllcn
  40. 40. C@DEPEN 0 HTM L CSS Save 'ft Settings JavaScript Behavior r Need an add-on7 l 3t'l', l--1¡›_«Í-)›! ~_'i§')| -_k* lan , nar-Jisuma-u. .!Marina-lu¡i1¡ramal¡l¡: a(u: I-¡Âuuul! mit-dinnlemnclilanntvzi -Ílagi-m-, lqaigu @import 'nib'; @import 'jeet' ! situa-a ? l @In-narinas @lunar fIEK-illil-i- "Vlz-In-: reimiráítnuui Zi Qhulidsiiãifxáê* @Iutqnnnga duma'. : XÂÍÉSÍQÃCIHUIEÚ/ ÉÊ ' | 'HM Log ln CSS Slgñ Up
  41. 41. HTWz/ /CODÉPENÉEO/ MÀTHEUSÀGCOSTÀ/
  42. 42. hi3¡ ELÁÍiS-l* LÍ* 5§7-i_': ”“: @Blá : É e

×