CSS preprocessing has won.

- CHRIS EPPSTEIN

La question n'est 

plus si ? mais lequel ?

Forcément...

Mais Sass ne fait pas tout.

(Désolé pour ceux qui y croyaient...)

Agencer

Architecturer

Construire

main.css

Pas très pratique...

main.scss

C'est mieux, mais pas plus pratique.

 Mode bazar 

sass/
|
|- main.scss 
|- layout.scss 
|- typography.scss
|- grid.scss
|- print.scss
|- variables.scss
|- mixins.scss
|- responsive.scss
|- home.scss
|- contact.scss
|- carousel.scss
|- bootstrap.scss

 Mode supermarché 

sass/ 
| 
|– base/ 
|   |– _reset.scss
|   |– _typography.scss
| 
|– components/ 
|   |– _carousel.scss
|   |– _dropdown.scss
| 
|– helpers/ 
|   |– _variables.scss
|   |– _mixins.scss
|   |– _helpers.scss
| 
|– layout/ 
|   |– _grid.scss      
|   |– _header.scss
|   |– _footer.scss
|   |– _sidebar.scss
|
|– pages/ 
|   |– _home.scss
|   |– _contact.scss
|
|– vendors/ 
|   |– _bootstrap.scss
|   |– _jquery-ui.scss
| 
`– main.scss

On segmente autant que nécessaire

du moment que ça a du sens pour le projet.

base/

reset.scss

typography.scss

...

layout/

grid.scss

header.scss

footer.scss

sidebar.scss

...

components/

carousel.scss

navigation.scss

dropdown.scss

buttons.scss

media.scss

thumbnail.scss

...

pages/

home.scss

contact.scss

quizz.scss

...

vendors/

bootstrap.(s)css

jquery-ui.(s)css

...

Utils/

placeholders.scss

functions.scss

variables.scss

helpers.scss

mixins.scss

...

themes/

admin.scss

main.scss

@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";
 
@import "vendors/bootstrap";
@import "vendors/jquery-ui";
 
@import "base/reset";
@import "base/typography";
 
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
 
@import "components/carousel";
@import "components/buttons";
@import "components/cover";
@import "components/dropdown";
 
@import "pages/home";
@import "pages/contact";

Une interface

=

des fondations

+

des composants

+

un theme

un composant 

=

une structure sémantique

+

Une apparence

Exemples
de composants

messages informatifs

Erreur, merci de faire quelque chose !

Tout est OK, veuillez circuler.

Vous devriez peut-être faire attention.

Petite information...

Système de notation

lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/

STEP WIZARD

1. Cart
2. Authentication
3. Delivery
4. Payment

configuration

exportable

organisée

maintenable

editable

Tout ce qui est susceptible

 de faire l'objet 

d'une modification 

doit être mis en variable.

Exemple : marges (padding / margin), couleurs, bordures, ...

exemple

$slider-space: 1em;
$slider-color: #666;
$slider-border: false;
$slider-speed: 3s;
$slider-transition: 150ms ease-in-out; 

Map Sass 3.3

$slider: (
  space: 1em,
  color: #666,
  border: false,
  speed: 3s,
  transition: 150ms ease-in-out
); 

BEM

Block Element Modifier

Exemple

.slider {
  overflow: hidden;
  transition: $slider-transition;
}

.slider--home {
  background: $slider-color;
}
    
.slider__slide {
  float: left;
} 

.slider__slide--full {
  background-size: cover;
}

BEM + Sass 3.3

.block {
    ...
    &--modifier {
        ...
    }
    
    &__element {
        ...
    
        &--modifier {
            ...
        }
    }
}

Mais... 

Ca empêche la recherche.

C'est moins lisible.

Decortiquons
un composant

Vous allez voir...

C'est hyper simple !

Mais il faut juste faire attention.

A ne pas faire n'importe quoi !

http://www.sitepoint.com/sass-component-10-minutes/

La configuration

$message-types: (
  (error    #b94a48)
  (valid    #468847)
  (warning  #c09853)
  (info     #3a87ad)
);

map Sass 3.3

$message-types: (
  error   :  #b94a48,
  valid   :  #468847,
  warning :  #c09853,
  info    :  #3a87ad
);

Les styles communs

%message {
  padding: .5em;
  margin-bottom: .5em;
  border-radius: .15em;
  border: 1px solid;
}

Placeholders

==

concatenation des sélecteurs

Les styles spécifiques

@mixin message($color) {
  // On inclue les styles de base
  @extend %message;
  
  // Puis les styles spécifiques au type
  color: $color;
  border-color: lighten($color, 20%);
  background-color: lighten($color, 40%);
}

Mixins

==

arguments

La génération des styles

@each $message-type in $message-types {
  $type  : nth($message-type, 1);
  $color : nth($message-type, 2);
 
  .message-#{$type} {
    @include message($color);
  }
}

avec Sass 3.3

@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

All in one !

$message-types: (
  error : #b94a48,
  warn  : #c09853,
  valid : #468847,
  info  : #3a87ad
);
 
%message {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}
 
@mixin message($color) {
  @extend %message;
  color: $color;
  border-color: lighten($color, 20%);
  background-color: lighten($color, 38%);
}
 
@each $type, $color in $message-types {
  .message-#{$type} {
    @include message($color);
  }
}

Le CSS résultant

.message-error, .message-warn, .message-valid, .message-info {
  padding: .5em;
  margin: .5em;
  border-radius: .15em;
  border: 1px solid;
}

.message-error {
  color: #b94a48;
  border-color: #d59392;
  background-color: #efd5d4;
}

.message-warn {
  color: #c09853;
  border-color: #dbc59e;
  background-color: #f4ede1;
}

.message-valid {
  color: #468847;
  border-color: #7aba7b;
  background-color: #b6dab7;
}

.message-info {
  color: #3a87ad;
  border-color: #7ab5d3;
  background-color: #bfdcea;
}