How to Use a CSS Preprocessor to Avoid UI Inconsistencies

Inconsistencies in UI design can be quite bothersome to users. The problem can stem from CSS inconsistencies. By using a CSS Preprocessor like LESS, you can create mixins for components that generate needed styles.

This process will create UI components that have a much stronger tendency to stay consistent as an application is developed.

The video tutorial takes you through using LESS to change settings for elements such as buttons. You can add things such as color, shadows and active states.

Further the video shows you how inconsistencies in design start. (The answer is often a copy and paste error.) By using LESS, multiple elements can be changed using a block of styles.

What you will learn in this tutorial: How to use a CSS preprocessor, such as LESS. You will need web development and coding knowledge to follow this tutorial with ease.

Video run time: 9 minutes

David East

David East is a Developer Advocate for Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @eastdotnet.

Newsletter

8 Comments
  1. Daniil May 23, 2:47 pm

    After watching this, i’m ready to use it right in my next project!
    Thanks for the video.

    Reply
    +5
  2. Darrien Kemp May 23, 6:37 pm

    Hello David, Lately I have been seeing more Sass related articles and a minimal amount of LESS. I wanted to dig into one of them not sure, but Sass seems to pop up.

    Reply
    +1
    • David East
      David East May 25, 7:11 am

      Hey Darrien,

      I definitely agree that it seems that SCSS has been gaining a lot more traction than LESS has lately. I write both in SCSS and LESS depending on the project.

      What I believe to be truly important is the use of a preprocessor in the first place. Regardless of the one you pick, your life will be much easier with any preprocessor than writing raw CSS.

      They’re both very similar so I wouldn’t sweat deciding which one to choose. Just dig in and bask in the excellence that is preprocessing!

      Reply
      -1
  3. Tomasz Wyderka May 23, 10:58 pm

    Good point David. Unfortunately most users will prefer to copy/paste than learning new syntax. And SASS and LESS are not easy. Even I’m software engineer, it’s unclear to me why and where to put those ampersands (&)… Please look at my easy to use preprocessor http://www.cofoh.com/css-on-diet . I would love some advises about future development.

    Great and professional video editing!

    Reply
    +1
    • Daniel Winter May 25, 11:10 am

      Well basically you just put an ampersand where you wouldn’t need a space, like a:hover, when you neet a query like .head .logo you don’t add it. Imho sass and less are fantastically easy to learn and widespread

      Reply
      +3
  4. eHDF May 28, 1:07 pm

    Pre-processors are always a good choice when it comes to debugging of CSS errors or compatibility issues with browsers but do also include the list of CSS pre-processors that are available readily to the public at large.

    Reply
    0
  5. Vishal Gupta Jun 18, 5:36 am

    Thank you so much David, for sharing such a nice tutorial. I am actually a newbie to CSS preprocessors. I liked the way you explained the issue and how to overcome with LESS.

    Any help/information on best resource (book, online) for learning CSS preprocessors would be of great help.

    Reply
    +1
  6. Rob Broley Jul 8, 12:40 am

    A great video. I have found myself using SASS more and more with each project.

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters