Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: LESS > CSS

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 You know the scene sometimes LESS is more well with CSS it's a pretty painful experience
0:08 when you're putting together a ton of CSS take over talk Python training on the site there, we've got something like 5000 lines of CSS and boys.
0:17 They're repeated stuff. I wish I didn't have to be in the CSS files. Why does it have to be there?
0:23 Because we don't have things like variables and whatnot in CSS but with less and frameworks like that we do no less is super cool.
0:33 Less lets us come and actually create variables, do math. If I were to have some items and put them one within the
0:40 other and that would be like a nesting relationship and so on. But just like typescript, you can't use this.
0:47 This is not CSS it's LESS you need to transpile. I'll it down to CSS just like our beautiful class became this crazy looking iffy in
0:56 real javascript. Same deal here. So what we're gonna do is we're going to use {less} to style up some basic
1:04 basic HTML. So we go over here and I've got this blink example and I'm gonna use my zen coding thing. What I want is a section called items in here.
1:13 I want to have some divs that have the class item, let's actually have five of those inside those items.
1:21 I would like H2 header and a div with a class text ready. 123 go boom, done we've done it. We've written it. It's amazing.
1:30 All right. Also call this first item and I'll just fill this out with a little bit of text. Fantastic,
1:37 we've got our HTML put together no styling whatsoever. Let's see how amazing it works. It looks here. Not super amazing.
1:45 Let's actually go and give it a header just so it has something like that. Here's our demo of less and then all these things,
1:56 what I would like is to these for these to be in little tiny boxes and I would like them to be squares that bounce around. Wouldn't that be cool? Yes,
2:04 it would. So we're going to go and create Less CSS or less style sheet type thing that compiles down to CSS now,
2:13 you might have noticed over here and it says you have to install less to get the less C compiler. So make sure we've done that,
2:24 PyCharm won't do that for us. It has tooling for it, but it needs to locate this compiler. So we're going to try to do this.
2:32 I'm gonna do it with a little more global Less. There we go. We can just check that. We have let's see, Perfect.
2:40 Looks like we do. So let's go and create our Less file and create a file. I'll call this 'site.less' now says do you want to run file
2:52 watchers which are basically things that will go and watch this. I'm gonna trust this project here and say yes,
2:58 again, there's no little Chevron thing that we could do us to declare some variables Remember if we're back over here,
3:08 we declare variables like @ pretty much CSS styles you want to say @, I have a @light background looks pretty cool and let's just give it just say
3:21 #fff for a second and then let's pull up the little color wheel and I want this to be some kind of like light blue with this light green here
3:32 So this will be the light background color and maybe make it so it doesn't
3:36 think it's misspelled, This will be darker background color and for the darker one we can make it well a little bit darker,
3:44 something like this. What else do we want to do? We need to style all the items and then for each one of these,
3:51 I want to give it a border in a background color. So let's do that standard CSS here,
3:56 sort of so items but what's really cool about less is I can and hear say .item let's get rid of this thing.
4:05 There we go. And we will give this a color notice the auto complete now if we hit save check out,
4:23 just like with typescript over here, we have the CSS version. Let's look at that and put them side by side
4:31 notice items containing item and then it has the values here. Right, So I love this sort of nested organization because then I can just collapse
4:42 it, that's all the stuff that applies to items globally. Not a whole bunch of things that item dot this items at that and so on
4:47 So let's go and put this file up here and check it out. See what we got. There we go. That's a pretty good start, isn't it?
5:01 We need to do just a little bit more so let's go back to our less and this thing is going to have a display right now,
5:07 it's display block, which means it goes all the way across. But this will be inline block and then it's with will be 300 PX.
5:20 That's looking good. We want to give it some margin and some padding. There we go. Really nice. Let's make a little wider. Alright,
5:36 we're getting the rap. I think it doesn't need to be so large But that has a 200 maybe this is a 10. Here we go. It's starting to look nice,
5:45 right? Maybe we want our H2 is to have their text centered but we want in here we could say H2 like this text align center notice now we've
5:55 got this little bit right there, that's the CSS you right. There's this very, very cool. So I'm not really going to have to style this whole lot more
6:05 I guess, but I guess maybe one other thing. Let's have the text also had over here.
6:11 Remember we've got our div.txt down lets say dot text color of the text is going to be this light actually dark for background notice again,
6:26 lets get put down here like that and we can also let's have it text align center but separately. Perfect. Now we can go back to our variables and say
6:38 you know what? Which we could have this darker so guess what? We can make it whatever we want to make a change,
6:43 you can see it run through there and there's our greenish text it's hard to see the green but yep in fact that is the green,
6:52 you can see really, really cool stuff. We can do with our 'less' over here even organized a little bit,
6:57 I love the nested the actual nested behaviors there that result in generating nested CSS later on the variables, all kinds of things.
7:07 You can even do math I guess we could do something like it's going to be @light minus this is a darker color right there than that one.
7:17 You can see those two colors really, really cool. I just love how less works.
7:21 So if you're doing a lot of CSS and this more formal language of defining design appeals to you well you can absolutely have PyCharm help you with it,
7:33 it has auto complete to understand the syntax, it has the transpilers everything you need.


Talk Python's Mastodon Michael Kennedy's Mastodon