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
C'est nécessaire ?
Encore un truc à apprendre :(
Préprocesseurs
By Jonathan Boyer
Préprocesseurs
- 1,045