- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
Sass et compass: syntaxe et ex
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
.scss | /* CSS */ |
|
.content-navigation {
|
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 */ |
|
|
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.
.scss | /* CSS */ |
|
|
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 |
|
|
=> support aussi de Opera (-o) et Konquerer (-khtml)
Appeller le mixin avec @include border-radius
. Un seul arg pour celui-ci.
@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/