Yo gang, in this final SASS tutorial, I’ll show you how we can use @if statements to control which parts of the CSS to use for particular elements.

+ Repo –
+ Atom editor –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. Great stuff! thanks a lot.
    I'd like to ask you a question, not sure you answered in some other tutorial:

    My question is: I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific button.

    Can this be done with CSS only, without any javascript?

  2. Learning SASS is really important most of the job listing i see on or any other job sites SASS is listed. It's a great tool and easy to learn when the teacher is doing a great job. So thank you so much for this series and all the other ones too!!! Great Stuff 🙂

  3. Hey dude. Great series. I'm trying to find out what the equivalent @keyframes animation is in SASS. Do you know how I would write that? I can't seem to find any references to it. An example I have in my CSS is:
    @keyframes headerSlide {
    from{transform: translateY(-100px);}
    to{transform: translateY(0);}
    This slides a header in from the top but I can't seem to find out what the relevant SASS would be to replace this. Your help would be greatly appreciated.
    Kind regards
    p.s. I'm using the .sass extension (bracketless).

  4. Thanks for the tutorial, but some things felt a bit wrong.

    1. The site is not responsive.
    2. Using floats and clearfixes; WHAT YEAR IS THIS?
    3. Using media queries as a mixin produces A LOT of repetitive bloat CSS code.

    Other than that I learned a lot, thanks.

  5. I started coding with SCSS 2 days ago and your tuts helped me out so much! Thanks a bunch!
    Now im wondering if i can combine your grid and mQ but can't get it to run…
    thought about something like this:

    .item {
    @include grid(4, 2%);
    @mQ(800px) {
    @include grid(3, 2%);

    COuld you give me an hint / approach? Much love from Germany


Please enter your comment!
Please enter your name here