Contributing on Github: Sass to SCSS

I am a firm believer that if you want learn how to do something, you need to do something. In the past year I have been working mainly with the web as an UX designer. Lately there has been a move to design in browser. This has forced me to up my knowledge of how to code for the web.

If you want to learn how to do something, you need to do something

I have benefited a lot from the openness of web community. There is a lot of sharing of code snippets, how-to videos and frameworks to help make it easier to get started. In the past year I have learnt the following concepts: responsive web design, atomic design patterns, CSS3, HTML5, Sass and build tools like Gulp/Grunt. One project byTravis Neilson called DevTips Starter Kit was updated recently. It is a small project that was created to help get started with creating a website. He is a big fan of Sass over SCSS (it’s Sass not SASS). I am familiar with SCSS for preprocessing CSS. This exercise of reverse engineering Sass to SCSS will help me see the differences between both syntax. What I did:

  • Convert Sass to SCSS
  • Restructure the project to separate CSS and SCSS
  • Add variables for fonts
  • Extract colours used in project out to variables

You can check out the code here on Github https://github.com/lifeofmle/SCSS-DevTips-Starter-Kit

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s