You don&#t need a CSS pre-processor

Barbara Streisand
Release: 2024-11-01 08:56:30
Original
275 people have browsed it

You don

Native CSS has come a long way in recent months/years. In this post I am going to go over the major reasons that folks have used css pre-processors such as SASS, LESS, and Stylus, and show you how you can accomplish these same things with native CSS.

Separating files

Separating files is one main reason folks reach for a pre-processor. For quite some time now though you have been able to import another file into a CSS file. It looks like this.

@import url("./utils.css");
Copy after login
Copy after login

You can use a relative or an absolute path, the same way you would for an href on an anchor tag, or any other resource.

The main difference between this an a pre-processor would be that while a pre-processor would combine then at compile, CSS is going to make an http request at runtime.

Nesting rules

Ok this is the main reason for using a pre-processor. At least it's my main reason for using one in the past.

But CSS now supports nesting, and it works mostly how you are used to from using pre-processors.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Copy after login
Copy after login

Pretty awesome, what a huge advantage to writing CSS like we have for decades.

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}
Copy after login
Copy after login

Sudo selectors

Sudo selectors work the same way in native css that you may be accustomed to from pre-processors as well.

button {
  color: blue;

  &:hover {
    color: purple;
  }
}
Copy after login

You can read more about nesting at MDN.

Variables

A long time reason for pre-processors was variables. You can have all your colors, spacing ect in one file and globally update it everywhere.

Well you can do that in native CSS now, for some time. In fact in several ways it's better than the pre-processors.

Global variables

Global variables are enclosed in a :root rule. These can be referenced anywhere.

:root {
  --bg-color: #333;
}
Copy after login

To use a variable, it must be referenced with the var tag

button {
  background-color: var(--bg-color);
}
Copy after login

Scoped variables

You can also scope variables on selectors, for example...

header {
  --bg-color: #999;
}
Copy after login

So in this case, referencing var(--bg-color); within the header selector will result in #999;

Re-assigning values at runtime

So the main advantage with css variables over a pre-processor, is that they can be overrode at runtime, where a pre-processor once its compiled, it's permanent.

So for example if you have a website that you want to support light and dark modes. This can be achieved very easily using css vars.

:root {
  --bg-color: white;
}

body {
  background-color: var(--bg-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
  }
}
Copy after login

To achieve something like this with a pre-processor, you would need to toggle a class on the body using Javascript, and override all the rules with a .dark class or something of the sort.

Computation

Most pre-processors such as LESS, Stylus, or SASS let you do math on things. Like if you want to divide a variable in half ect.

You can do that in native css using the calc function.

@import url("./utils.css");
Copy after login
Copy after login

how cool is that?

Transforming colors

So another popular feature (at least to me) is to lighten and darken colors in a css pre-processor. You can do this in native css now as well using color-mix.

header {
  h1 {
    font-weight: bold;
  }

  h2 {
    font-weight: normal;
  }
}

Copy after login
Copy after login

The above would be the equivalent to what you are used to doing with a lighten(red, 50%) in a preprocessor.

To darken just mix with black instead of white

header h1 {
  font-weight: bold;
}

header h2 {
  font-weight: normal;
}
Copy after login
Copy after login

I hope next time you are choosing what tools to use on a project, you will give native css a try. It has come a long way.

The above is the detailed content of You don&#t need a CSS pre-processor. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!