Des CSS

kick-ass

avec Sass

Sass,

C'est kick-ass POUR ...

variables

// Entier
$integer : 5;

// Booléen
$boolean : true;

// Mesure
$length  : 15px;

// Couleur
$color   : #BADA55;

// Chaine de caractères
$string  : 'images/ma-super-image.jpg';

@extend & classes abstraites

%clearfix:after {
    content : '';
    display : table;
    clear   : both;
}

.float-container {
    @extend %clearfix;
}

CSS

.float-container:after {
    content : '';
    display : table;
    clear   : both;
}

%message {
    border: 1px solid;
    font-weight: bold;
}

.message-error {
    @extend %message;
    border-color :  darken(red,  5%);
    color        :  darken(red, 15%);
    background   : lighten(red, 40%);
}
    
.message-ok {
    @extend %message;
    border-color :  darken(green,  5%);
    color        :  darken(green, 15%);
    background   : lighten(green, 40%);
}

.message-warn {
    @extend %message;
    border-color :  darken(orange,  5%);
    color        :  darken(orange, 15%);
    background   : lighten(orange, 40%);
}

.message-error, .message-ok, .message-warn {
    border: 1px solid;
    font-weight: bold;
}

.message-error {
    color: #b30000;
    background: #ffcccc;
    border-color: #e60000;
}
    
.message-ok {
    color: #003400;
    background: #4dff4d;
    border-color: #006700;
}

.message-warn {
    color: #b37300;
    background: #ffedcc;
    border-color: #e69500;
}

Vite, en position !

@mixin pos($top, $right, $bottom, $left, $position: absolute) {
    top      : $top;
    right    : $right;
    bottom   : $bottom;
    left     : $left;
    position : $position;
}

.element { @include pos(1em, .5em, auto, auto); }

CSS

.element {
   position: absolute;
   top: 1em;
   right: 0.5em;
   bottom: auto;
   left: auto;
}

Les perfs, toujours les perfs

Moins de lignes générées...

@mixin pos($top, $right, $bottom, $left, $position: absolute) {
    @if    $top != auto { top    : $top }
    @if  $right != auto { right  : $right }
    @if $bottom != auto { bottom : $bottom }
    @if   $left != auto { left   : $left }
    position : $position;
}

... plus vite la page est chargée !

https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_position.scss

RetiNa na na na na !

@mixin mq($size) {
    /* ... */
    
    @if $size == retina {
      @media  
        only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (min-resolution: 124.8dpi),
        only screen and (min-resolution: 1.3dppx) { 
          @content;                 
        }
    }
}

https://github.com/kaelig/hidpi

BOOM !

.element {
    background: url('my-awesome-background.jpg');
    width: 50%;
    float: left;
    
    @include mq(small) {
        width: 100%;
        float: none;
    }
    
    @include mq(retina) {
        background: url('my-awesome-background-high-def.jpg');
    }
}

Terminé.

.element {
    background: url('my-awesome-background.jpg');
    width: 50%;
    float: left;
}

@media (max-width: 48em) {
    .element {
        width: 100%;
        float: none;
    }
}

@media  
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (min-resolution: 124.8dpi),
    only screen and (min-resolution: 1.3dppx) { 
    .element {
        background: url('my-awesome-background-high-def.jpg');
    }
}

15 lignes.

$nb-columns   : 6;
$wrap-width   : 1140px;
$column-width : 180px;

$gutter-width : ($wrap-width - $nb-columns * $column-width) / $nb-columns;
$column-pct   : percentage($column-width / $wrap-width);
$gutter-pct   : percentage($gutter-width / $wrap-width);
@mixin cols($cols) {
  width: $column-pct * $cols + $gutter-pct * ($cols-1);
  margin-right: $gutter-pct;
  float: left;

  @media screen and (max-width: 400px) {
    width: 100%; 
    margin-right: 0;
  }
}

10 lignes de code.

body {
  counter-reset: ct1 ct2 ct3 ct4 ct5 ct6;     // Initialisation
}

$nest: ();

@for $i from 1 through 6 {                    // Boucle
  h#{$i} {
    counter-increment: ct#{$i};               // Incrémentation
  
    &:before {
      content: $nest counter(ct#{$i}) ". ";   // Affichage
    }
  }
  $nest: append($nest, counter(ct#{$i}) "."); // Concaténation
}

"Mixinifier" tout ça

@mixin numbering($from: 1, $to: 6) {  counter-reset : ct1 ct2 ct3 ct4 ct5 ct6;
  $nest         : ();  @if $from >= 1 and $to <= 6 {
    @for $i from $from to $to+1 {      h#{$i} {
        counter-increment: ct#{$i};
        &:before { 
          content: $nest counter(ct#{$i}) ". " 
        }
      }      $nest: append($nest, counter(ct#{$i}) ".");
    }
  }
}

body {
  @include numbering(1, 4);
}

Foreach, la boucle oubliée

$kiwiparty: 
  "accessibilité",
  "ergonomie",
  "nouveautés technologiques", 
  "conformité aux standards";

@each $item in $kiwiparty {
  // $item
}

La même chose, JS style !

@for $i from 1 through length($kiwiparty) {
  // nth($kiwiparty, $i)
}

Méthode 1 : output dans une boucle

$pages : home, about, products, contact;

@each $item in $pages {
    .#{ $item } .nav-#{ $item } { 
        style: awesome;
    }
}

CSS

.home     .nav-home     { style: awesome; }
.about    .nav-about    { style: awesome; }
.products .nav-products { style: awesome; }
.contact  .nav-contact  { style: awesome; }

Méthode 2 : création d'un sélecteur

$pages    : home, about, products, contact;
$selector : ();

@each $item in $pages {
    $selector: append($selector, unquote(".#{$item} .nav-#{$item}"));
}

#{ $selector } { 
    style: awesome; 
}

CSS

.home     .nav-home, 
.about    .nav-about,
.products .nav-products, 
.contact  .nav-contact {
    style: awesome;
}