sass vs scss - what's the difference and which should you use?

แชร์
ฝัง
  • เผยแพร่เมื่อ 20 ต.ค. 2024

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

  • @setyoufree2726
    @setyoufree2726 5 ปีที่แล้ว +265

    What's wrong with people who gave thumb down? All free knowledge like this should be appreciated.

    • @skytale35
      @skytale35 4 ปีที่แล้ว +22

      i would put money most of the thumbs down you see on tutorial videos are from people with competing tutorial videos lol

    • @towatchyoutube7245
      @towatchyoutube7245 4 ปีที่แล้ว +12

      how about fat fingers ?

    • @nanohedron
      @nanohedron 4 ปีที่แล้ว +5

      It was the mouse pad. 35 losers who spend their waking hours trashing Canada and one who is critical of "improper display and use of the national flag." And then one competing tuber.

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

      So true ❤️👏

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

      @@Tommy-jn9ps how is your comment related to anything tho

  • @MadBunnyRabbit
    @MadBunnyRabbit 5 ปีที่แล้ว +35

    Yooo! The intro is so freaking accurate. I love how self aware he is about why people would look for this. Great intro. Good job sir.

  • @soufianeibnouine
    @soufianeibnouine 4 ปีที่แล้ว +84

    CSS without curly braces looks kinda weird. I'll go with SCSS thought !
    Thansks for the video

  • @adlbh
    @adlbh 5 ปีที่แล้ว +22

    Could not find better videos about coding so well explained until I found your channel.
    Congrats... Your videos are awesome! Keep it up!

  • @bellatobe
    @bellatobe 4 ปีที่แล้ว +34

    Thank you for the clear explanation, I'm completely new to Sass and SCSS and this has helped me!

  • @crooker2
    @crooker2 4 ปีที่แล้ว +13

    SCSS for the win! (I work a lot with other people's css... So now I don't have to worry about bringing it into scss).

  • @badihbarakat5832
    @badihbarakat5832 5 ปีที่แล้ว +18

    Fascinating... I had lots of compile errors because the file extension was .sass. Didn't know that it is different than .scss... Excellent...

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +5

      Glad I could help out!

  • @rubhan94
    @rubhan94 5 ปีที่แล้ว +34

    10 seconds into the video and that is so spot on. It was frustrating to look up videos on TH-cam about SASS because some don't mention that they are actually using SCSS and I think they should write that and not just SASS in the title. idk they look different so would help to distinguish between videos. Only looked into .sass, just know that there is different syntax for .scss.

    • @syahmi518
      @syahmi518 5 ปีที่แล้ว +5

      Yeah broo .. They just mixed it up .. Content is scss but the title is SASS .. And i just.. Whattt

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +10

      I do it too... so sorry about that. It's because people will say Sass, even if they are referring to SCSS, even if just talking. Specially with SCSS being far more popular, it's just sort of synomimous with saying Sass now. It's the same language, just a different syntax... but yeah, 100% can be confusing.

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

      @@syahmi518 ahaha i get it bro, puff ,your head blew up at that very moment 🤣🤣 you were no longer able to can

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

    Kevin, you are amazing person! I want to thank you for you kindness!

  • @annoying_something
    @annoying_something 4 ปีที่แล้ว +294

    So SASS is just CSS “PYTHON Style”? - Sounds cool

    • @josephm.afonne7749
      @josephm.afonne7749 3 ปีที่แล้ว +10

      Yeah i thought the same thing xD

    • @jmb9969
      @jmb9969 3 ปีที่แล้ว +2

      sadly everyone uses scss...

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

      Ie. YAML

    • @cookedpotato
      @cookedpotato 2 ปีที่แล้ว +1

      i think its more of Sass is just Scss but python style

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

      When someone says "python style" what a programmer listens is music

  • @clevermissfox
    @clevermissfox 10 หลายเดือนก่อน +1

    Love to see how KPs vids have grown !

  • @tossichugs
    @tossichugs 4 ปีที่แล้ว +6

    i came to this video because i was watching another one of your vids and thought scss looked interesting, now i feel a bit more inclined to learn because i like how it flows :3 Thanks for the vid!

  • @starryfoxx_
    @starryfoxx_ 3 ปีที่แล้ว +1

    By far the best video that's broken this down. Thank you so much.

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

    Great Video Kevin! Great stuff and still watching in 2022!

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

    And I was here thinking it's a totally complex css preprocessor or something. Thanks for easy tip.

  • @helenapersson5076
    @helenapersson5076 2 ปีที่แล้ว +4

    I've been learning CSS, but I'm trying to learn SCSS and turning to React now. It looks cleaner and it feels like it's easier to structure!

  • @Explore2Adore
    @Explore2Adore 4 ปีที่แล้ว +21

    For me it's SCSS, mainly so i don't start leaving out { ; } whenever I choose to write CSS.

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

    Great tutorial as always Kevin. Many thanks for a simple explanation.

  • @zarghamaijaz5933
    @zarghamaijaz5933 3 ปีที่แล้ว +20

    I personally think SCSS is better. The structure and nesting looks clean plus code editors and libraries like React natively supports it. Also you can't do much in the 5 seconds you saved by not putting curly braces in your SASS file

    • @Mephistolomaniac
      @Mephistolomaniac 2 ปีที่แล้ว +2

      As a python developer, I've always struggled to see it that way. When newlines and semicolons provide essentially the same information, the semicolon is just clutter to me. the same goes for indentation vs curly braces. True, it's silly to argue about "time saved", but aside from the CSS compatibility arguments, I honestly can't see an advantage of SCSS

    • @skylarkesselring6075
      @skylarkesselring6075 2 ปีที่แล้ว +2

      @@Mephistolomaniac curly braces add structure and readability for me, I hate trying to read python code.
      Also i love semicolons as well, they just look right to me. Even though I use JavaScript and technically don't have to use semicolons, i always do. Not using them is like a sentence without a period, i can read it just fine but somethings wrong in my head

    • @iced2916
      @iced2916 2 ปีที่แล้ว +2

      @@skylarkesselring6075 same, I always use semicolons in javascript, and even if I don't, prettier will add any missing semicolon everytime I save/format the code

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

      ​@@Mephistolomaniac i hate reading python because it doesn't have semicolons and curly braves lmao

  • @АннаКовыляева-ж3с
    @АннаКовыляева-ж3с 4 ปีที่แล้ว +2

    finally there is a clear explanation! thanks!

  • @dmitry.gashko
    @dmitry.gashko 4 ปีที่แล้ว +17

    I used to use sass, but than I realized that code editors often work with scss better - first of all auto-formatting and intellisense features.

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

    Why would I want to write more stuff... sass is so much cleaner, love it!

    • @BobbyBundlez
      @BobbyBundlez 3 ปีที่แล้ว +1

      dude its literally two curly braces and semi colon less. relax. this saves u virtually no time in the end if you are a fast typer lol. and scss works soooo much better in VS code and most code editors.

  • @MrPratitb
    @MrPratitb 3 ปีที่แล้ว +21

    1:58 start of differences in code

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

    Your videos are awesome, Kevin!!! 🎉

  • @JoffreyB
    @JoffreyB 4 ปีที่แล้ว +5

    Videos starts at 0:52

  • @patcandedeir
    @patcandedeir 3 ปีที่แล้ว +1

    THANK YOU SO MUCH! THIS HELPED ME SO MUCH

  • @censura1210
    @censura1210 5 ปีที่แล้ว +4

    I hate SASS and love SCSS just because SCSS has brackets which I can trace where it starts and where it ends. I click the opening bracket and my Atom editor highlights where that bracket closes which makes it super easy.
    I'd switch to SASS only if there a way to tell what the fuck is going on, where does something start and where it ends

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

    Id like to see more of you talking in your code editor instead of you talking, was pretty straightforward and to the point while you were talking in the code editor which is great

  • @OffroadTreks
    @OffroadTreks 4 ปีที่แล้ว +2

    I'd been using SCSS becuase I was converting a lot of old projects and it's a lot easier to import and get rolling. And when you don't know what to do with part of a project, you can just leave that old CSS in there while you upgrade the project.

  • @dzk6714
    @dzk6714 4 ปีที่แล้ว +5

    Sass is way faster and cleaner to write (who would want to write more code) , but everyone has their preferences ..

  • @The_riyam
    @The_riyam 5 ปีที่แล้ว +3

    Thanx ... that question was in my mind

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

    Very informatonal and to the point. Thanks!

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

    "When you're working in a team, you have to do what your team does, just to make life easier." Nuff said.

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

    you did it so easily and quickly

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

    Thanks, Sir. That was really helpful.

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

    I personal prefer the Sass Syntax but is more common to use SCSS instead of Sass and prevents time-consuming troubleshooting by large projects.

  • @MathinusG
    @MathinusG 5 ปีที่แล้ว +1

    Not sure why you must stay exactly under 5 minutes Kevin. You are very concise in general, so an extra couple of minutes won't hurt.

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว

      When I get around to starting these again, I won't be so hard on myself to stick to 5 minutes :)

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

    Thank you for that explanation!!!

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

    Wow, that's really pretty ... I should definitely use that one.

  • @Morrile1
    @Morrile1 5 ปีที่แล้ว +11

    Very well explained, as usual, thanks :-)

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

    Nice video, easy to understand.

  • @silenux7419
    @silenux7419 5 ปีที่แล้ว +6

    Like SCSS more.

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

    Im gona start learning sass , I know scss more popular but sass looks better for me 🙃

  • @umeshkayastha1415
    @umeshkayastha1415 5 ปีที่แล้ว +2

    I recently switched to sass from scss.I am really enjoying it...

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +3

      It has it's downsides for some things, like *having* to make a new line... sometimes I like doing single lines for some things, if It's just one property on it. But it's a small sacrifice :)

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

      Kevin Powell you mean you can’t just go border: solid 1px red; with sass?

  • @sunshineremovalsvic4576
    @sunshineremovalsvic4576 5 ปีที่แล้ว

    Although Sass is the ‘in’ Fully agree Sassy is the way to for all the reasons you mentioned

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

    Thanks for the vid! This makes sense 👍

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

    Nice overview of SASS/SCSS. Thanks, Kevin
    {2021-06-14}

  • @srinivasnahak3473
    @srinivasnahak3473 4 ปีที่แล้ว +16

    I love the traditional way ..... because I'm a Java developer 😉

  • @neongrid3807
    @neongrid3807 3 ปีที่แล้ว +1

    So, SCSS it is then... unless the minimalistic way of Sass is the future way of styling?

  • @llihak
    @llihak 5 ปีที่แล้ว +3

    I have been using .sass because it looks like jade / pug and the braces now seem to get in the way.

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

    FINALLY I get the difference!

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

    Thanks for this.

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

    Great information. SMASHING the LIKE Button!!!

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

    Very helpful. Thank you.

  • @tasmto
    @tasmto 5 ปีที่แล้ว +2

    DO you have mind powers dear sir! I haven't yet found anything I want to learn that you haven't already covered. wow

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

    My question is, for someone like me who is new to the whole web development scene . . . is there a reason to use CSS at all if you can write exactly the same code from SASS and SCSS can accomplish the exact same thing? I see the css file itself as kind of an afterthought! I like the SASS approach, it feels pythonic . . . from importing other files to the indentation . . .

    • @Colnup
      @Colnup 4 ปีที่แล้ว +2

      I mean, if you do write sass or scss, you will need to compile it into CSS anyway... Also, if you do sass or scss, you will need to know the syntax of CSS, because it's really similar except for the nesting and imports.
      Being someone quiet new to web dev, i would say that it's important to know the "classic" approach, but I prefer to use scss, it's just so much cleaner that stock css

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

      @@Colnup i'm starting to wonder about that lol. I know I know . . . learn all the coding, no shortcuts . . . and when it comes to avoiding using snippets for the first few months of a full fledged language weather it be C or pyghon or java . . . i do get it. But css . . .vs scss . . . its not like scss or sass are gonna go anywhere. You can run Koala and auto compile, but why bother with css when scss is damn near identical but with added functionality. . . like you said, the differences really lie in the nesting . . . and scss adds variables which are a huge time saver, and don't require much of a learning curve. You can literally plug in a new color scheme or fonts or whatever in a matter of seconds, and yeah, in a modern text editor you can do it anyway, but still . . .as you said, scss . . . even sass . . . are cleaner.

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

    this video was an 8 minute tuesday

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

    How about 15min Friday’s?

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

    Thank u sir I'm going with scss

  • @EduardKaresli
    @EduardKaresli 5 ปีที่แล้ว +2

    Why would I write curly braces and semicolons if I'm not required to?
    SASS is a lot less of needed keystrokes. And the Python-like syntax using indentation is just awesome.

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +4

      Because people like things they are familiar with is a big part of it :).

    • @EduardKaresli
      @EduardKaresli 5 ปีที่แล้ว

      @@KevinPowell I'm actually a C++ developer originally, with more than 8 years of experience. Only recently I'm trying to learn all this web development stuff, so in term of familiarity I should be more comfortable with SCSS, but no, SASS is sexier... :-D

    • @TheFallinforyou
      @TheFallinforyou 5 ปีที่แล้ว

      You should try stylus. It’s SASS on steroids

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

    for many of the reasons you gave for scss being > css and more... you should also switch from javascript to typescript.

  • @fvgoya
    @fvgoya 5 ปีที่แล้ว +1

    I really don’t understand why some people think that SASS is more “difficult” then SCSS. I’m not talking about you, of course. But even for a beginner, if they think that SASS is complicate, is better they rethink if development is their thing....

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +3

      It's not that it's difficult, but if you are familiar with CSS, it's a super simple transition. When you write Sass, your mind is still deep in the CSS mode and it's a bit of an adjustment to stop putting semi-colons or curly braces for the first bit of time writing it, which can be frustrating. I know the feeling of going that way, and then writing regular CSS, I'd keep missing them and it drove me nuts, lol. Took me awhile to transition back the other way too.

    • @kartiksagar007
      @kartiksagar007 5 ปีที่แล้ว

      Shall I use scss or sass?

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

      @@kartiksagar007 yes

  • @lenarnie2973
    @lenarnie2973 2 ปีที่แล้ว +1

    i like sass, but i still use only css. the reason is easy. I like when i can do small change and i can see the result. I dont want compile everytime when i change something. maybe i change font size to little bit bigger and with css i can see result in second. Can Sass do it? Can Sass after saving file show the result?

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

      Yes it can. You however have to run sass in a terminal window like this: sass -w style.sass style.css
      To read more about this look up sass watch mode

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

    Great video

  • @abulkalamazad6022
    @abulkalamazad6022 5 ปีที่แล้ว

    Thanks Kevin

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

    im having trouble using background-image in sass, I used Visual Studio Code with Sass Compiler and live. It wont work in scss. please help

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

    Great video to the point

  • @norvisnorvis7592
    @norvisnorvis7592 5 ปีที่แล้ว +6

    Sass looks way easier and faster to use. Thanks for the video!!!

  • @KyleMerl
    @KyleMerl 5 ปีที่แล้ว

    Thanks. I always wondered what the difference was. I would say another reason to learn sass (at least where I live) is that companies are looking for people who know it.

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

    sass looks cleaner, but the transition from css to scss is easier

  • @chrs-wltrs
    @chrs-wltrs 3 ปีที่แล้ว

    As someone who despises the end line semicolons, I can't fathom preferring SCSS over SASS

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

    its funny, you say it saves you keystrokes but..... you are accidently doing the ; so its double the keystrokes when that happens xD
    BUT this is a good video and easily explained, good video! I rate 5 stars

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

    sass says no semicolons but in vscode you i am not able to write sass without semicolons its so confusing

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

    "It's 5 minute Friday!"
    * 9 minute video *

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

    i like sass but there is no auto complete n color code 😕

  • @BlissAden
    @BlissAden 3 ปีที่แล้ว +1

    I like CSS

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

    video starts at 0:52

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

    Pain in the SASS!

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

    Is there any extra feature compair to css?

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

    Can I call sass and scss frameworks?

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

    Thnx.

  • @FirdavsiWebDev
    @FirdavsiWebDev 5 ปีที่แล้ว

    Hey Kevin do you have pure SCSS tutorial? İf you google for SCSS you only see SASS tuts

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +1

      Most Sass tutorials are SCSS tutorials. People call it Sass because it's the same thing, but with a different syntax, but SCSS is much more popular.

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

    there is like zero turtorials about scss so make one?

  • @techtipsuk
    @techtipsuk 5 ปีที่แล้ว

    Can’t be doing with the sass syntax personally, too easy to fuck up

  • @somerandomchannel382
    @somerandomchannel382 5 ปีที่แล้ว

    Noway. Missing to intent a line should not cause issues. This is why brackets was made in the first place

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +1

      Yup! It's a choice. Some people love it (as I do), but as you said, there is a good reason for the brackets in the first place :)

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

    a dont think am learning sass anymore is just css without curly

  • @HowDidThisHappenNow
    @HowDidThisHappenNow 2 ปีที่แล้ว +1

    If you have coded in Java or C# before, i say SCSS
    If Python -> SASS

  • @mariocarnival
    @mariocarnival 5 ปีที่แล้ว

    But what's the difference? SCSS is like a fork of CSS? and SASS is the compiler? It could be better if you use some infographics. I saw the cool coding you made in SASS Meister and the equivalent on regular CSS but I didn't the concept of both. If we want to work locally, do we need to download some plug in? Sorry, this video did not meet my expectations like other yours!

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +3

      Sorry about that! SCSS is like a fork of Sass, yes :). They both do the same thing, but use a different syntax.
      To work locally, you need something to compile the Sass/SCSS to CSS. There are extensions/plugins for editors, you can do it with gulp, or there is software like Prepros and Codekit. I've used all three (and I think I have videos on all 3 as well)

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

      @@KevinPowell Can't we just let it live as .scss and upload it to the server?
      I mean, why would someone convert scss files to css files in 2020?

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

    ok i love sass

  • @amazingVideozs
    @amazingVideozs 3 ปีที่แล้ว +1

    i hate to learn scss... there is lot of mixin syntax i see.... why can we have one sstandard for styling... do we need so many flavours....

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

    3:40 Is there a problem with that kind of selection?

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

      It raises the specificity, which can cause issues as projects scale up. If you limit it, it's not the end of the world, but deeply nested selectors like that can cause issues with maintaining your code in the long run.

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

      @@KevinPowell Thanks for answering.

  • @SofaaArts
    @SofaaArts 4 ปีที่แล้ว +5

    Damn, didn't even know there was a difference lol

  • @Abhi_badale
    @Abhi_badale 5 ปีที่แล้ว

    Short and simple 😊

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

    PR Review becomes annoying when there's just indentation and newlines.

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

    There is no 5min Friday video that is actually 5mins..lol

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

    You won't have less keystrokes with sass, since you'll write the semicolon and delete it again. So practically you'll have more keystrokes xD

  • @blackpilledbuddha4944
    @blackpilledbuddha4944 5 ปีที่แล้ว

    In know js ...should i learn jquery

    • @KevinPowell
      @KevinPowell  5 ปีที่แล้ว +3

      Unless you *need* to learn it for a project, I don't know if it's worth it in 2019 :\

    • @blackpilledbuddha4944
      @blackpilledbuddha4944 5 ปีที่แล้ว

      @@KevinPowell Thanks

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

    SASS because I rather use less keystrokes. I'll save my fingers some pain...

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

    Thank You for Sharing!!! Have a GREAT DAY!!! ~ Peace :)

  • @rob2906
    @rob2906 5 ปีที่แล้ว

    Thanks!