Sass et compass: syntaxe et ex

Portrait de Jenny
Soumis par Jenny le 6 déc 2014 - 09:10

Tags:

Source: http://fr.slideshare.net/ucbdrupal/bdug-responsive-webtheming20120723

outils responsive online

http://responsivepx.com/  http://www.responsinator.com/ et sa faq   ex à http://mediaqueri.es/

Syntaxe sass (p 19 du slideshow)

2 syntaxes: .sass (ancienne syntaxe)   .scss   (Sassy CSS par défaut pour sass 3)

La syntaxe SCSS est un sur-ensemble de CSS:

  • permet d'écrire des css, et de n'ajouter des SCSS que lorsque nécessaire
  • chaque fichier CSS est un fichier SCSS valide

Ex Sass variables

Ex utilisation des couleurs (calcul taille texte, hauteur et largeur): les variables supportées par Sass

Ex variables
.scss /* CSS */

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

 .content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Nommer les variables : howto

Source: un article sur comment nommer les variables  http://thesassway.com/beginner/variable-naming

  • pas en fonction du theme mais sémantiquement
  • conventions de nommage
    par ex suffixe -color ; préfixe pour certaines sections: header-  ou footer-
  • conf centralisé des var dans un seul fichier (par ex _config.scss) qu'on importe ensuite dans les autres feuilles de style (@import _config.scss)

Eviter les répétitions: nesting seletor  (p 21)

et c'est idem avec les propriétés

.scss /* CSS */

table.h1 {
  margin: 2em 0;
  td.ln {
  text-align: right; 
  }
}

li {
  font {
  family: serif;
  weight: bold;
  size: 1.2em;
  }
}

table.h1 {
  margin: 2em 0;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Autre article (anglais) pour débutant sur les "nesting selectors" et bonnes pratiques scss

Source http://thesassway.com/beginner/the-inception-rule

$border: 1px solid #EFC6F3;
.post {
  border-radius: 3px;
  background: #FFF8FF;
  border: $border;
  padding: 15px;
  color: #333333;
  .title {
    color: #000000;
    font-size: 20px;
  }
  .alt-title {
    @extend .title;
    border-bottom: $border;
  }
}

Pas plus que 4 niveaux de profondeur, sinon ca fabrique du code css horrible.

Notions de contexte, objets et des états d'interaction:

Si on crée le layout (largeur barres latérales, dimentions en hauteur, position des blocs, p h1 h2...): on parle de contexte de page, en général il faut 2 niveaux d'indentation pour le styler.

Un objet est un élément, seul ou avec des enfants, qui est identifié par une class ou un id. Vous pouvez utiliser des objets comme style de base, puis les modifier en utilisant des styles de "contexte de la page" en cas de besoin.
Ex d'objets: #sidebar #content .comment  .widget .logo .user ...
En général, on a une classe supérieure pour identifier l'object, et essayer de prendre le sélecteur le plus général possible. Ex:

 ul .special-deal {
   ...
   li {...}
   un {...}
 }

Les objets doivent avoir au plus quatre niveaux. La plupart du temps vous allez rester autour de la plage de niveau 2-3, et le quatrième serait l'état d'interaction.

L'état d'interaction couvre tout ce qui change lorsque vous interagissez avec un objet.

Mixins - le mixage sass/compass

Plus pratique que les variables, mixer permet de réutiliser des bouts entier de CSS, propriétés ou sélecteurs. On peux meme leur envoyer des arguments.

Ex variables
.scss /* CSS */

@mixin table-base {
  th {
  text-align: center;
  font-weight: bold;
  }
  td, th (padding: 2px)
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Ex de mixin border-radius CSS3

Source : http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code

Compass supporte CSS3 et a un mixin border-radius http://compass-style.org/reference/compass/css3/border_radius/

l'attribut bordus-radius
du mixin border-radius		 produit 
a.button {
  background: black;
  color: white;
  padding: 10px 20px;
  @include border-radius(5px);
}

a.button {
  background: black;
  color: white;
  padding: 10px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

=> support aussi de Opera (-o) et Konquerer (-khtml)

Appeller le mixin avec @include border-radius. Un seul arg pour celui-ci.

Un ex simple de mixin avec border-radius 
@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

@mixin nom-du-mixin($arg1, $arg2) {
  combinaison d'attributs CSS
  on peux y décla d'autres règles (avec selectors)
}

Arguments par défaut (pour $radius)

@mixin border-radius($radius: 5px) {
  ...
}

optionnel - on peux l'utiliser sans cette option avec @include border-radius;

Mieux pour les dev:

$default-border-radius: 5px !default;
@mixin border-radius($radius: $default-border-radius) {
 ...
}

Keyword arguments

Nouveauté Sass 3.1, très utile pour les cas où un mixin accepte plusieurs arguments.

Si les arguments ont des valeurs par défaut, on peux utiliser le nom de l'argument pour définir une valeur (pour un arg), sans devoir passer de valeur aux autres arguments.

@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {
  @if $moz    { -moz-border-radius:    $radius; }
  @if $webkit { -webkit-border-radius: $radius; }
  @if $ms     { -ms-border-radius:     $radius; }
  border-radius: $radius;
}

Comme tous les arg ont des valeurs par défaut, on peux couper le support de IE seul avec un simple   @include border-radius($ms: false);

Plus à http://compass-style.org/reference/compass/css3/border_radius/#mixin-bor...

 

héritage des sélecteurs: p 23

Les CSS avant compass p 25 http://compass-style.org/ et http://compass-style.org/help/tutorials/spriting/

 

Utiliser Sass et compass  (p 30)

Etre dans le dossier de son sous-thème

compass clean efface les fichiers .css pour qu'ils puissent etre regénérés

compass watch regarde de dossier "sass"
à chaque fois qu'on change un .scss  les css générées automatiquement vont utiliser une fonction debug, qui recherche les erreurs de syntaxe. Peux regarder les css générées mais on peux aussi ne travailler qu'avec des fichiers scss

Une autre facon: copier un .css, coller dans un .scss puis (bien sur on a fait un compass watch)
compass compile
Source: http://thesassway.com/beginner/getting-started-with-sass-and-compass

Plus

compass http://compass-style.org/ et http://compass-style.org/help/tutorials/spriting/ http://compass-style.org/reference/compass/typography/vertical_rhythm/
http://compass-style.org/reference/compass/

plus sur sass http://sass-lang.com/guide thesassway.com/beginner/getting-started-with-sass-and-compass

sur les imags responsive http://blog.cloudfour.com/responsive-imgs/
patterns de navigation: http://bradfrost.com/blog/web/responsive-nav-patterns/

outils online: http://www.responsinator.com/ et sa faq  ; http://responsivepx.com/   ;   ex à http://mediaqueri.es/