Arthur Wang's Blog
Follow me on
  • My General Blog
  • Software Development
    • Latest Articles on Software Development
    • Complete Resources for Developers >
      • Tutorial Information for Developers
      • .NET Developer Blogs
      • Developer Journals and Magazines
      • Developer's Tools
      • Database Development
      • ​Developer Conference and Events
  • Tech
    • Latest Articles on Technology Development
  • Health
  • Money
  • Services
    • Modern Website Design
    • Web Maintenance of Existing Websites Service
    • Corporate Business Consulting Service
  • About
  • Contact
  • Art
  • 中文部落格

Supercharge the Web Development Workflow with LESS or SASS (CSS Preprocessor)

2/26/2016

0 Comments

 
​The thought of adding another step to the already lengthy workflow on web development is discouraging.  You probably have been seen "LESS" or "SASS" somewhere for a long time but you have been tried to ignore it due to already lengthy workflow in your web development. If you are a web developer and has experience working with CSS, you probably have spend countless hours of copy and pasting section of CSS code from place to place and there are just so many repeating code lines and no one has thought of making it programmable and substituting repeating elements into variables, just like any other programming languages out there.  Actually, this was the reason inspired other developers to resolve this problem by creating new programmable CSS syntax languages called "SASS", Syntactically Awesome Stylesheets.  However, since browsers only understand regular CSS, a special type of preprocessor will be needed to convert this SASS files into CSS files before deployment.
How CSS Preprocessor works Flow chart
LESS is another type of language that was influenced by SASS, and both were written in Ruby.  Later, LESS was rewritten by using JavaScript instead.  The goals of these languages are to reduce duplication in the process of writing the CSS so no more repeating steps or DRY as in Don't repeat yourself. Another goal is to act more like CSS in their syntax. For LESS, it was redesigned to be as close to CSS as possible.  In one instance, you can include the less.js JavaScript file to convert the LESS code on-the-fly. Another way is to render the LESS code into regular CSS using the preprocessor. 
 
Besides less coding in using this method, your CSS code will be easier to be maintained and organized.  There are many frameworks built on top of CSS preprocessing languages that help you further in the front-end coding, such as making sprites, compliant CSS3, reusable patterns, managing vendor prefixes, and faster CSS writing.  The popular frameworks are Compass, Bourbon, Susy, Stylus, CSS-Crush, Myth, and Rework.  There are other less known CSS Preprocessors, such as Brunch, Switch CSS, DtCSS, Clay and CSS Preprocessor.  There is LibSass which does not required the Ruby.
Picture
If you prefer to use programs that acts as a compiler, instead of using the command line, there are several ones to choose from. The differences are that some accept both SASS and LESS, or just one, and some work on both Mac and Windows.  Here are the list of such programs.
 
1. CodeKit
2. Prepros App
3. Mixture
4. LiveReload
5. Koala
6. Compass.app
7. Scout
8. Crunch
9. WinLess
10. SimpLess
​11. Gulp
12. Ghostlab
 
Here are the list for old fashioned command line:
Grunt -  http://gruntjs.com/
 
In any ways you select from above, for Sass, you must install Ruby if you are on Windows since Mac already comes with Ruby preinstalled.  For LESS that is written in javascript, you will need NodeJS to run it.  
Read Latest Software Development Articles  Read Latest Tech Articles

Picture
Let's Connect!

Arthur Wang

​Arthur is a software developer at his core and has been developing web applications and leading development projects since 2000.  He enjoys learning new technologies and writing about them.


If you would like to read more articles written by Arthur, please subscribe the weekly newsletter from Uniting Digital since he is also a content contributor for the site.
Subscribe

0 Comments



Leave a Reply.

    Arthur Wang

    @ArthurWangLA
    MCSD App Builder
    MCSD Web Applications
    ​Member of Windows Insider Program & HoloLens Developer Community & Dev Center Insider Program

    Over 17+ years of  experience in web-based software development & management.  Specialized in Microsoft technology with c# language and its architecture design.  MCSD, MCSE, Microsoft Specialist, MCP + Internet, and B.S. from UCLA

    Archives

    August 2018
    March 2018
    January 2017
    December 2016
    May 2016
    April 2016
    March 2016
    February 2016
    April 2014

    Categories

    All
    API
    Arduino
    ASP.NET
    Cognitive
    CSS
    Database
    Deep Learning
    DevOps
    Electronics
    Flexbox
    HTML5
    IoT
    Katana
    Machine Learning
    Management
    .NET
    .NET Core
    Neural Network
    OWIN
    Programming
    Programming Tools
    Recognition
    Security
    SQL Server
    UWP
    Visual Studio
    Web API
    Web Developer

    RSS Feed

    Latest Articles

© 2014-2020 ArthurWiz.com All Rights reserved. | Home | About |
Protected by Copyscape