Sass

Publié le 4 décembre 2024

Sass

Installation de Node.js
Installation de Sass en Global :

npm install -g sass 3. Mise à jour de npm

npm notice
npm notice New patch version of npm available! 10.8.2 -> 10.8.3
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v10.8.3>
npm notice To update run: npm install -g npm@10.8.3
npm notice

Lancement de la recompilation automatique dans le dossier css :

sass --watch sass/:css/

crée le fichier de style en .css et recompile l’intégralité des modifications opérées sur le .scss.

Alias : sw

Sass permet le découpage des styles en fichiers ciblés, recompilés en un seul #style.css :

style.scss —>

_reset.scss

_header.scss

_footer.scss

_heading.scss

_…

/*style.scss*/
@include 'reset';
@include 'header';
@include 'footer';
@include 'heading';
@include 'mixins/mixins'; //se réfère au fichier _mixins.scss du dossier mixins/
@include '...';

Sass permet le nesting en suivant les imbrication d’éléments sur le modèle du HTML :

<section id="oscars" class="oscars">
    <div class="oscars__title ">
        <img src="images/this.png">
        <h3>Titre</h3>
    </div>
    <div class="nomination">
        <img src="images/that.png" alt="texte alternatif">
    </div>
</section>

.oscars {
    position: relative;
    padding-top: 90px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px 0;
    justify-content: center;
    align-items: center;
    & img {
      height: 100%;
    }
  }
  .nomination {
    margin-top: -44px;
  }
  
  .oscars__title {
    position: relative;
    & img {
      height: 100%;
    }
    & h3 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      line-height: 3.2rem;
      text-align: left;
      font-size: 2.75rem;
    }
    
  }

Sass – Placeholder

Création du placehoder

%myheading{
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}

Appel du placeholder dans les selecteur

h1 {
  @extend %myheading;
  font-size: 20px;
}
h2 {
  @extend %myheading;
  font-size: 18px;
}
h3 {
  @extend %myheading;
  font-size: 16px;
}
h4 {
  @extend %myheading;
  font-size: 14px;
}
h5 {
  @extend %myheading;
  font-size: 12px;
}
h6 {
  @extend %myheading;
  font-size: 10px;
}

On peut utiliser @extend pour rappeler une classe

.myheading{
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}
h1 {
  @extend .myheading;
  font-size: 20px;
}
h2 {
  @extend .myheading;
  font-size: 18px;
}
h3 {
  @extend .myheading;
  font-size: 16px;
}

Le CSS généré :

.myheading, h3, h2, h1 {
  text-shadow: 1px 1px 1px #FFFFF;
  font-size: 16px;
}
h1 {
  font-size: 20px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}