Sass+Compass OU: Por que CSS puro nunca mais?!?
May 19, 2015
Sass+Compass OU: Por que CSS
puro nunca mais?!?
Olá!
twitter.com/alcidesqueiroz
github.com/alcidesqueiroz
is.gd/aqanso
is.gd/sideshowjs
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
Perguntas?