Sass+Compass, OU: Por que CSS puro nunca mais?!?

Sass+Compass OU: Por que CSS

puro nunca mais?!?

Olá!

twitter.com/alcidesqueiroz

github.com/alcidesqueiroz

is.gd/aqanso

is.gd/sideshowjs

alcidesqueiroz@gmail.com

HTML

(Conteúdo + Estilo)

www.cnn.com/US/OJ/

HTML

(Conteúdo)

CSS

(Estilo)

CSS 3

• Animations e Transitions

• Gradientes

• Box Sizing

• Border Images

• Media queries

• Backgrounds múltiplos

• CSS Columns

• 3D Transforms

• Box-shadow entre outros recursos...

Pré-processadores

No turning back!

HTML

(Conteúdo)

CSS

(Estilo)

Sass

Let’s play together!

sassmeister.com

Problema #1header{

width: 100%;

background-color: #555;

}

header h1{

color: #FFF;

}

header > ul li{

color: #DDD;

}

header nav a{

color: #AAF;

}

header nav a:hover{

color: #FFF;

}

This is not DRY!

Seletores Aninhados

header{

width: 100%;

background-color: #555;

h1{

color: #FFF;

}

> ul li{

color: #DDD;

}

nav a{

color: #AAF;

&:hover{

color: #FFF;

}

}

}

Problema #2aside{

background-color: #00B060;

}

em{

color: #FF4500;

}

Problema #2ul img{

/*...*/

opacity: 0.7;

/*...*/

}

.modal-mask{

/*...*/

opacity: 0.7;

/*...*/

}

Variáveis$base-color: #00B060;

$first-standout-color: #FF4500;

aside{

background-color: $base-color;

}

em{

color: $first-standout-color;

}

Variáveis$default-opacity: 0.7;

ul img{

/*...*/

opacity: $default-opacity;

/*...*/

}

.modal-mask{

/*...*/

opacity: $default-opacity;

/*...*/

}

Variáveis$dotted-border: dotted 1px #DDD;

$fastest-transition-duration: 150ms;

$default-border-radius: 3px;

$site-body-font-size: 1.4;

$title-font-family: 'Paytone One';

$default-label-separator: ':';

E quanto às variáveis

do CSS?!?!

Variáveis nativas do CSShtml {

var-base-color: #333;

}

body {

background-color: var(base-color);

}

Problema #3

.profile{

border-width: 0;

border-left: solid 1px #AAF;

border-right: dashed 4px #000;

}

Propriedades Aninhadas

.profile{

border: {

width: 0;

left: solid 1px #AAF;

right: dashed 4px #000;

}

}

Problema #4.profile{

border: solid 2px #222;

overflow: hidden;

color: #D22;

display: inline-block;

background-color: #FFF;

}

.corporative-profile{

border: solid 2px #222;

overflow: hidden;

color: #D22;

display: inline-block;

background-color: #DD2;

}

O que tem de errado?

• Código repetitivo

• Manutenibilidade

• CSS maior => maior load-time

Problema #4 V2.profile,

.corporative-profile {

border: solid 2px #222;

overflow: hidden;

color: #D22;

display: inline-block;

background-color: #FFF;

}

.corporative-profile {

background-color: #DD2;

}

O que tem de errado?

• Manutenibilidade: para caçar de quem um determinado seletor herda

• Manutenibilidade - parte 2: Os seletores filhos poluem o seletor da regra base:.profile,

.corporate-profile,

.student-profile,

.consultant-profile,etc.

Problema #4 V3 (CSS+HTML).profile{

border: solid 2px #222;

overflow: hidden;

color: #D22;

display: inline-block;

background-color: #FFF;

}

.corporative-profile{

background-color: #DD2;

}

<div class=“profile corporative-

profile”>…</div>

O que tem de errado?

• Não há clara relação de extensão no código CSS

• Uma certa transferência de lógica de estilização para o HTML

• Dificulta múltiplos níveis de herança

Herança.profile{

border: solid 2px #222;

overflow: hidden;

color: #D22;

display: inline-block;

background-color: #FFF;

}

.corporative-profile{

@extend .profile;

background-color: #DD2;

}

