Create a color theme mixin with Sass

I'm working on a course that deep dives Sass (and more!): beyondcss.dev
🔗 Links
✅ The code: codepen.io/kevinpowell/pen/bG...
⌚ Timestamps
00:00 - Introduction
00:35 - Starting variables
01:43 - The basics of the mixin
02:33 - Adding arguments to the mixin
04:00 - The problem with passing a theme variable as an argument
05:00 - Fixing the problem
05:45 - What if we want it to also accept gradients?
06:37 - Adding an if/else statement
09:30 - Allowing it to accept custom colors as well
10:28 - Go Beyond CSS
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@eyeofthetiger7]

I'm pumped about your "Go Beyond CSS" I've been looking for a course lately that would teach truly advanced scss with great project structure and implementation to take full use of Sass capabilities

[@zachjensz]

I actually prefer seeing the SCSS side by side with the CSS rather than the webpage. As a sass beginner I like to see what CSS is being transpiled!

[@KevinPowell]

Good point, I probably should have done this in VS Code to make it easier to see both at the same time

[@proteus1]

@@KevinPowell next project

[@MuhammadAhmedAshraf]

@@KevinPowell can you make a video on paper ripple animation like youtube has when the internet is not avaiable the RETRY Button You should also do another live coding video

[@guillermomf]

I've just begun a deep learn about Sass and your video gimme a lot of ideas to work. Thanks!!

[@NZMPlays]

You're the best man. You're one of the reasons I am going to be able to make more money at my job in the coming years, your videos are helping me make purchase funnels and Im getting to finally stretch my design legs using your tricks! Thanks Kev!

[@joebanfi8531]

Great video, can't wait for the course.

[@jennifermagpantay7933]

Another great video, Kevin!!! You're a star!!!

[@Mego4884]

man thank you, I love how the universe(or youtube algo) works, but this is truly needed right now in my life and thank you for this idea

[@AlThePal78]

never knew about the if statment or list that is awesome wow amazing I am truly mind blown how css came a long way with the scss etc..

[@donmorris4506]

You the man Kevin. You have helped me up my game with my web development. An idea: I had a customer who asked me to give users the option to choose the theme they wanted to use. I did this with bootstrap themes from boot swatch by providing a drop down in the navbar to allow selection of a theme and the enabling and disabling the stylesheets in the html head via js. It works fine by changing things on the fly, but I would love to see an alternative way to provide user selectable color themes.

[@xervoo6419]

One (the only?) alternative is using css custom properties (variables) throughout your css and changing a single role on the body to change what colour the variables have.

[@KevinPowell]

Yeah, like Xervoo said, using custom properties would be the way to go there. The only alternative is having a lot of unused CSS sitting around. You could even have a class, like .theme-a {} and all the variables are defined in there with one theme, an then a .theme-b {} that has the same variables, but with different values. It would result in unused CSS, but it probably wouldn't be *that* much. Alternatively, you could avoid that by using JS to update all the custom props, maybe pulling values in from a JSON file or something, though I've never tried that.

[@crousdioll]

That's great thank you KEV

[@ThourCS2]

From thousand followers to 500k, congratulations ❤️

[@17aig]

I'm very amazed with your courses videos and I've learned a lot however can you explain I've never seen you using PHP is it something we can ignore and build a website without using PHP?

[@glenn_myridia]

Hey Kevin, thanks for the great content as always! I'd love to see your take on themes and CSS architecture in general within a React application using Emotion or Styled Components. Is this something you would consider? Thanks!

[@triloksingh8596]

You are genius 👏

[@twrkhanasparukh]

Was hoping to see how you incorporate css variables in the scheme of things.

[@omarakki705]

Thanks bro

[@kribo9604]

Is there a list of built in modules and how and where we can use them? Is there a Kevin Powel building sass modules video ?

[@QuadDrums]

This is fucking amazing, thanks for the video

[@lovelynduru-magnus3233]

