I never liked 7+1 approach because I always have hard time classifying between pages, pages, layout. I usually have a variable folder, utility folder, components ( like buttons, ) and main.scss . I learned sass with you years ago, I can't wait to re-learn it again with you. Waiting for your new course on sass.
THANK YOU SO MUCH! I've been 'lowkey' using something similar for years now thinking I was soooo original... But just having someone else to model the way I've been doing it to helps a TON! Thank you.
Yesterday, I was doing my ICT work for making a website. I was stuck on the design and so instinctively, after looking on w3 schools, which I would DEFINATLEY recommend, I went to UA-cam. Now I look back wondering why I haven't found this channel earlier! Thanks for the help and I'm sure to stick around
Really nice file organazation with SASS. I made a fork of a proyect for my WP Genesis Starter Theme, so I started working with the file organized the way they were. Maybe I will do some changes. For sure, I will start using @use and @forward. Thanks again for your amazing content!!
Thanks this day i have on plan reorganize styles on my project to make bundles mode reusable and i wake up take my phon and like always if i see short tips movie from you i don't postpone watching it. Thanks now I have good starting point for read more about others style file organization methodology
I would be very grateful if you made video about sass's good practices - i.e how to nest, when to nest, how deep to nest and other things. I've been looking everywhere for that information but and have found nothing yet
Hi, I want to ask, what is that feature that is shown at 4:04 where you have the ".h2 with --flow-space: 1.5; font-size: --fs-700". This notation "--xy--z" is usually used with the CSS variables but I don't see any var() used and also I didn't find any hint googling sass feature. Thnks
@Kevin Powell When you have multiple pages, do you link the entire CSS with the classes of the other pages too or do you split the CSS files to have a dedicated CSS for each page? Thank you in advance, and sorry for my English, I'm not so good 😀
You still need to decide (and remember) where you put stuff right? What do you think of that in relation to functional/utility-based CSS like Tailwind/Tachyon where you have to make a lot less of those decisions? You probably still need to organize the utility classes that you add yourself, but those are going to be quite straightforward I'd say. So maybe another question is: do you think this workflow/work organization style is more suited to code bases that are not as component-focused? Thanks for the great content btw, your deep knowledge shines through 👍
Great video, as always. Stay away from `@use ... as *`, as that's normally bad practice in any language. This requires new devs reading the code to hunt down where your imports are coming from, as opposed to importing them explicitly.
Could REALLY use a nice tutorial about how you do this for a multiple page website. For example, if you share a common nav and footer element. Do you create the css styling for each twice? One for the home page and one for another and link each page to the specific css output?
How do you use @use in VSCode with Live Sass extension? It doesn't compile for me and I tried another extension with dart sass but that one as well throws error saying undeclared variable. I had to go back to @import and use live sass.
You can't with that extension, it's based on the old version of Sass and hasn't been updated in a few years. I've heard there is a new extension out there that can do it, but i haven't tried it.
What are the elements called that are shown on every on every page like footer and header? So everything on a page that doesn't change get injected when visiting a new page on a site?
hey, The problem is @use keyword refers whole CSS file but I want to import only variable which we are using in specific file, Is it possible ? To speed up the application need this approach. any idea?
Thanks for the video, I started using the mothod but since I did, I can't get my font-face to work anymore, my structure is basically the same as yours, did you do anything special? I assume your font-face is inside the base/_font-face.scss
Any clue why it won't display my images/svgs from assets folder? My files structure goes like this: node_modules/ public/ css/ index.html src/ assets/ sass/ index.html
In index.html file I'm trying to import image using: and it doesn't appear. I get an error in console: "localhost:3000/src/assets/logo.svg 404 (Not Found)". Seems like path to file is incorrect but I can't figure out why. Possibly there is other way for accessing images I guess.. Thanks for any hints!
Thanks Kevin. I see you using a lot of custom variables (i.e.; --font-weight: 500; in your button class at 1:58)... what's the difference between that and declaring $font-weight as 500, and just referencing $font-weight?
Thnx for ur video, I found that u have used "rem" and "em" units, but can u plz explain when and why did u choose one over the other? (BTW I do know the difference).
I'm curious: Where would you put general styles of html elements like p { margin-bottom 1rem } ? They clearly are neither typography nor layout and it doesn't really feel right to me to treat them as components either.. Use the base directory and create another file?
your @use and @forward video definitely helped! thanks. I have a quick question. I noticed that your nest html elements as seen on 1:11. I do this also. However, I recently saw MDN website suggest that it is better to give it a class name instead. I was wondering what was your hot take on that? Its in their article about Semantics under "Semantics in CSS"
When we use the 7-1 pattern as suggested in the SASS official guide, we are loading all the styles in the initial bundle which is downloaded by browsers. Since we do not need every style to render initial pages, does anyone know a proper way to structure our scss files so that we can only render what the page wants?
@@KevinPowell Thanks for your reply! I am currently using bem with sass but i don't like bem. Can't see the point and want to remove it from my current project to get back to simpler/shorter classnames....
I don't understand. Why can't I find your sass course that you mentioned in your other video. Why can't I just buy your course. It seems like I should wait a certain time or something. What is happening
My question is do we still need sass beside styled-components or this is just another approach to the same thing? I found sass very useful in a big projects (big corporation projects) but in my small websites maybe I don't need anything but CSS. What do you think?
It depends on the project for sure, but I find it useful having Sass. There are a few mixins that I use in every project that I love too much, plus a few other things that I do to generate utility classes and a few other things.
Can't join the discord group, says 'unable to accept invite' How do I setup sass on vscode. Everything I have been reading says different things so I have some doubt. How did you setup yours?
Do you have something about exporting to pdf? We have created a platform to create A4 forms and export to pdf always has small css bugs i have to fix because it doesn’t look the same as in chrome/FF, if you can make a video to give some pointers about things to take care when exporting to pdf it would be nice.
It's not something I have *any* experience with... strange that chrome and FF would have differences though. Are you using print stylesheets to go to PDF, or is there another method?
Ah, those are nunjucks files, which are a templating language that gets turned into HTML :). I'll be looking at that type of thing in the not too distant future as well :D
@import with CSS is very different. CSS files are render blocking, and even if it's all being imported into one file, each one is loaded one after the next, instead of as one big file. Basically the browser starts loading your CSS file, then finds an import, so it stops, loads and parses that file, then keeps on going. It can have a pretty big impact on performance.
Ads don't pay very much :( - Just look at YT, even with the views I get, it's not close to a salary. Static ads on websites tend to pay much less from those that I've talked to. It also depends on where we live in the world of course, but cost of living in Canada isn't the cheapest, at least where I am :\ I will keep up with the free content here, and I have plans for another free course down the road, but I'll also be making paid ones as well.
I never liked 7+1 approach because I always have hard time classifying between pages, pages, layout. I usually have a variable folder, utility folder, components ( like buttons, ) and main.scss .
I learned sass with you years ago, I can't wait to re-learn it again with you. Waiting for your new course on sass.
THANK YOU SO MUCH! I've been 'lowkey' using something similar for years now thinking I was soooo original... But just having someone else to model the way I've been doing it to helps a TON! Thank you.
Thanks Kevin 🙏 this is gonna make life easier to work with sass from now 👍❤️
Wow! This is amazing! Could you please make a short vid on that colors.scss structure?
Awesome! Can't wait for the Sass course
Yesterday, I was doing my ICT work for making a website. I was stuck on the design and so instinctively, after looking on w3 schools, which I would DEFINATLEY recommend, I went to UA-cam. Now I look back wondering why I haven't found this channel earlier! Thanks for the help and I'm sure to stick around
forget w3schools please...
Sass is great thanks to partials!! and one great thing is we can make a sass variables and include them where ever we want!!
Never mind the SASS, where do I get that shirt 😂
Ok. I know the video will be amazing (like always), but I paused at 0:06 to mention that the shirt is pure FACT! Love it!
Really nice file organazation with SASS. I made a fork of a proyect for my WP Genesis Starter Theme, so I started working with the file organized the way they were. Maybe I will do some changes. For sure, I will start using @use and @forward. Thanks again for your amazing content!!
Kevin. First Thank you very much. I appreciate the video and the organization. I'm on a huge WordPress + SASS project, this is extremely helpful. :)
Thank you sir, love from India(WB)
Thanks this day i have on plan reorganize styles on my project to make bundles mode reusable and i wake up take my phon and like always if i see short tips movie from you i don't postpone watching it. Thanks now I have good starting point for read more about others style file organization methodology
Thanks a lot Kevin for sharing awesome details
This is just the best timing, thank you so much
Just what I needed. Thanks a lot!
Awesome work Kevin, if you make video about learning sass. that will be more awesome
I have some stuff in the works!
I would be very grateful if you made video about sass's good practices - i.e how to nest, when to nest, how deep to nest and other things. I've been looking everywhere for that information but and have found nothing yet
Excellent suggestions. Thanks for sharing
Thanks! 😃
Good vid. I use the Inverted Triangle to organize my partials.
This is cool Kevin.
Much appreciated Sir!
THANK YOU! 🤩
Thanks alot kevin
This is awesome 👍
Hi, I want to ask, what is that feature that is shown at 4:04 where you have the ".h2 with --flow-space: 1.5; font-size: --fs-700". This notation "--xy--z" is usually used with the CSS variables but I don't see any var() used and also I didn't find any hint googling sass feature. Thnks
Would like to know as well
Thanks you
Thanks Kevin. :)
@Kevin Powell When you have multiple pages, do you link the entire CSS with the classes of the other pages too or do you split the CSS files to have a dedicated CSS for each page? Thank you in advance, and sorry for my English, I'm not so good 😀
@Doctor Sclero Have you got your answer yet? I have the same question with you...
great video
Please more sass vids 🙏🙏🙏👍👍❤️
good stuff :D
Thanks
You still need to decide (and remember) where you put stuff right?
What do you think of that in relation to functional/utility-based CSS like Tailwind/Tachyon where you have to make a lot less of those decisions?
You probably still need to organize the utility classes that you add yourself, but those are going to be quite straightforward I'd say.
So maybe another question is: do you think this workflow/work organization style is more suited to code bases that are not as component-focused?
Thanks for the great content btw, your deep knowledge shines through 👍
Great video, i would like to ask you when you release video about the color maps ? Thank you
I learned every thing from u
Great video, as always. Stay away from `@use ... as *`, as that's normally bad practice in any language. This requires new devs reading the code to hunt down where your imports are coming from, as opposed to importing them explicitly.
Could REALLY use a nice tutorial about how you do this for a multiple page website. For example, if you share a common nav and footer element. Do you create the css styling for each twice? One for the home page and one for another and link each page to the specific css output?
How do you use @use in VSCode with Live Sass extension? It doesn't compile for me and I tried another extension with dart sass but that one as well throws error saying undeclared variable. I had to go back to @import and use live sass.
You can't with that extension, it's based on the old version of Sass and hasn't been updated in a few years. I've heard there is a new extension out there that can do it, but i haven't tried it.
@@KevinPowell Thank you for your reply. Following one of your videos, I have now started using parcel-bundler with sass CLI. It works like a charm.
What are the elements called that are shown on every on every page like footer and header? So everything on a page that doesn't change get injected when visiting a new page on a site?
I'll often put things like the nav and footer under components, though you could make a case for putting them under layout if you'd prefer :)
Wicked shirt
hey,
The problem is @use keyword refers whole CSS file but I want to import only variable which we are using in specific file, Is it possible ?
To speed up the application need this approach. any idea?
Thanks for the video, I started using the mothod but since I did, I can't get my font-face to work anymore, my structure is basically the same as yours, did you do anything special? I assume your font-face is inside the base/_font-face.scss
Can you show how you apply bem methodology to to this 7-1 structures??
Any clue why it won't display my images/svgs from assets folder?
My files structure goes like this:
node_modules/
public/
css/
index.html
src/
assets/
sass/
index.html
In index.html file I'm trying to import image using:
and it doesn't appear. I get an error in console: "localhost:3000/src/assets/logo.svg 404 (Not Found)". Seems like path to file is incorrect but I can't figure out why. Possibly there is other way for accessing images I guess..
Thanks for any hints!
question:
how to have separate sass files for every device size. i tried it didn't work
could you please give us the access or tell us where we can find the project you have shown in the video for understanding the the organizing scss use
Is the order important in the listing in all _index.scss and style.scss?
how does 7-1 handle multiple pages with different css each?
Cheers Kevin. When's your Sass course opening again?
Fingers crossed for the end of April.
@@KevinPowell Great. I had actually been learning the 7 - 1 pattern yesterday too!
Thanks Kevin. I see you using a lot of custom variables (i.e.; --font-weight: 500; in your button class at 1:58)... what's the difference between that and declaring $font-weight as 500, and just referencing $font-weight?
How would i do that with normal css? Does @import impact in my site performance?
Nice shirt :) Love it :))
Thnx for ur video, I found that u have used "rem" and "em" units, but can u plz explain when and why did u choose one over the other? (BTW I do know the difference).
I'm curious: Where would you put general styles of html elements like p { margin-bottom 1rem } ? They clearly are neither typography nor layout and it doesn't really feel right to me to treat them as components either.. Use the base directory and create another file?
By the way: Are you a musician? Or why does it say "minor third" and "augmented fourth" in your _type.scss?
That shirt is very SASSY
your @use and @forward video definitely helped! thanks.
I have a quick question. I noticed that your nest html elements as seen on 1:11. I do this also. However, I recently saw MDN website suggest that it is better to give it a class name instead. I was wondering what was your hot take on that? Its in their article about Semantics under "Semantics in CSS"
@@GabrielSoldani tru. thanks :)
When we use the 7-1 pattern as suggested in the SASS official guide, we are loading all the styles in the initial bundle which is downloaded by browsers. Since we do not need every style to render initial pages, does anyone know a proper way to structure our scss files so that we can only render what the page wants?
I'd love to learn web development, but I have no idea where to start: Is there a good starter book that you guys can recommend?
Thanks!
Anything about skeleton?
Hi Kevin, what about BEM here?
You can still use BEM with Sass. I talk a bit about it with nesting in an upcoming video :)
@@KevinPowell Thanks for your reply! I am currently using bem with sass but i don't like bem. Can't see the point and want to remove it from my current project to get back to simpler/shorter classnames....
I don't understand. Why can't I find your sass course that you mentioned in your other video. Why can't I just buy your course. It seems like I should wait a certain time or something. What is happening
Does this work with tailwind?
Great Video. Do you have this on git?
My question is do we still need sass beside styled-components or this is just another approach to the same thing? I found sass very useful in a big projects (big corporation projects) but in my small websites maybe I don't need anything but CSS. What do you think?
It depends on the project for sure, but I find it useful having Sass. There are a few mixins that I use in every project that I love too much, plus a few other things that I do to generate utility classes and a few other things.
Can't join the discord group, says 'unable to accept invite'
How do I setup sass on vscode. Everything I have been reading says different things so I have some doubt. How did you setup yours?
Thank you! Can you please explain why every file starts with an underscore, eg "_something.scss", is this a common convention?
so that they aren't compiles seperately
need js tips also
Hello sir , can you please recommend some books about front-end and UI/UX dev.
sass deprecated?
Well im glad you wont ever see the .less in company i joined as a, learn all while employed junior :D
Todo dia um 7 a 1 diferente
Do you have something about exporting to pdf? We have created a platform to create A4 forms and export to pdf always has small css bugs i have to fix because it doesn’t look the same as in chrome/FF, if you can make a video to give some pointers about things to take care when exporting to pdf it would be nice.
It's not something I have *any* experience with... strange that chrome and FF would have differences though. Are you using print stylesheets to go to PDF, or is there another method?
@@KevinPowell we use puppeteer to render the page and export it to pdf, but we have @print media query to make adjustments for the headless browser.
I was wandering what those .njk files are
Ah, those are nunjucks files, which are a templating language that gets turned into HTML :).
I'll be looking at that type of thing in the not too distant future as well :D
@@KevinPowell Eagerly waiting ❤️
Can someone explain to me the humour that's on Kevin's shirt?
API is coding (Application Programming Interface). IPA is beer drinking. (IPA is a style of beer). A great play on words (or initials).
@@castlemoyle Okay thanks. Got it now. I thought IPA would be coding related. 😬
But you can use @import with css, can't you??
@import with CSS is very different. CSS files are render blocking, and even if it's all being imported into one file, each one is loaded one after the next, instead of as one big file. Basically the browser starts loading your CSS file, then finds an import, so it stops, loads and parses that file, then keeps on going. It can have a pretty big impact on performance.
@@KevinPowell I didn't know that. Thanks a lot.
Ever since I picked up Sass and the 7-1 pattern, regular CSS just feels old and stupid. It's like how Tesla's make other cars feel dumb
twitch link plz ?
I need to add it to my descriptions! twitch.tv/kevinpowellcss
My organization is way simpler, one big ol' file
hey kevin, please make more cources for free on your website and you can put ads to make money and it will benefit us learners and you :)
Ads don't pay very much :( - Just look at YT, even with the views I get, it's not close to a salary. Static ads on websites tend to pay much less from those that I've talked to. It also depends on where we live in the world of course, but cost of living in Canada isn't the cheapest, at least where I am :\
I will keep up with the free content here, and I have plans for another free course down the road, but I'll also be making paid ones as well.
This doesn't explain how to import them in to your projects.
Mr. Kevin please quickly edit your Title from "*Get You " to "*Get Your"
Oh yeah, oops, thanks.
Butt moment
hi, what mean mixins.scss ?