Sass – Les imbrications

Imbrications des règles

HTML


<div id="container">
   <ul>
       <li>
          <a href=http://google.fr target="_blank">Google</a>
       </li>
   </ul>
</div>

SCSS


#container {
   width: 200px;
   height:50px;
   border: solid red 1px;
   ul {
      position:relative;
      top:10px;
      left:30px;
      margin:0;
      list-style-type: none;
      li {
         a { 
            text-decoration: none;
            font-weight: bold;
            color: green;
            // & : représente l'élément parent
            &:hover{
                color:red;
            }
         } 
      } 
   } 
}

Jsfiddle

Publier 10 mars 2017 par Michel PIALLIER dans Sass - Les imbrications Commentaires fermés

Installation Ruby et Sass

Pourquoi Sass ?

Installer Ruby

Lancer Sass

Créer un fichier scss par exemple style.scss
Sur l’invite de commande aller dans le répertoire où est situé ce fichier et taper :
gem install sass sass --watch style.scss:style.css
Après le premier lancement les fichiers style.css et style.css.map sont créés.
Dans le fichier style.css.map ajouter la ligne
"sourcemap": "true"

Cette modification permet avec l’inspecteur du navigateur de voir le fichier .scss au lieu du fichier .css

Publier 24 février 2017 par Michel PIALLIER dans Sass - Installation Commentaires fermés

Les variables

Définition des variables

Jsfiddle

Publier 24 février 2017 par Michel PIALLIER dans Sass - Les variables Commentaires fermés

1 2 Next »