Try Tuts+ Premium, Get Cash Back!
SASS and Compass for Web Designers: Finishing Off
videos

SASS and Compass for Web Designers: Finishing Off

on Aug 20th 2012 with 8 comments
Tutorial Details
  • Topic: SASS and Compass, CSS
  • Difficulty: Beginner
  • Screencast duration: 30 mins

Final Product What You'll Be Creating

This entry is part 5 of 6 in the series SASS and Compass for Web Designers

SASS and Compass for Web Designers

The end is in sight! Our Creative Portfolio web page is almost finished. In these final two screencasts we’ll look at cleaning up our SCSS file structure, styling the newsletter subscription form and the footer.

Newsletter Form

We’ll start out by properly organizing the reusable elements within our SCSS file, after which we’ll style the newsletter subscription form.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube!

The Footer

The final hurdle! We’ve already prepared a _footer.scss file, so let’s crack on and style our footer.

Alternatively Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube!

If you enjoyed this series and would like to refer back to the tutorials at any point, you can find all 8 videos featured as a playlist on YouTube. Two hours’ learning – enjoy!
Series Navigation<< SASS and Compass for Web Designers: The HeaderSASS and Compass for Web Designers: The Slider >>

Norris is PureMellow on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

My name is Norris, and I am a hybrid Designer/Developer. I work mostly with Wordpress, but in my spare time I like expanding my knowledge in various other programming languages, and working on my own projects. You can find me on twitter as @justnorris and my personal website is justnorris.com.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Andy

    I was just waiting for this ! Loved the whole series Norris :)

  • samir

    thank you very mutch
    you convinced me to use sass
    very helpfull and usefull project tutorial

  • Hamid

    so you missed that part before Slider part?:-), btw thank you.

  • http://yes.com Robert

    This is so amazing! I have been coding for a while in c++ and pascal, and a month ago i started learning to code some websites, i was looking for a way to code them in a smart way with own made functions, and as it seems I have found it in sass. Thank you very much sir!

  • http://www.facebook.com/pless84 Jakob Pless

    In what movie do you talk about the pattern?

    • http://twitter.com/MaxMythic m/x //ythic

      Jakob, he missed those parts so we don’t get pattern explained. Also did you notice the slider and introduction scss code sections were never covered. I hope he completes this tutorial but if not, at least we can look at the code.

  • empo

    Awesome, i just finish to practive with your video tutorial ,you have done a gret job about learning sass with a concret building a page.

    Thanks again.

  • http://twitter.com/MaxMythic m/x //ythic

    Norris, you never covered the Introduction or Slider code in the previous video. This lesson is slightly incomplete because of that but at least we can see the code. Are you planning on adding the introduction and slider section?