PreCSS, el plugin de PostCSS que te permite utilizar la sintáxis de Sass
PreCSS es uno de los plugins más populares de PostCSS ya que permite utilizar todo el poder de la sintaxis de Sass sin instalar cada pequeña funcionalidad individual. En este post verás una guía rápida acerca de todo lo que puedes lograr con este espectacular plugin.
Lo primero que debes de tener en cuenta es que PreCSS es un conjunto de plugins preinstalados en un orden específico. Al día de hoy, comprende los siguientes plugins:
- postcss-extend-rule
- postcss-advanced-variables
- postcss-preset-env
- postcss-atroot
- postcss-property-lookup
- postcss-nested
Cada uno de estos plugins aporta una parte de la funcionalidad de Sass. Y no solo eso, también verás que puedes utilizar otras cosas interesantes como la referencia de propiedades de Stylus. Veamos ahora como instalarlo y utilizarlo.
Instalación de PreCSS
Instalar precss con npm es tan fácil como agregarlo a tu proyecto y configurarlo en el archivo postcss.config.js
npm i -D precss postcss-scssconst precss = require('precss');
module.exports = {
parser: 'postcss-scss',
plugins: [
precss()
]
}
Funcionalidades de PreCSS
Este plugin ofrece las siguientes funcionalidades.
Sass markup
Puedes utilizar y definir tus reglas CSS al estilo Sass.
Syntax
body {
background: white;
h1 {
color: black;
}
}CSS
body {
background: white;
}
body h1 {
color: black;
}
Variables
Con el uso de variables puedes utilizar un mismo valor a lo largo de todo el código CSS y cambiarlo fácilmente cuando se requira.
Syntax
$base-color: white;
.btn-$base-color {
background-color: $base-color;
}
.base-background {
background: url("/icons/bg/$base-color");
}
CSS
.btn-white {
background-color: white;
}
.base-background {
background: url("/icons/bg/white");
}
En los casos en donde resolver la variable resulte ambiguo puedes utilizar interpolación.
Syntax
$background-prefix: bg-;
.#{$background-prefix}white {
background-color: white;
}
CSS
.bg-white {
background-color: white;
}
Control de flujo
Con este plugin es posible utilizar directivas para el control de flujo muy similares a cómo lo haríamos en Sass.
@if
Syntax
$base-color: white;
@if $base-color == white {
.base-contrast {
background-color: black;
}
}
CSS
.base-contrast {
background-color: black;
}
@each
Syntax
$dir: assets/icons;
@each $icon in (foo, bar, baz) {
.icon-$icon {
background: url('$dir/$icon.png');
}
}
CSS
.icon-foo {
background: url('assets/icons/foo.png');
}
.icon-bar {
background: url('assets/icons/bar.png');
}
.icon-baz {
background: url('assets/icons/baz.png');
}
@for
Syntax
@for $count from 1 to 5 by 2 {
@if $count > 2 {
.col-$count {
width: #{$count}0%;
}
}
}
CSS
.col-3 {
width: 30%;
}
.col-5 {
width: 50%;
}
@extends
Con @extends podemos extender estilos creados mediante selectores funcionales.
Syntax
%d-abs {
display: absolute;
}
%initial-alignment {
left: 0;
top: 0;
}
.modal {
@extend %d-abs;
@extend %initial-alignment;
border: solid 1px silver;
}CSS
.modal {
display: absolute;
left: 0;
top: 0;
border: solid 1px silver;
}@mixin e @include
Con @mixin podemos definir estilos que pueden ser agregados con @include en otra parte del código.
Syntax
@mixin heading-text {
color: #242424;
font-size: 4em;
}
h1, h2, h3 {
@include heading-text;
}
CSS
h1, h2, h3 {
color: #242424;
font-size: 4em;
}
Con @mixin también podemos pasar parámetros tal y como si fuera una función.
Syntax
@mixin heading-text($color: #242424, $font-size: 4em) {
color: $color;
font-size: $font-size;
}
h1, h2, h3 {
@include heading-text(#111111, 6em);
}
CSS
h1, h2, h3 {
color: #111111;
font-size: 6em;
}
Anidación de estilos
Dado que este plugin utiliza postcss-nested puedes hacer cosas increíbles como lo que te muestro a continuación (tómate tu tiempo para entender la sintáxis).
Syntax
.phone {
&_title {
width: 500px;
@media (max-width: 500px) {
width: auto;
}
body.is_dark & {
color: white;
}
}
img {
display: block;
}
}
.title {
font-size: var(--font);
@at-root html {
--font: 16px
}
}
CSS
.phone_title {
width: 500px;
}
@media (max-width: 500px) {
.phone_title {
width: auto;
}
}
body.is_dark .phone_title {
color: white;
}
.phone img {
display: block;
}
.title {
font-size: var(--font);
}
html {
--font: 16px
}
Referencia de propiedades
Puedes utilizar la referencia de propiedades al estilo de Stylus.
Syntax
.Test {
margin-left: 20px;
margin-right: @margin-left;
color: red;
background: @color url('test.png');
line-height: 1.5;
font-size: @(line-height)em;
}
CSS
.Test {
margin-left: 20px;
margin-right: 20px;
color: red;
background: red url('test.png');
line-height: 1.5;
font-size: 1.5em;
}
CSS moderno
Este plugin permite convertir el CSS moderno en CSS que entiendan todos los navagadores. Observemos por ejemplo el uso de @custom-selector para crear un selector propio.
Syntax
@custom-selector :--button button, .btn, input[type="submit"];
:--button {
background: silver;
}
CSS
button,.btn,input[type="submit"] {
background: silver;
}