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