Create a color theme mixin with Sass

Поделиться
HTML-код
  • Опубликовано: 28 ноя 2024

Комментарии • 52

  • @zachjensz
    @zachjensz 2 года назад +24

    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
      @KevinPowell  2 года назад +8

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

    • @proteus1
      @proteus1 2 года назад +4

      @@KevinPowell next project

    • @MuhammadAhmedAshraf
      @MuhammadAhmedAshraf 2 года назад +1

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

  • @eyeofthetiger7
    @eyeofthetiger7 2 года назад +7

    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

  • @donmorris4506
    @donmorris4506 2 года назад +5

    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
      @xervoo6419 2 года назад +1

      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
      @KevinPowell  2 года назад +7

      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.

  • @guillermomf
    @guillermomf 2 года назад +2

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

  • @AlThePal78
    @AlThePal78 2 года назад +1

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

  • @NZMPlays
    @NZMPlays 2 года назад +1

    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!

  • @Mego4884
    @Mego4884 2 года назад

    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

  • @joebanfi8531
    @joebanfi8531 2 года назад

    Great video, can't wait for the course.

  • @ThourCS2
    @ThourCS2 2 года назад

    From thousand followers to 500k, congratulations ❤️

  • @jennifermagpantay7933
    @jennifermagpantay7933 2 года назад

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

  • @twrkhanasparukh
    @twrkhanasparukh 2 года назад +2

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

  • @17aig
    @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?

  • @QuadDrums
    @QuadDrums 2 года назад

    This is fucking amazing, thanks for the video

  • @kribo9604
    @kribo9604 2 года назад

    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 ?

  • @A_Lesser_Man
    @A_Lesser_Man 2 года назад +1

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

  • @crousdioll
    @crousdioll 2 года назад

    That's great thank you KEV

  • @jarekkubiak
    @jarekkubiak 2 года назад

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

  • @triloksingh8596
    @triloksingh8596 Год назад

    You are genius 👏

  • @JEsterCW
    @JEsterCW 2 года назад

    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

  • @lovelynduru-magnus3233
    @lovelynduru-magnus3233 2 года назад

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

  • @eyeofthetiger7
    @eyeofthetiger7 2 года назад

    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
      @KevinPowell  2 года назад +1

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

  • @faulekatze3374
    @faulekatze3374 2 года назад

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

  • @asterisked
    @asterisked 2 года назад +1

    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
      @KevinPowell  2 года назад +1

      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
      @asterisked 2 года назад

      @@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!

  • @sbtoolman12123
    @sbtoolman12123 2 года назад

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

  • @drakZes
    @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.

  • @rendivs
    @rendivs 7 месяцев назад

    I love css

  • @hjetwd
    @hjetwd 2 года назад

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

  • @omarakki705
    @omarakki705 2 года назад

    Thanks bro

  • @sawzarnilinhtay5551
    @sawzarnilinhtay5551 Год назад

    should we use sass/scss in future(2023)

  • @glenn_myridia
    @glenn_myridia 2 года назад

    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!

  • @Sam-vz7pf
    @Sam-vz7pf 2 года назад

    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
      @KevinPowell  2 года назад

      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
      @Sam-vz7pf 2 года назад +1

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

    • @Sam-vz7pf
      @Sam-vz7pf 2 года назад

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

  • @whatthefunction9140
    @whatthefunction9140 2 года назад +1

    Can I do this in postcss too?

    • @KevinPowell
      @KevinPowell  2 года назад +1

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

    • @whatthefunction9140
      @whatthefunction9140 2 года назад

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

  • @lewis4929
    @lewis4929 2 года назад

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

  • @excelemma5960
    @excelemma5960 2 года назад

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

    • @KevinPowell
      @KevinPowell  2 года назад +1

      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
      @excelemma5960 2 года назад

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

  • @carolmckay5152
    @carolmckay5152 2 года назад

    🤯

  • @annettelasar9347
    @annettelasar9347 6 месяцев назад

    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?