Sass, qu’est-ce que c’est ?

Sass (Syntactically Awesome Style Sheets) est une extension de CSS3. Cette extension a pour particularité de permettre la simplification de l’écriture de code CSS grâce à de nouvelles règles rassemblées autour de 3 grandes innovations : les variables, Nesting, les Mixins, l’héritage…

NetDevices à travers ce tutoriel nous indique les étapes d’installation de cet outil ainsi que son utilisation. Nous distinguerons l’installation de Sass sur Windows et sur Mac.

Sass pour Windows

Il faut commencer par installer Ruby.

Pour ce faire, le plus simple c’est Ruby Installer : Télécharger la dernière version adéquate dans la partie RubyInstaller, puis l’installer. Normalement aucun redémarrage n’est requis.

Après l’installation, on devrait pouvoir trouver un fichier exécutable (.exe) du nom de « Start command prompt with Ruby » fraîchement installé. l’Exécuter en tant qu’administrateur.
Un outil de ligne de commande s’ouvre alors. Ruby utilise un système de gestion de packages appelé « gem ». Il faut Considérer tous les petits packages comme des gems à installer pour pouvoir les faire fonctionner sur le système. Eh bien SASS se trouve être une gem ! Pour installer une gem il suffit de taper ça dans le terminal : gem install sass

Vous pourrez maintenant suivre la suite de cette introduction ! 😉

Sass Pour Mac OS

Sur mac, c’est relativement simple. En fait, OSX comporte une installation de Ruby par défaut. De ce fait, il suffit juste d’ouvrir l’application Terminal et d’y taper la commande sudo gem install sass

Dans ma console je tape : “gem install sass”
Processus d’installation :

Revérifier. Vous devriez maintenant installer Sass, mais il ne fait jamais mal de vérifier. Dans votre application de terminal, vous pouvez taper :
sass -v

Il devrait revenir
Sass 3.5.1.
Toutes nos félicitations! Vous avez installé avec succès Sass.

Site : http://sass-lang.com/install

Créer son dosssier projet

1- Créer un dossier projet

ProjetSASSS

Créer deux dossiers :

css
sass

2- Ouvrir son éditeur de texte SublimText2

Créer un fichier index.html

<!DOCTYPE html>
<html>
<head>
<meta charset= »utf-8″>
<link rel= »stylesheet » href= »css/style.css »>
<title></title>
</head>
<body>
<!– ici mon code →
</body>
</html>

3- Ces deux fichiers rangés dans leur dossier respectif

css → style.css
sass → style.sass

Maintenant nous allons installer le package contrôle pour avoir l’extension .sass

Aller dans sublime texte menu : view → show console.
Installation Package contrôle

Si, pour une raison ou pour une autre les instructions d’installation de la console ne fonctionnent pas pour vous (par exemple, avoir un proxy sur votre réseau), procédez comme suit pour installer manuellement Package Control:

Cliquez sur le menu Préférences > Parcourir les packages …
Parcourez un dossier puis, dans le paquetage / dossier installé
Téléchargez Package Control.sublime-package et copiez-le dans le package / répertoire installé
Redémarrez le texte sublime.

Copier code dans le terminal

Code à copier dans le terminal pour avoir l’extension .sass dans sublim text2

import urllib.request,os,hashlib; h = ‘6f4c264a24d933ce70df5dedcf1dcaee’ + ‘ebe013ee18cced0ef93d5f746d80ef60’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

site : https://packagecontrol.io/installation#st3

Voilà ! On peut trouver maintenant l’extension “sass” dans le fichier à enregistrer.

Découvrez dans un nouveau tuto « Comment débuter avec Sass ».