Changing Colors on Bootstrap with SASS

Поділитися
Вставка
  • Опубліковано 4 січ 2025

КОМЕНТАРІ • 62

  • @AccessCode101
    @AccessCode101  4 роки тому +9

    Are you enjoying SASS in 2020? What's your favorite SASS tweak on Bootstrap thus far? Let me know!

  • @sandralloyd3754
    @sandralloyd3754 Рік тому +1

    This video is SO GOOD. I like how you go through all the steps you need to take to get it set up, then explain how to do it and why you don’t do it a different way. Thank you for eliminating all the confusion!

  • @juviscript
    @juviscript Рік тому +1

    This has been the most helpful tutorial. All the other ones that i've watch have explained much about the SASS complier and the expected behavior. Super well rounded and helpful, thanks so much. :-)

  • @chevrotain
    @chevrotain 3 роки тому +4

    Exactly what I needed. SASS was worrying me, but this makes it so simple! Thank you!!

  • @queenofsheba8275
    @queenofsheba8275 Рік тому

    This video has 47k views but only 214 subs. That's ridiculous. Anyway, this was an excellent tutorial. You're one of the rare content creators who are actually good teachers. It would be amazing to see more content from you.

  • @춤의신-i9g
    @춤의신-i9g 2 роки тому

    I'm Korean and I was having a hard time customizing bootstrap during the current side project. I studied only the backend. which I don't know what JavaScript grammar or scss is, and I don't even know English!. But I got a good sense of how to do it after watching this video. Thank you very much!!!!

  • @NICKYG81dj
    @NICKYG81dj Рік тому

    Is it possible to have these new custom rules written on an additional CSS sheet where inside I can only find the new custom rules added without having to overwrite the 100,000 lines of code of the original BS5?

  • @PracticallyImprove
    @PracticallyImprove 2 роки тому

    hi whenever i run the code in terminal it shows me the error 'bash: sass: command not found'

  • @prince5105
    @prince5105 3 роки тому +1

    when I tried to use the terminal. why am I getting an error.? is there something that I need to do before I run the Terminal?

  • @anoop.225
    @anoop.225 2 роки тому

    How to add custom color for button :hover style similar method ?

  • @briannnelson
    @briannnelson 3 роки тому

    VERY HELPFUL!! THANKS :) I don't have VB so I used the CDM terminal to install SASS "npm install -g sass" and to compile the files "sass main.scss main.css".

  • @LoyaltyLP
    @LoyaltyLP 3 роки тому +1

    Thank you!! Very helpful and clear tutorial, just what I needed!

  • @atvaa
    @atvaa 2 роки тому

    I have changed the Primary color by following your method. Color changed everywhere but its not changing the input focus shadow color according to the primary color that I changed. Can you help me?

  • @handnou7660
    @handnou7660 3 роки тому

    I have imported the file successfully but when I changed the color
    It can not change but ..... It remains the same ,......
    I have to go to html and change it as inline style

  • @eduardohenriquedeassis9729
    @eduardohenriquedeassis9729 3 роки тому

    Perfect and very precise, it helped a LOOOOT!!
    Warm greetings from Brasil.

  • @vik237
    @vik237 Рік тому

    The sass comand dont work for me

  • @saidgwx
    @saidgwx 2 роки тому +3

    You can use "sass main.scss main.css --watch" instead of the downloading this plugin.

    • @AccessCode101
      @AccessCode101  2 роки тому

      Oh for sure. I wanted to show how to change the colors using BOOTSTRAP, though. But yeap, npm'ing SASS and watch it for changes would be better if you only want to use raw SASS. Many people use Bootstrap only for CSS and use the same color over and over in all their projects. You can change that behavior from within the files.
      Thank you @Said Fekih

  • @cheekymonkey5973
    @cheekymonkey5973 3 роки тому +1

    Awesome video. When you clicked new terminal how did the path pointed directly to the folder you are working?

    • @opeyemiakintunde4907
      @opeyemiakintunde4907 3 роки тому +1

      After clicking on "terminal," then type in "cd" which indicates change of directory (i.e., folder) or file you are planning to work on.

  • @Lemon.8
    @Lemon.8 3 роки тому

    Very insightful video, thanks for explaining the whole process.

  • @nooralmoswy7347
    @nooralmoswy7347 2 роки тому

    that's so helpful, thank you man👍👍

  • @finchaser
    @finchaser 3 роки тому

    Im stuck at the first command in the terminal, i keep getting "The term 'sass' is not recognized as the name of a cmdlet" is there something i require before i can run this command ?

    • @AccessCode101
      @AccessCode101  3 роки тому

      Did you install the live sass compiler?

    • @finchaser
      @finchaser 3 роки тому

      @@AccessCode101 I did

    • @AccessCode101
      @AccessCode101  3 роки тому

      @@finchaser Did you click on Watch SASS in the vs code taskbar?

    • @finchaser
      @finchaser 3 роки тому

      @@AccessCode101 yep i did still didn't work, i figured out a workaround

    • @lucaszapata
      @lucaszapata 2 роки тому

      @@finchaser hi!, how did you solve that issue?, I´m having the same problem

  • @szymonpszczoka3284
    @szymonpszczoka3284 2 роки тому +4

    Hey,
    windows + arrows
    In order to make 2 windows :)
    nice video btw

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 Рік тому

    great video!

  • @paterfamilias01
    @paterfamilias01 3 роки тому

    So after everything gets compiled/imported into the main.css, its okay to delete all the other files? To make it faster?

    • @ErminDedicNT
      @ErminDedicNT 3 роки тому

      Since the main.css is all the css that is loaded. you just stop the watcher, and you can delete everthing except the main.css, if you want to push your code to git or something.

  • @melissawebster1040
    @melissawebster1040 Рік тому

    THANK YOU SO MUCH!

  • @handnou7660
    @handnou7660 3 роки тому

    Need help to that

  • @Maya-gk2il
    @Maya-gk2il 4 роки тому +1

    You are the best, Thank You

  • @littlemonsteur8108
    @littlemonsteur8108 4 роки тому +1

    thanks , it helps a lot !

  • @bilguunps9209
    @bilguunps9209 3 роки тому

    Thank you so much really helped me

  • @CarlNeuDitters
    @CarlNeuDitters 3 роки тому

    Would you mind letting me know what the value is of Sass (or scss) compared to normal CSS? Can not all (or nearly all) of these changes be made by CSS? The CSS that I learned has plenty of control of the appearance of web elements, furthermore, CSS is far more direct in its programming and implementation. I can see from your video that Sass works, however I just can not understand the purpose of using Sass over CSS.

    • @ErminDedicNT
      @ErminDedicNT 3 роки тому

      Sass has many functions that make writing css much easier. Nesting, variables, if-statements, mixins and etc...

  • @Caffer9286
    @Caffer9286 4 роки тому

    thank you. Great explaining

  • @Hexatomb
    @Hexatomb 3 роки тому +2

    Changing the defaults defeats the purpose of defaults. If you update bootstrap, you lose the changes. You should override the properties in your own file then import bootstrap.

    • @AccessCode101
      @AccessCode101  3 роки тому +2

      You're right. I explain that in the video. You can have the defaults of Bootstrap and import everything on a file that is exporting your CSS. You can override the variables you want without changing the ones you want it keep.

    • @ludaxofficial
      @ludaxofficial 3 роки тому

      so this is not the right way?

  • @sreenivasg9
    @sreenivasg9 4 роки тому +1

    Great job thanks!

  • @miguelgil2172
    @miguelgil2172 Рік тому

    thanks a lot

  • @JoaoPaulo-hn5cf
    @JoaoPaulo-hn5cf 4 роки тому +1

    thank you guy

  • @handnou7660
    @handnou7660 3 роки тому

    Cuz i downloaded the zip folder
    And picked
    Dist
    Js
    Scss

  • @sweetiei.8403
    @sweetiei.8403 4 роки тому

    it is not recommended to substitute in raw scss files!

    • @AccessCode101
      @AccessCode101  4 роки тому +1

      True. Unless you download it and create your own file that exports it to CSS.
      Thanks!

    • @sweetiei.8403
      @sweetiei.8403 4 роки тому

      @@AccessCode101 true as well😊👌

  • @oddityestudio5178
    @oddityestudio5178 4 роки тому

    My OCD can't deal with the mess on your desktop haha, thank you for the video though

    • @AccessCode101
      @AccessCode101  4 роки тому

      Yeap. And I clean it up every months, but still.

  • @shamsulhamimiab.rahman3939
    @shamsulhamimiab.rahman3939 2 роки тому

    Cool!!!

  • @vermithor51ac
    @vermithor51ac 3 роки тому

    Thanks dude

  • @AAAAAAAAAAAAAAAAAAAAAAAAAAHHo7
    @AAAAAAAAAAAAAAAAAAAAAAAAAAHHo7 3 роки тому

    banger

  • @colder3635
    @colder3635 3 роки тому

    that's ok

  • @theonewhowas7709
    @theonewhowas7709 2 роки тому

    really? why you slamming keys man wtf

  • @anubisgreyskull4953
    @anubisgreyskull4953 4 роки тому +1

    1st

  • @Numa.m
    @Numa.m Рік тому +1

    easy to hear you out , not speak very fast like other programmer 😭😭🫡