CSS Preprocessors

June 3rd, 2014 | by Joshua Archer |

Paul Bronson – CSS Preprocessors

http://ned.highline.edu/~pabronson/200/

  1. 2 Responses to “CSS Preprocessors”

  2. By Docc Jc Howard on Jun 9, 2014 | Reply

    Yes, I was able successfully complete the tutorial. One main issue I continued to run into was the wording used to explain and describe certain main topics. If I was completely new to programming but needed assistance with CSS Processors I would have a challenge understanding the descriptions given here. I did however learn that css processors are suppose to be easier than plain old css and the different types of processors and how they should be implemented with your code. If was needing to utilize css processors and I found this tutorial it would be challenging to follow along initially because of ignorance to some of the words used but overall it could be helpful. I liked that it was well formatted and very professional. Maybe take more time to explain it in a way that a beginner could understand what exactly you’re talking about but otherwise it was good.

  3. By Ryan Harmon on Jun 9, 2014 | Reply

    1. Were you able to successfully complete the tutorial? What issues or challenges did you face?
    I completed the tutorial, it was well laid out and easy to follow.

    2. Summarize what you learned from the tutorial.
    The most significant things I learned was that CSS preprocessors allow variables in CSS styles so you can change one variable and it will change every instance of that color being used. Here are some snipets from his tutorial I found most usefull.
    “If you need to change a property value (like a color), you only have to change it in one place, rather than hunting through all of the CSS files for every instance.
    @mycolor: #800080;
    div {border: 1px solid @mycolor;}
    p {color: @mycolor;}
    Images on page 7 are not loading correctly.
    @grid-columns: 12;
    @grid-width: 960px;”

    I also learned that you can use LESS to calculate the size of a page and then use grids to ‘cut it up.’
    .calculate-column-width(@cols)
    {
    width: (((@grid-width / @grid-columns) * @cols / @grid-width) * 100%);
    }

    3. Did you find the tutorial useful and helpful? Why or why not?
    Highly valuable information. I’m not a CSS guy, and any tools I can utilize to make it easier will be great for me. I particularly like being able to use a variable instead of using find/replace queries.

    4. What did you like most about the tutorial? (Be specific.)
    I love the use of the PowerPoint flipchart to move between pages. It looked great and helped make the content digestible.

    5. What about the tutorial could be improved? (Be specific.)
    I didn’t really understand how to install LESS. I think it could have used an additional piece at the end of how to get started. I would have liked to see screen shots of what the code he was using looked like.

Sorry, comments for this entry are closed at this time.