Тёмный

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

Kevin Powell
Подписаться 943 тыс.
Просмотров 181 тыс.
50% 1

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 173   
@soufianeibnouine
@soufianeibnouine 4 года назад
CSS without curly braces looks kinda weird. I'll go with SCSS thought ! Thansks for the video
@setyoufree2726
@setyoufree2726 5 лет назад
What's wrong with people who gave thumb down? All free knowledge like this should be appreciated.
@skytale35
@skytale35 4 года назад
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 года назад
how about fat fingers ?
@nanohedron
@nanohedron 4 года назад
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
@annoying_something
@annoying_something 4 года назад
So SASS is just CSS “PYTHON Style”? - Sounds cool
@josephm.afonne7749
@josephm.afonne7749 3 года назад
Yeah i thought the same thing xD
@jmb9969
@jmb9969 3 года назад
sadly everyone uses scss...
@nervousstate
@nervousstate 2 года назад
Ie. YAML
@cookedpotato
@cookedpotato 2 года назад
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
@MadBunnyRabbit
@MadBunnyRabbit 5 лет назад
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.
@bellatobe
@bellatobe 4 года назад
Thank you for the clear explanation, I'm completely new to Sass and SCSS and this has helped me!
@marvellousadesanya8480
@marvellousadesanya8480 Год назад
How’s your programming journey fairing now?
@crooker2
@crooker2 4 года назад
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).
@sashatv138
@sashatv138 3 года назад
Kevin, you are amazing person! I want to thank you for you kindness!
@KevinPowell
@KevinPowell 3 года назад
Thank you!
@rubhan94
@rubhan94 5 лет назад
10 seconds into the video and that is so spot on. It was frustrating to look up videos on RU-vid 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 лет назад
Yeah broo .. They just mixed it up .. Content is scss but the title is SASS .. And i just.. Whattt
@KevinPowell
@KevinPowell 5 лет назад
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
@clevermissfox
@clevermissfox 10 месяцев назад
Love to see how KPs vids have grown !
@Explore2Adore
@Explore2Adore 3 года назад
For me it's SCSS, mainly so i don't start leaving out { ; } whenever I choose to write CSS.
@tossichugs
@tossichugs 4 года назад
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!
@binihalex8097
@binihalex8097 3 года назад
And I was here thinking it's a totally complex css preprocessor or something. Thanks for easy tip.
@starryfoxx_
@starryfoxx_ 3 года назад
By far the best video that's broken this down. Thank you so much.
@helenapersson5076
@helenapersson5076 2 года назад
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!
@MrPratitb
@MrPratitb 3 года назад
1:58 start of differences in code
@JoffreyB
@JoffreyB 4 года назад
Videos starts at 0:52
@zarghamaijaz5933
@zarghamaijaz5933 3 года назад
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 года назад
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 года назад
@@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 года назад
@@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
@darshankumawat1764
@darshankumawat1764 Год назад
​@@Mephistolomaniac i hate reading python because it doesn't have semicolons and curly braves lmao
@Dylson
@Dylson 2 года назад
Great Video Kevin! Great stuff and still watching in 2022!
@ebifleck
@ebifleck 4 года назад
Great tutorial as always Kevin. Many thanks for a simple explanation.
@censura1210
@censura1210 5 лет назад
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
@АннаКовыляева-ж3с
@АннаКовыляева-ж3с 4 года назад
finally there is a clear explanation! thanks!
@dzk6714
@dzk6714 4 года назад
Sass is way faster and cleaner to write (who would want to write more code) , but everyone has their preferences ..
@Ibiponmisola
@Ibiponmisola Год назад
Your videos are awesome, Kevin!!! 🎉
@paulporter8363
@paulporter8363 Год назад
Nice video, easy to understand.
@adlbh
@adlbh 5 лет назад
Could not find better videos about coding so well explained until I found your channel. Congrats... Your videos are awesome! Keep it up!
@OffroadTreks
@OffroadTreks 4 года назад
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.
@Morrile1
@Morrile1 5 лет назад
Very well explained, as usual, thanks :-)
@nishantkumar6960
@nishantkumar6960 4 года назад
Thanks, Sir. That was really helpful.
@MathinusG
@MathinusG 5 лет назад
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 :)
@tdzinkdroid
@tdzinkdroid 3 года назад
Very informatonal and to the point. Thanks!
@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
@hemeshbajaniya3000
@hemeshbajaniya3000 3 года назад
you did it so easily and quickly
@n4botz
@n4botz 4 года назад
I personal prefer the Sass Syntax but is more common to use SCSS instead of Sass and prevents time-consuming troubleshooting by large projects.
@silenux7419
@silenux7419 5 лет назад
Like SCSS more.
@MotiviqueStudio
@MotiviqueStudio 2 года назад
Thanks for this.
@srinivasnahak3473
@srinivasnahak3473 4 года назад
I love the traditional way ..... because I'm a Java developer 😉
@thecashewtrader3328
@thecashewtrader3328 3 года назад
Oh
@neongrid3807
@neongrid3807 3 года назад
So, SCSS it is then... unless the minimalistic way of Sass is the future way of styling?
@lukefox836
@lukefox836 3 года назад
Wow, that's really pretty ... I should definitely use that one.
@axelgrind
@axelgrind 3 года назад
Thanks for the vid! This makes sense 👍
@llihak
@llihak 5 лет назад
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!
@ginadi9733
@ginadi9733 3 года назад
Great video
@norvisnorvis7592
@norvisnorvis7592 5 лет назад
Sass looks way easier and faster to use. Thanks for the video!!!
@gamersylum3674
@gamersylum3674 4 года назад
Right
@skytale35
@skytale35 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 года назад
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 года назад
@@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 года назад
this video was an 8 minute tuesday
@TheJpwzrd
@TheJpwzrd 3 года назад
How about 15min Friday’s?
@blazi_0
@blazi_0 3 года назад
Im gona start learning sass , I know scss more popular but sass looks better for me 🙃
@tasmto
@tasmto 5 лет назад
DO you have mind powers dear sir! I haven't yet found anything I want to learn that you haven't already covered. wow
@digigoliath
@digigoliath 4 года назад
Great information. SMASHING the LIKE Button!!!
@elissitdesign
@elissitdesign 2 года назад
Pain in the SASS!
@chadrackkyungu1186
@chadrackkyungu1186 4 года назад
Thank u sir I'm going with scss
@Pareshbpatel
@Pareshbpatel 3 года назад
Nice overview of SASS/SCSS. Thanks, Kevin {2021-06-14}
@sunshineremovalsvic4576
@sunshineremovalsvic4576 5 лет назад
Although Sass is the ‘in’ Fully agree Sassy is the way to for all the reasons you mentioned
@EduardKaresli
@EduardKaresli 5 лет назад
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 лет назад
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
@chillingpaully4137
@chillingpaully4137 3 года назад
"It's 5 minute Friday!" * 9 minute video *
@umeshkayastha1415
@umeshkayastha1415 5 лет назад
I recently switched to sass from scss.I am really enjoying it...
@KevinPowell
@KevinPowell 5 лет назад
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?
@fvgoya
@fvgoya 5 лет назад
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 лет назад
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
@aaravsingh7609
@aaravsingh7609 2 года назад
sass says no semicolons but in vscode you i am not able to write sass without semicolons its so confusing
@stratvids
@stratvids 4 года назад
for many of the reasons you gave for scss being > css and more... you should also switch from javascript to typescript.
@abulkalamazad6022
@abulkalamazad6022 5 лет назад
Thanks Kevin
@BlissAden
@BlissAden 3 года назад
I like CSS
@hotmandead1
@hotmandead1 4 года назад
Great video to the point
@lenarnie2973
@lenarnie2973 2 года назад
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
@bambinoesu
@bambinoesu 3 года назад
sass looks cleaner, but the transition from css to scss is easier
@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
@dara_1989
@dara_1989 Год назад
i like sass but there is no auto complete n color code 😕
@amazingVideozs
@amazingVideozs 3 года назад
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....
@romanr6888
@romanr6888 3 года назад
ok i love sass
@klingonac79
@klingonac79 4 года назад
Thnx.
@techtipsuk
@techtipsuk 5 лет назад
Can’t be doing with the sass syntax personally, too easy to fuck up
@MrPratitb
@MrPratitb 3 года назад
video starts at 0:52
@tayongalvis5105
@tayongalvis5105 4 года назад
a dont think am learning sass anymore is just css without curly
@HowDidThisHappenNow
@HowDidThisHappenNow 2 года назад
If you have coded in Java or C# before, i say SCSS If Python -> SASS
@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
@CreativeB34ST
@CreativeB34ST Год назад
PR Review becomes annoying when there's just indentation and newlines.
@monarchgam3r
@monarchgam3r 4 года назад
There is no 5min Friday video that is actually 5mins..lol
@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 лет назад
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 :)
@GodricThe
@GodricThe 3 года назад
there is like zero turtorials about scss so make one?
@FirdavsiWebDev
@FirdavsiWebDev 5 лет назад
Hey Kevin do you have pure SCSS tutorial? İf you google for SCSS you only see SASS tuts
@KevinPowell
@KevinPowell 5 лет назад
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.
@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
@blazi_0
@blazi_0 3 года назад
Can I call sass and scss frameworks?
@Ashiq619
@Ashiq619 5 лет назад
Short and simple 😊
@FriedFx
@FriedFx 3 года назад
SASS because I rather use less keystrokes. I'll save my fingers some pain...
@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.
@ygjt76v0-----
@ygjt76v0----- 2 года назад
I dont like scss, using cache🐈 missing one character will be error, pure css 👍
@sasikiranvvrm8456
@sasikiranvvrm8456 2 года назад
4:00
@somnvm37
@somnvm37 3 года назад
"SASSy scss" meanwhi I still type scc for no reason.
@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 лет назад
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?
@MontyKsycki
@MontyKsycki 4 года назад
Thank You for Sharing!!! Have a GREAT DAY!!! ~ Peace :)
@ioanniskritsotakis1228
@ioanniskritsotakis1228 3 года назад
Sass looks so complicated. You need things to be fast and quick when trying to style a site and not trying to compile and add more files for buttons etc for no real reason....
@pauloTx
@pauloTx 3 года назад
but with sass you will be faster to style your site.
@blackpilledbuddha4944
@blackpilledbuddha4944 5 лет назад
In know js ...should i learn jquery
@KevinPowell
@KevinPowell 5 лет назад
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
@milosleng1175
@milosleng1175 3 года назад
so there is no point in using sass basically lol
@DEVDerr
@DEVDerr 5 лет назад
Unability to write multiline arrays in Sass completely destroys sense writing with this syntax.
@ralpharnold9186
@ralpharnold9186 Год назад
&:nth-child(#{$max}n + #{$item}) I would like to know where this come from and what it means
@cloudsss83
@cloudsss83 2 года назад
its hard to focus with this awkward arm movements
@andrewkamoha4666
@andrewkamoha4666 2 года назад
sassy?
@jean-baptistedioli1692
@jean-baptistedioli1692 2 года назад
Merci !
@b1ueocean
@b1ueocean 3 года назад
SASS 🤢 YAML 🤮 Python gets a pass since them ML/AI libraries truly are state of the art 🤑
@Schattenrufer007
@Schattenrufer007 2 года назад
Sass and yaml don’t have anything in common with python. The soul purpose of sass is styling html and yaml is a configuration file format.
@b1ueocean
@b1ueocean 2 года назад
@@Schattenrufer007 nothing in common? not even their approach to relying on spaces and nesting to delimit their blocks? 🤔 Of course all three target different use cases.
@milosleng1175
@milosleng1175 3 года назад
this guy is a good teacher but must be very annoying when you are his enemy.
@micycle8778
@micycle8778 5 лет назад
why is this man look so unconformable.
@KevinPowell
@KevinPowell 5 лет назад
I didn't know I looked uncomfortable....
Далее
Learn Sass In 20 Minutes | Sass Crash Course
19:42
Просмотров 935 тыс.
Brilliant Budget-Friendly Tips for Car Painting!
00:28
5 tips to learn Sass quickly
10:09
Просмотров 31 тыс.
5 CSS mistakes that I see way too often
19:03
Просмотров 360 тыс.
Do You Really Need Bootstrap or Tailwind?
8:28
Просмотров 195 тыс.
Flexbox design patterns you can use in your projects
15:33
The differences between CSS and Sass Nesting
12:12
Просмотров 30 тыс.
10 CSS Pro Tips - Code this, NOT that!
9:39
Просмотров 2,2 млн
Brilliant Budget-Friendly Tips for Car Painting!
00:28