Herança Múltipla.detalhes{

border: dashed 3px #000;

}

.tile{

background-color: #2D2;

}

.ficha{

@extend .detalhes;

@extend .tile;

color: #FFF;

}

Herança Múltipla.detalhes{

border: dashed 3px #000;

}

.tile{

background-color: #2D2;

}

.ficha{

@extend .detalhes, .tile;

color: #FFF;

}

Herança - Placeholder Selectors

%teste{

color: blue;

}

.teste2{

@extend %teste;

font-weight: normal;

}

.teste3{

@extend %teste;

font-weight: bold;

}

Problema #5body {

font-size: 14px;

font-size: 1.4rem;

}

h1 {

font-size: 24px;

font-size: 2.4rem;

}

h2 {

font-size: 18px;

font-size: 1.8rem;

}

Problema #5::-webkit-input-placeholder {

color: #AAD;

}

::-moz-placeholder {

color: #AAD;

}

:-ms-input-placeholder {

color: #AAD;

}

input:-moz-placeholder {

color: #AAD;

}

Mixins@mixin rem-font-size($sizeValue) {

font-size: ($sizeValue * 10) + px;

font-size: $sizeValue + rem;

}

body{

@include rem-font-size(1.4);

}

h1{

@include rem-font-size(2.4);

}

h2{

@include rem-font-size(1.8);

}

Mixins@mixin placeholder-color ($color){

@include placeholder{

color: $color;

}

}

@mixin placeholder($selector: ''){

#{$selector}::-webkit-input-placeholder { @content; }

#{$selector}::-moz-placeholder { @content; }

#{$selector}:-ms-input-placeholder { @content; }

@if $selector == ""{

$selector: 'input';

}

#{$selector}:-moz-placeholder { @content; }

}

Mixins@include placeholder-color(#AAF);

Mixins – outros exemplos@mixin prefixify($property, $value){

-webkit-#{$property}: $value;

-moz-#{$property}: $value;

-o-#{$property}: $value;

#{$property}: $value;

}

Mixins – outros exemplos@mixin absolute-full-size($spacement: 0){

position: absolute;

top: $spacement;

bottom: $spacement;

left: $spacement;

right: $spacement;

}

Mixins – outros exemplos@mixin icon-font-size($size){

&:before{

font-size: $size;

}

}

Mixins – outros exemplos@mixin keyframes($name) {

@-webkit-keyframes #{$name} {

@content;

}

@-moz-keyframes #{$name} {

@content;

}

@-ms-keyframes #{$name} {

@content;

}

@keyframes #{$name} {

@content;

}

}

Cálculos

article[role='main']{

width: 600px / 960px * 100%; //62.5%

}

aside[role="complimentary"] {

width: 300px / 960px * 100%;//31.25%

}

Functions$content-width: 960px;

@function proportion($of, $relatedTo: $content-width){

@return $of / $relatedTo * 100%;

}

aside[role="complimentary"] {

width: proportion(300px);//31,25%

}

Functions$tile-side: 80px;

$tile-spacement: 5px;

@function tile-dimension($tiles-qty: 1){

@return $tiles-qty * $tile-side +

($tiles-qty - 1) * $tile-spacement;

}

@mixin tile($horizontal: 1, $vertical: 1){

width: tile-dimension($horizontal);

height: tile-dimension($vertical);

}

Problema #6

www.riobranco.ac.gov.br/

@imports Pré-processados

@import 'normalize-3.0.1';

@import 'compass-dependencies';

@import 'variables/all';

@import 'mixins/all';

@import 'font-face';

@import 'icon-fonts/all';

@import 'layout';

Exemplo real

//theme-modern-ui-classic.scss

@import 'theme-common-before';

@import 'themes/modern-ui-classic';

@import 'theme-common-after';

//_modern-ui-classic.scss

//Theme: Classic

//Base colors

$base-color: #2A75AE !default;

$neutral-color: #899CAB !default;

//Secondary colors

$first-standout-color: #DA4435 !default;

$second-standout-color: #38CE8F !default;

//Theme Common Imports

@import 'theme-imports.scss';

//_theme-imports.scss

@import '../variables/all';

@import '../compass-dependencies';

