Astuce de base Sass | AU NOUVEAU Blog

Sass (abréviation de « Syntactically Awesome Style Sheets ») est un préprocesseur CSS populaire qui améliore le CSS traditionnel avec de nouvelles fonctionnalités. Il offre un moyen plus efficace et puissant d’écrire du CSS, ce qui facilite la gestion et la maintenance des feuilles de style complexes.

Apprendre Sass est un excellent moyen d’optimiser le CSS de votre site Web et de nombreuses options de préprocesseur sont disponibles. Cependant, Sass est souvent la première étape car il offre d’innombrables façons d’optimiser votre fichier CSS. Dans ce blog, nous allons explorer certaines des bases de Sass et comment vous pouvez les utiliser dans votre site Web, en supposant que vous savez comment le configurer.

Si vous débutez avec Sass, de nombreuses ressources disponibles en ligne peuvent vous guider tout au long du processus de configuration. Une fois que vous êtes opérationnel, vous pouvez commencer à explorer les nombreuses choses intéressantes que vous pouvez faire avec Sass pour optimiser le CSS de votre site Web. Des sélecteurs et variables d’imbrication aux mixins et fonctions, Sass offre une large gamme de fonctionnalités puissantes qui peuvent vous aider à écrire des CSS plus efficaces et maintenables.

Vous pouvez toujours visiter ce site pour configurer sass dans votre projet.

Découvrons quelques choses intéressantes que nous pouvons faire dans SASS pour optimiser le site Web.

Imbrication : Sass vous permet d’imbriquer des sélecteurs, ce qui peut aider à améliorer la lisibilité et l’organisation de votre code. Par exemple:

.container{
    width: 100%;
    .container_inner{
        overflow: hidden;
        .container_inner-one{
            height: 100%;
        }
    }
}

variables:

Sass fournit une fonction variable puissante qui vous permet de définir des valeurs réutilisables, telles que les couleurs, les tailles de police et l’espacement. L’utilisation de variables peut aider à simplifier votre code et faciliter sa mise à jour à l’avenir.

En définissant une variable pour une valeur que vous utilisez plusieurs fois dans votre code, vous pouvez modifier la valeur de cette variable à un seul endroit et la mettre à jour dans toute votre base de code. Par exemple, vous pouvez définir une variable pour la couleur principale de votre marque, puis utiliser cette variable chaque fois que cette couleur est nécessaire dans votre feuille de style. Cela simplifie non seulement votre code, mais assure également la cohérence de votre conception.

En plus de simplifier votre code et d’améliorer la cohérence, les variables peuvent également faciliter le travail avec des feuilles de style volumineuses et complexes. En définissant des variables pour les valeurs communes, vous pouvez facilement ajuster les valeurs de ces variables dans votre base de code sans avoir à modifier manuellement chaque instance de la valeur.

Dans l’ensemble, les variables Sass sont un outil puissant pour simplifier votre code, améliorer la cohérence et rendre vos feuilles de style plus modulaires et plus faciles à utiliser au fil du temps. L’utilisation efficace de variables permet d’économiser du temps et des efforts, réduit les erreurs et garantit que votre conception reste cohérente et à jour.

$font-base:'Montserrat', sans-serif;
$base-color: #000000;
$link-color: #DB7C65;
body{
    font-family: $font-base;
    color: $base-color;
    background-color: $link-color;
}

Mélanges:

Les mixins sont une fonctionnalité puissante de CSS qui vous permet de réutiliser des blocs de code sur votre site. En créant des blocs de code réutilisables, vous pouvez réduire considérablement la duplication de code, améliorer la maintenabilité de votre code et rendre vos feuilles de style plus modulaires.

Avec les mixins, vous pouvez définir un bloc de code CSS une fois, puis le réutiliser dans votre base de code en appelant le mixin là où vous en avez besoin. Cela peut aider à réduire la quantité de code que vous devez écrire et faciliter la mise à jour globale des styles.

Par exemple, vous pouvez créer un mixin qui définit un ensemble de styles pour un bouton. Vous pouvez ensuite utiliser ce mixin sur votre site chaque fois que vous avez besoin de styliser un bouton, plutôt que d’écrire les mêmes styles à plusieurs reprises. Cela permet non seulement d’économiser du temps et des efforts, mais contribue également à assurer la cohérence de votre site.

Dans l’ensemble, les mixins sont un outil puissant en CSS qui peut vous aider à écrire un code plus efficace, modulaire et maintenable. L’utilisation de mixins simplifie efficacement votre base de code, réduit les doublons et facilite la gestion de vos feuilles de style au fil du temps.

@mixin heading2($color){
    font-size: 26px;
    font-weight: 500;
    color: $color;
}
h1{
    @include heading2(#fff);
}
h2{
    @include heading2(#000);
}
h3{
    @include heading2(#ddd);
}

Extend: Sass allows you to extend one selector from another, which can help to reduce duplication and simplify your code. For example:

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
}
.button-primary {
  @extend .button;
}
.button-secondary {
  @extend .button;
  background-color: #6c757d;
}

Opérateurs mathématiques

Sass fournit plusieurs opérateurs mathématiques (+, -, *, /, %) que vous pouvez utiliser pour effectuer des calculs dans votre code CSS. Par exemple:

.container {
  width: 100% / 3;
}
.button {
  padding: 10px 20px;
  font-size: 16px;
  line-height: 1.5em;
  margin-bottom: 20px;
  &--large {
    font-size: 20px;
    line-height: 1.2em;
    margin-bottom: 30px;
  }
}

Points d’arrêt dans Sass peut être utile pour créer des conceptions réactives qui s’adaptent à différentes tailles d’écran. Voici un exemple de définition de points d’arrêt à l’aide de variables Sass :

// Define breakpoints
$mobile: 768px;
$tab: 992px;
$desktop: 1200px;
// Define media queries using mixins

@mixin media-mobile {
  @media (min-width: $breakpoint-small) {
    @content;
  }
}

@mixin media-tab{
  @media (min-width: $breakpoint-medium) {
    @content;
  }
}

@mixin media-desktop{
  @media (min-width: $breakpoint-large) {
    @content;
  }
}

.heading {
    @include media-desktop(){
        font-size: 16px;
      }
    @include media-tab{
      font-size: 14px;
    }
    @include media-mobile() {
        font-size: 12px;
    }
}

Directives de contrôle: Sass fournit plusieurs directives de contrôle, telles que @if, @for et @each, qui peuvent vous aider à écrire un code plus puissant et plus flexible. Par exemple:

@mixin heading($font) {
    font-weight: 500;
    color: #007bff;
    display: block;
    @if $font == 'large' {
        font-size: 32px;
    }
    @else if $font == 'medium' {
        font-size: 24px
    }
  }
  .heading1 {
    @include heading("large");
  }
  .heading2 {
   @include heading("medium");
}

Voici quelques exemples de base de SASS. Si l’on veut en apprendre quelques bases, on peut toujours y jeter un coup d’œil, indépendamment des développeurs backend ou frontend.

Pour un apprentissage plus avancé, on peut toujours visiter site web impertinent.
Consultez nos autres articles de blog pour plus d’informations.

TROUVÉ CELA UTILE ? PARTAGEZ-LE