Les préprocesseurs

en CSS

Votre CSS

CSS pour le navigateur

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -webkit-linear-gradient(top, white, black);
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

PostCSS

$primary: #CCC;

@import "reset";

.btn {
  color: #FFF;
  background-color: $primary;

  &:hover {
    background-color: darken($primary, 10);
  }

  .icon {
    display:inline-block; 
  }
}

@for $i from 1 through 3 {
  .spacer-#{$i} {
    margin: $i * 1rem;
  }
}

/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

.btn {
  color: #FFF;
  background-color: #CCC;
}

.btn:hover {
  background-color: #DDD;
}

.btn .icon {
 display:inline-block; 
}

.spacer-1 {
  margin: 1rem;
}

.spacer-2 {
  margin: 2rem;
}

.spacer-3 {
  margin: 3rem;
}

@primary-color: seashell;
@primary-bg: darkslategrey;
@uploads: “../wp-content/uploads/”;

body {
  color: @primary-color;
  background: @primary-bg;
}

header {
  background-image: url(“@{uploads}/2018/03/bg-image.jpg);
}

/* Classique */
primary-color = seashell;
primary-bg = darkslategrey;

body {
  color: primary-color;
  background: primary-bg;
}

/* Syntaxe "Soyons fou" */
primary-color = seashell
primary-bg = darkslategrey

body
  color primary-color
  background primary-bg

Les préprocesseurs

Votre CSS

CSS pour le navigateur

C'est nécessaire ?

Encore un truc à apprendre :(