Tag: CSS Preprocessors

CSS Preprocessors Are Awesome.

CSS preprocessors make CSS way better and anyone who writes a significant amount of styles should be using some kind of preprocessor. It’s understandable why some people are hesitant to switch to this workflow. It adds more complexity to the development process, you have to install extra stuff, maybe work from the terminal, and figure out how to automatically compile your code to regular CSS. It can be a lot of stuff to do, but while initially it may take more time and work to set up a project, it will pay off in the long run. The reason why CSS preprocessors exist is because CSS by itself can be pretty limited. Two very popular CSS preprocessors are Sass and Less, so I will focus on these two. With something like Sass or Less you get the ability to use variables, functions, mixings, you get nesting capabilities and more stuff that you just can’t do with css. Variables are one really useful thing you get with Sass and Less. You can define things like your site colors in one place, use the variables in your styles and if you ever need to change these colors you just go back and edit the variables. You would not have to go through your styles, copying and pasting new values or do a search and replace which can sometimes be unsafe.

Both Sass and Less also have these things called “mixins” which are these kind of reusable grouping of styles. Mixins can be useful to deal with something like CSS vendor prefixes, for example. To use the latest CSS tricks you sometimes have to repeat the style with a vendor prefix for each of the major browsers so you end up with a bunch of repeated stuff in your CSS, like so:

One thing you can do with a mixin is that you can wrap up all of those styles and call the mixin when you need it, and as many times as you need it. You can even pass parameters into a mixin and reuse it differently in different sections or pages.

Another cool thing about sass and less is the nesting capabilities. I’m a big fan of the nesting thing; here is an example of what I’m talking about:

And here is some Sass:

This nested structure helps you avoid repetition, organize your styles, and makes your CSS more closely resemble your HTML structure which I think is really neat. CSS just makes more sense to me written in this way. These are just some of the reasons why css preprocessors are awesome and why writers of css should be using them. You can get started with sass or less by checking out their documentation at http://sass-lang.com/ for sass and http://lesscss.org/ for less. So check them out, try them, they will make your css much better.

Smarter Styling with CSS Preprocessors

Smarter Styling with CSS Preprocessors
In software development we always try to follow rules and best practices to produce better products by minimizing code. One of the most popular mantras is the D.R.Y (Don’t Repeat Yourself) principle and states the following:

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

Of course, it is not always easy to perfectly follow this principle. For example, this can become difficult in front-end development and, more precisely, when it comes to CSS.
Continue reading

© 2017 Oskoui+Oskoui Blog

Theme by Anders NorenUp ↑