webleads-tracker

hero

NetDevices - Experts Innovation Digitale - Agréée CII

Le blog de la Transformation Digitale Web & Mobile

Tuto : Comment installer Sass?

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… Nous allons à travers ce tutoriel suivre les […]

sass

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

logo_sass

 

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

Nous allons à travers ce tutoriel suivre 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

 

  1. 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.

  1. 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.
  2. 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

 

  1. 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 :

 

processus-install-sass-terminal

 

 

 

 

 

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.

 

installation-terminal-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 fichier 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

 

fichier_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:

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

 

package_control

 

 


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 ».