PreCSS, el plugin de PostCSS que te permite utilizar la sintáxis de Sass

Author
By Darío Rivera
Posted on 2021-02-13 in CSS

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-scss
const 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;
}

Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.