// ressource technique

Sass mixin

// 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)

// 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;
    }; 
}

// 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);
}