@import '../mixins';

@import '../font-face';

@import '../icon-fonts/all';

@import '../components/all';

@import '../layout';

@import '../button-icons';

E no fim das contas…

<link rel="stylesheet" href="stylesheets/main.css">

Manipulando cores

$base-color: #374676;

footer a{

color: lighten($base-color, 50); //#475b99

background: darken($base-color, 20); //#171d30

}

Manipulando cores

$base-color: #374676;

$base-color-light: lighten($base-color, 50);

$base-color-dark: darken($base-color, 20);

footer a{

color: $base-color-light;

background: $base-color-dark;

}

Manipulando cores

color: red + blue; //magenta

color: $base-color * 0.5; //#1b233b

color: $base-color * 2; //#6e8cec

color: $base-color / 10; //#05070b

color: $base-color - #333; //#041343

Manipulando cores

color: grayscale($base-color);//#575757

//10% preto, 90% branco

color: mix(black, white, 90); //#191919

color: transparentize(blue, 0.3); //#6e8cec

//Aumenta os canais R e G em 10% e reduz o canal B em 20%

color: scale-color(blue, $red: 10%,

$green: 10%, $blue: -20%)//=>#1919CC

@if, @else, @else if

$inverse-color: true;

.introduction{

background-color: $base-color;

@if $inverse-color{

color: #FFF;

}

}

@if, @else, @else if

@if $width == 'auto' {

//...

} @else if $width == 1 {

//...

} @else {

display: inline-block;

width: $width;

}

@for

@for $i from 1 through 4 {

.nivel-#{$i} {

font-size: 20px + (12px / $i);

}

}

//.nivel-1 { font-size: 32px; }

//.nivel-2 { font-size: 26px; }

//.nivel-3 { font-size: 24px; }

//.nivel-4 { font-size: 23px; }

@while$i: 1;

@while $i <= 5 {

.nivel-#{$i} { text-indent: 1cm * $i; }

$i: $i + 1;

}

.nivel-1 { text-indent: 1cm; }

.nivel-2 { text-indent: 2cm; }

.nivel-3 { text-indent: 3cm; }

.nivel-4 { text-indent: 4cm; }

.nivel-5 { text-indent: 5cm; }

@each

@each $carro in chevette, opala, kadett {

.detalhes-#{$carro} {

background-image: url('/images/#{$carro}.png');

}

}

//.detalhes-chevette{ background-image: url("/image/chevette.png");}

//.detalhes-opala{ background-image: url("/image/opala.png");}

//.detalhes-kadett{ background-image: url("/image/kadett.png");}

Inline comments for the win!

/*Por que isso?*/

//Por que não isso?

E o Compass?!?

Que tal substituir isso?

-webkit-transition: width 300ms ease;

-moz-transition: width 300ms ease;

-o-transition: width 300ms ease;

transition: width 300ms ease;

Por isso?

@include transition(width 300ms ease);

Ou que tal fazer isso:

background-image: inline-image('smile.gif');

E obter isso:

h1 {

background-image: url('data:image/gif;base

64,R0lGODlhDwAPAKIHACcFAP/xAP/lAP/YA//JAv//AA

AAAP///yH5BAEAAAcALAAAAAAPAA8AAANOeKrWvfC0Eoo

gD5paSxkEthheWQ6gwXRT0aSS2TZCupl4jZG4KVy0Cq8k

ANgIA8HQUoQZkMrfz1BTSaBKAIAKYyBR4JB19AyJxxFHZ

pEAADs=');

}

Compass is freaking awesome!

• Modular e Configurável

• CSS3 (Esqueça vendor-prefixes)

• CSS Reset

• Sprite Generator

• Ritmo vertical

• Clearfix

• compass stats

• e muito +

Rails, .NET, PHP, etc.

E a curva de

aprendizado?

OOCSS, ACSS,

SMACSS, BEM?!?

No problem!

Sass is CSS!

#somosTodosMacacosDeCodigo

#somosTodosDevs

twitter.com/alcidesqueiroz

github.com/alcidesqueiroz

is.gd/aqanso

is.gd/sideshowjs

alcidesqueiroz@gmail.com

Perguntas?