http://emmanuelpelletier.com/sass-le-super-css

Sass (et un peu Compass) :
Le Super CSS




Par @Leimina pour les Human Talks Angers janvier 2013, fait avec reveal.js.

Kékecékesass ? (LOLILOL tro maran²²²)

  • Du CSS qui veut se la jouer langage de programmation
    • variables
    • fonctions
    • opérations : + - / * %
    • conditions : if else
    • boucles : for while each
    • "héritage"
    • ... etc, mais c'est déjà pas mal
  • aide notamment à :
    • écrire plus rapidement son code
    • rendre plus maintenable son code
    • connaître la zen attitude

Installation : gem install sass


Utilisation

Sass n'intervient que sur votre machine durant le développement

  • sass --watch style.scss:style.css
  • L'outil en ligne de commande traduit votre fichier Sass rempli de trucs cools en un fichier CSS normal à chaque sauvegarde

Partials

  • Organisez votre code en plusieurs fichiers : _base.scss, _layout.scss, _mixins.scss, etc
  • Dans un fichier styles.scss, importez les : 
    @import 'mixins';
@import 'base';
@import 'layout';
  • Résultat, un seul fichier css est généré : styles.css

Variables

Sass

$main-color: black;
$main-width: 960px;

#contenu {
	color: $main-color;
	width: $main-width;
}

#osef {
	color: invert($main-color);
	background: $main-color;
	
	position: absolute;
	width: $main-width * 0.6;
}

Variables

CSS généré

#contenu {
  color: black;
  width: 960px; }

#osef {
  color: white;
  background: black;
  position: absolute;
  width: 576px; }

Imbrication de sélecteurs

Sass

#contenu {
	padding: 10px;

	a {
		text-decoration: underline;
		color: pink;

		&:hover, &:focus {
			text-decoration: none;
		}
	}
}

Imbrication de sélecteurs

CSS généré

#contenu {
  padding: 10px;
}
#contenu a {
  text-decoration: underline;
  color: pink;
}
#contenu a:hover, #contenu a:focus {
  text-decoration: none;
}

Mixins (≃ Fonctions)

Sass

@mixin simple-shadow($color: #5A1ADE, $size: 10px, $prefix: false) {
	box-shadow: 0 0 $size $color;
	@if $prefix == true {
		-webkit-box-shadow: 0 0 $size $color;
	}
}

.shadow {
	@include simple-shadow();
}

.big-shadow {
	@include simple-shadow(#666, 25px, true);
}

Mixins

CSS généré

.shadow {
  box-shadow: 0 0 10px #5A1ADE;
}

.big-shadow {
  box-shadow: 0 0 25px #666666;
  -webkit-box-shadow: 0 0 25px #666666;
}

Fonctions intégrées : les couleurs

Sass

$main-color: #F1A5C0;

.main { color: $main-color; }

.important {
	color: complement($main-color);
}

.light {
	color: lighten($main-color, 20%);
}

.dark {
	color: darken($main-color, 20%);
}

.transparent {
	color: rgba(#C0FFEE, 0.8);
}

Fonctions intégrées : les couleurs

CSS généré

.main {
  color: #f1a5c0; }

.important {
  color: #a5f1d6; }

.light {
  color: #fffdfe; }

.dark {
  color: #e34d82; }

.transparent {
  color: rgba(192, 255, 238, 0.8); }

Héritage de classes

Sass

.super-boite {
	border-radius: 10px;
	padding: 10px;
	@include simple-shadow;
}

.super-boite-importante {
	@extend .super-boite;
	color: red;
	text-transform: uppercase;
}

Héritage de classes

CSS généré

.super-boite, .super-boite-importante {
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px #5A1ADE;
}

.super-boite-importante {
  color: red;
  text-transform: uppercase;
}

Boucles

Sass

@for $i from 1 through 6 {
	.tree-level-#{$i} {
		margin-left: 10px*$i;
	}
}

Boucles

CSS généré

.tree-level-1 {
  margin-left: 10px;
}

.tree-level-2 {
  margin-left: 20px;
}

.tree-level-3 {
  margin-left: 30px;
}

.tree-level-4 {
  margin-left: 40px;
}

.tree-level-5 {
  margin-left: 50px;
}

.tree-level-6 {
  margin-left: 60px;
}

Compass

  • Collection de mixins et fonctions qui aident au quotidien
  • Installation : gem install compass
  • Utilisation :
    • fichier config.rb dans le projet 
      http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

output_style = :compact # :expanded or :nested or :compact or :compressed

relative_assets = true

line_comments = false
    • compass watch

Exemple de mixin Compass : les dégradés !

#contenu {
	@include background-image(linear-gradient(white, #aaaaaa));
}
					
#contenu {
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #aaaaaa));
	background-image: -webkit-linear-gradient(#ffffff, #aaaaaa);
	background-image: -moz-linear-gradient(#ffffff, #aaaaaa);
	background-image: -o-linear-gradient(#ffffff, #aaaaaa);
	background-image: linear-gradient(#ffffff, #aaaaaa);
}

Les sprites CSS avec Compass

  1. on rempli un dossier img/icons contenant des icônes en png que l'on veut intégrer dans un sprite (yata.png, smartmap.png, star.png, etc)
  2. On intègre le cheat code dans notre fichier Sass : 
    @import "icons/*.png";
  3. Résultat : 
    .icons-sprite {
  background: url('../img/icons-s299f578685.png') no-repeat;
}
    Compass a généré une image réunissant toutes les autres (le sprite) à la volée

Les sprites CSS avec Compass

Un peu plus de magie :

Sass

@include all-icons-sprites;

CSS généré

.icons-sprite, .icons-smartmap-icon, .icons-star, .icons-twitter, .icons-yata-icon {
  background: url('../img/icons-s299f578685.png') no-repeat;
}

.icons-smartmap-icon {
  background-position: 0 0;
}

.icons-star {
  background-position: 0 -119px;
}

.icons-twitter {
  background-position: 0 -103px;
}

.icons-yata-icon {
  background-position: 0 -55px;
}
That's all folks!

Et n'oubliez pas : arrêter de déprimer, il y a un site pour ça.