Changing Colors on Bootstrap with SASS

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ก.พ. 2025

ความคิดเห็น • 62

  • @AccessCode101
    @AccessCode101  5 ปีที่แล้ว +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!!!!

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

  • @eduardohenriquedeassis9729
    @eduardohenriquedeassis9729 3 ปีที่แล้ว

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

  • @ignaciomatiasdiaz9710
    @ignaciomatiasdiaz9710 ปีที่แล้ว

    great video!

  • @nooralmoswy7347
    @nooralmoswy7347 2 ปีที่แล้ว

    that's so helpful, thank you man👍👍

  • @szymonpszczoka3284
    @szymonpszczoka3284 3 ปีที่แล้ว +4

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

  • @Lemon.8
    @Lemon.8 3 ปีที่แล้ว

    Very insightful video, thanks for explaining the whole process.

  • @melissawebster1040
    @melissawebster1040 ปีที่แล้ว

    THANK YOU SO MUCH!

  • @bilguunps9209
    @bilguunps9209 3 ปีที่แล้ว

    Thank you so much really helped 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

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

  • @Maya-gk2il
    @Maya-gk2il 4 ปีที่แล้ว +1

    You are the best, Thank You

  • @PracticallyImprove
    @PracticallyImprove 2 ปีที่แล้ว

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

  • @littlemonsteur8108
    @littlemonsteur8108 4 ปีที่แล้ว +1

    thanks , it helps a lot !

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

  • @Caffer9286
    @Caffer9286 4 ปีที่แล้ว

    thank you. Great explaining

  • @anoop.225
    @anoop.225 2 ปีที่แล้ว

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

  • @sreenivasg9
    @sreenivasg9 4 ปีที่แล้ว +1

    Great job thanks!

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

  • @atvaa
    @atvaa 3 ปีที่แล้ว

    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?

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

  • @miguelgil2172
    @miguelgil2172 2 ปีที่แล้ว

    thanks a lot

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

  • @JoaoPaulo-hn5cf
    @JoaoPaulo-hn5cf 4 ปีที่แล้ว +1

    thank you guy

  • @shamsulhamimiab.rahman3939
    @shamsulhamimiab.rahman3939 2 ปีที่แล้ว

    Cool!!!

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

  • @vik237
    @vik237 ปีที่แล้ว

    The sass comand dont work for me

  • @vermithor51ac
    @vermithor51ac 3 ปีที่แล้ว

    Thanks dude

  • @AAAAAAAAAAAAAAAAAAAAAAAAAAHHo7
    @AAAAAAAAAAAAAAAAAAAAAAAAAAHHo7 3 ปีที่แล้ว

    banger

  • @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 3 ปีที่แล้ว

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

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

  • @CarlNeuDitters
    @CarlNeuDitters 4 ปีที่แล้ว

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

  • @handnou7660
    @handnou7660 3 ปีที่แล้ว

    Need help to that

  • @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😊👌

  • @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 😭😭🫡