SHARE

Hey gang, in this SASS tutorial, I’ll show you how we can create a flexible grid system using a little math inside SASS. It’s super easy and very cool, and you’ll learn about how we can pass variables to mixins along the way.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/sass-playlist
+ Atom editor – https://atom.io/

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

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

21 COMMENTS

  1. I keep getting an error in the compiler : "Undefined operations: "4 -1 times 2%" . " Referring to width: ((100% – (($cols -1) * $mgn)) / $cols ); in my mixins file.

  2. Very cool mixin, I'm astounded how easy and fast it is to create a grid with it, thx a lot!!! Yet this grid has one issue, try to set the number of columns to any odd number (lets say 5, or 3) when in MEDIA query, and you'll see the drawbacks. Has anyone tried to fix it?

  3. This is way too cool man, I loved the mathematics, its awesome and made my way of work to easy……….
    Thanks so much for educating everyone……

  4. Sweet work man! Would you say this is preferable to Bootstrap grid system? This sass version appears a lot more lightweight? 🙂
    Keep up the goodwork! Cheers

  5. Awesome Youtube tutorials!!
    I am getting 1 less column than I should be and I am getting a right margin?
    (pls see my code below)
    ————————————
    @mixin grid ($cols, $mgn) {
    float: left;
    margin-right: $mgn;
    margin-bottom: $mgn;
    width: ((100% – (($cols – 1 ) * $mgn) ) / $cols );
    & :nth-child(#{$cols}n) {
    margin-right:0px;
    }
    }
    ———————————–
    style.scss

    @mixin grid ($cols, $mgn) {
    float: left;
    margin-right: $mgn;
    margin-bottom: $mgn;
    width: ((100% – (($cols – 1 ) * $mgn) ) / $cols );
    & :nth-child(#{$cols}n) {
    margin-right:0px;
    }
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here