Sass

Trois mixins Sass : rem, points de rupture et triangle

Publié en septembre 2016 3 extraits de code par Rémy Montangé

Fiche écrite en 2016 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Trois outils Sass que je recopie dans presque chaque projet : une conversion des pixels en rem avec repli pour les vieux navigateurs, un mixin de points de rupture pour le responsive, et un mixin qui dessine un triangle en CSS pur.

SCSS

// Font-size

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@include font-size(14px)

SCSS

// Breakpoint

$smartphone: 480px;
$tabletPortrait: 767px;
$tabletLandscape: 991px;
$desktop: 1200px;
$largeScreen: 1500px;

@mixin responsive($media) {
  @if $media == xs {
    @media (max-width: $smartphone) { @content; }
  }
  @else if $media == sm {
    @media (max-width: $tabletPortrait) { @content; }
  }
  @else if $media == md {
    @media (max-width: $tabletLandscape) { @content; }
  }
  @else if $media == lg {
    @media (max-width: $desktop) { @content; }
  }
  @else if $media == xl {
    @media (max-width: $largeScreen) { @content; }
  }
}


.bloc{
    @include responsive(sm){
        color:#FF0;
    };
    @include responsive(xs){
        color:#F00;
    };
}

SCSS

// Triangle

@mixin triangle($direction, $size: 6px, $color: #222){
  content: '';
  display: block;
  position: absolute;
  height: 0; width: 0;
  @if ($direction == 'up'){
    border-bottom: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'down'){
    border-top: $size solid $color;
    border-left: 1/2*$size solid transparent;
    border-right: 1/2*$size solid transparent;
  }
  @else if ($direction == 'left'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-right: $size solid $color;
  }
  @else if ($direction == 'right'){
    border-top: 1/2*$size solid transparent;
    border-bottom: 1/2*$size solid transparent;
    border-left: $size solid $color;
  }
}

.triangle{
    @include triangle(up, 30px, #F00);
}

Autres fiches Sass