CSS preprocessors workflow - how does it really work?


Tags: css,sass,workflow,css-preprocessor

Problem :

I am a developer and I am trying to understand one thing... how does the css pre processor fit into the day to day design/development workflow?

Without it it was something simple like saving the css file and refresh the page.

But if you use, let's say, something like SASS, how does it change?

If I got it right:

  1. You write your sass files on your favourite text editor
  2. Process it in some way
  3. Check the results on your localhost (or wherever you have the development version)

Is this how the workflow is with a css pre processor? And if it is, isn't this time consuming?



Solution :

Great question. At first SASS can seem to be time consuming but after a little while you truly see the benefits.

You need to work locally (which I recommend anyway) and I use Koala (http://koala-app.com) which processes by SASS file into CSS every time I save. You still link your css in exactly the same way so when you are ready to deploy, you just do it the same where you've always done it.


    CSS Howto..

    How to positioning an element over another in CSS

    How can I change the colour of a line that starts with specific characters in javascript/css?

    how to I make my responsive website look normal on galaxy s4 (media query)

    How to convert a .PNG file into a source code that can be stored into mysql and called up via CSS as “png”

    how to make slide animation?

    Bootstrap custom CSS rule how to set text-decoration:none for hyperlink?

    How to retrieve the real height of a #div (including overflowed parts)

    How can I vertically align the text on these CSS buttons?

    how to display an image on small screens and videos on large screen in html

    How can i style textnodes that are direct children of a body-element?

    css float: left clash/collision, how to avoid?

    CSS - how to set a position of UL in LI

    HTML/CSS: How to move my navigation bar to the middle?

    How to add contact details next to responsive Google Map

    How to solve position issue in ie7 using html and css?

    Overwriting a CSS Class How to?

    How to make images always relative to a div using CSS

    How to dynamically generate droppable/draggable/sortable div elements within a div?

    How to get inner and outer width to a single element?

    How to align things responsive html CSS

    How to use jQueryUI tootip along with my custom css

    How to handle CSS code in my Android email app?

    How do I loop a css animation with multiple keyframe definitions?

    How to apply properties to 3 types of input on HOVER?

    How to attach user CSS to Microsoft Edge?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How to specify a html tag on a LESS CSS nested class?

    How can I reduce the amount of vertical space between lines of text using CSS?

    How to not display common border between two adjacent divs?

    How to change background while changing visiblity?