SASS Tutorial #5 - Mixins

Hey gang, in this SASS tutorial, I'll be showing you how we can use mixins to create re-usable chunks of CSS, whose behaviour can change based on variables we can pass through to them.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
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 =====================

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

[michakaczanowicz]

Maybe I am missing something, but couldn't we just create a separate class (say "banner") with these styles and apply this class to both of them (presumably overwriting text align with !important or something)? How would be this different from creating and including a mixin?

[lamarati]

Great to found this series made by ninjas. Just what I needed.

[dankierson]

Good intro to mixins. Clear and down to earth.

[noxid]

Your tutorials are the best. Thanks for all the work you put in Ninja.

[vladyslavshaposhnikov]

Thanks for your tutorials. I speak in russian but your tutorials are easier to understand for me than russian variants

[somnvm]

Thanks, that's just what I needed. I might subscribe to this channel, for css.

[ivofrancisco]

Once again, Great tutorial! Thank you.

[tovawr]

this taught me how to create and apply a mixin, but not really the use cases where I can/should use it. also it was a pretty slow video; if you're teaching about mixins, I don't need to see you type out (while you read them out without explaining) all the styles you're applying to your banner

[jacobsobota]

Great tutorial to be honest :) You've got a new subscriber. Cheers!

[sirbalafort]

So is a mixin similar to a JavaScript function? To me, it is a similar process in that you define attributes you want applied in the function (or mixin) when the function (mixin) is called and is now reusable throughout your code.

[EugeneMakaya]

Is that a plugin that predicts your code or it's just built in Atom?

[Ericacamilo]

I love your tutorials... Pay not attention to the haters :)

[gaganry]

That pond sign is coming from Britain.... :D

[MuhammadRizky-ndcx]

awesome !!
so mixins == function is true ?

[zackplauche]

This was a really cloudy tutorial of how to use mixins...

You could make it much clearer if you gave an example of mixins without the images and the 2 different sections on 2 entirely different parts of the page (without all the scrolling).

[Snoo]

Mixins remind me a lot of JavaScript functions

[mariotsck]

I don't have clear the utility of ::after command and why we use it in "ul" element, can you help me to understand?

[Neroshkiet]

Can you tell me what atom theme are you using, because the default one is kinda all over the place with all the colors it uses.

[moidmw]

This is not actually how you use mixin. This is simply extending your class.

[djsamke]

For all the ninjas who cloned the repo, just add the link to the reset.css sylesheet, as our sensei forgot to do this and it will affect you as you go.