Hello Kevin, I'm trying to keep up with all of the videos you have created and you're still making new ones.

[@faulekatze3374]

Hey Kevin, what do you think about Bulma instead of bootstrap/grid, or do you have any videos on it? Thanks!

[@jarekkubiak]

you got extra like for star wars t-shirt!!!

[@drakZes]

I tried this with angular, but getting an error saying the list.lenght is undefined. I have isntalled Sass and Sass loader using npm. Anyone know how to fix this.

[@A_Lesser_Man]

i have to disagree with ignoring a null $bg. best to trap for that, or set a default when $bg is null.

[@asterisked]

Hello Kevin! For someone who's been developing for quite a long while with React Native and hasn't used common CSS in a while, would you recommend using plain CSS or SCSS for a web project? Or something different altogether? I haven't picked up web in a while so I don't know what the current state is haha Thanks!!

[@KevinPowell]

If you're going React, CSS-in-JS solutions are veery popular. I'm still a fan of creating a global stylesheet, either with regular CSS or Sass though :)

[@asterisked]

@@KevinPowell Seems like styled-components is the more popular, right? I remember using it in the past, will have to go through the documentation again. Having global styles along with this sounds good too. Thanks Kevin!

[@JEsterCW]

I pref using other stuff, but this is defo interesting if someone is going to make own tool for own stuff or usage, i think this is too much of work for something small, there are frameworks, ui libs and many different tools that can improve ur productivity, but its defo usefull for ppl who are constantly using sass in their projects and dont wanna use anything else cause idk for some reason lol

[@eyeofthetiger7]

One thing that I'm working on right now and curious how best to go about it is a Sass architecture and implementation for Nx monorepos, which is an increasingly popular tool for building large, complex apps (mostly frontend) with multiple libraries for a given project. Could be a thing more people end up running into.

[@KevinPowell]

monorepos are definitely growing in popularity, though they're a little out of my comfort zone. I do think any well thought out design system should be able to handle anything that's thrown at it though...

[@hjetwd]

Kevin please make a video about the functions and placeholders in sass =) thx

[@Sam-vz7pf]

Hey Kevin, Hope you are doing fine just want to ask you i it important to install node and sass on to our computer or now it can be done by only the vs code extension live SASS compiler??? Please do answer. Thanks.

[@KevinPowell]

I strongly recommend using the node and sass through the command line and going from there (or of course, using build tools and other things, which also often use the command line as well). You can use live sass compiler, but if you do, make sure you're using the new one and not the old version of it.

[@Sam-vz7pf]

@@KevinPowell Thank you so much Kevin. One last thing is there any difference between both in functionally or in other aspects??

[@Sam-vz7pf]

@@KevinPowell Please if you can explain it will be a great help.

[@codingwithrendi]

I love css

[@carolmckay5152]

🤯

[@sbtoolman12123]

for a guy who has JUST started to figure out grid and flexbox, this is VERY overwhelming...i think i will go back to grid and flexbox and leave this to the pros..

[@whatthefunction9140]

Can I do this in postcss too?

[@KevinPowell]

as far as I know, postcss doesn't do things like mixins, if/else, etc.

[@whatthefunction9140]

@@KevinPowell love you Kev. Can I call you kev?

[@lewis4929]

Didn't you say in a different vid to not use @include? Or have I misunderstood you?

[@EosDoesStuff]

You must be thinking of @import

[@sawzarnilinhtay5551]

should we use sass/scss in future(2023)

[@excelemma5960]

Started web dev some months back😩 having so much issues with javascript need some advice from you😞

[@KevinPowell]

JavaScript is definitely not my strength! Check out Web Dev Simplified as a first stop, and Brad Traversy or Net Ninja might have some crash courses on it as well.

[@excelemma5960]

@@KevinPowell Thank you so much..i also watch Web Dev simplified

[@annettelasar9347]

Is this really SASS as you keep saying? I thought you didn't use any curly brackets and semicolons in SASS. Isn't this SCSS?