Mastering PyCharm Transcripts
Chapter: Client-side web apps
Lecture: Less

Login or purchase this course to watch this video and the rest of the course contents.
0:01 When it comes to CSS, sometimes less is more,
0:05 and in this case, it's definitely more.
0:07 What we're going to talk about now is this super set language of CSS called LESS
0:12 and it adds functions and variables and hierarchies and all sorts of cool stuff to CSS
0:19 that really should have been added to CSS at some point, but it wasn't, so it's LESS.
0:24 We'll see special support that PyCharm has for that,
0:27 so let's just run our little— we can debug it as well— run our little thing here
0:32 and you can see, this is from the last Angular JS video
0:36 and it just lets us interact with it,
0:39 so all we want to do is just change the styles up here, okay,
0:42 and let's get a quick sense of where these styles are coming from.
0:47 So if we go and look at this, we can see
0:52 that the nav a has a special color there, right,
0:56 if we turn that off it goes back blue right,
0:59 and it has this important, we're going to take that important away.
1:03 What we want to do is actually use LESS to style this,
1:07 and one of the challenges with LESS is it's not CSS, our browsers can't run it.
1:12 And so unless we take special action or a special action is taken somehow,
1:16 even if we don't really do it ourselves,
1:18 we won't be able to use that language in Chrome here.
1:22 So how do we do that?
1:25 Let's go and start by adding a file, just a blank file,
1:29 and we're going to have a demo_overrides.less
1:34 now I probably would just rewrite this to be a LESS file,
1:38 but I want to just have some from scratch,
1:40 so watch what happens when I hit enter here.
1:42 Now, the first time you run this it will pop up a little dialogue that says
1:46 do you want to configure a file watcher for LESS, say yes.
1:51 And if we go over here, you can see our file watchers are right here.
1:58 We have LESS selected, so let's go and edit that,
2:03 and when you say okay it will pop up this dialogue
2:06 but chances are this is empty, and this program is not set
2:10 and that's going to be bad.
2:12 So you have to first determine if you have LESS,
2:14 PyCharm doesn't ship with LESS but it will use LESS.
2:17 So if you type LESS, it might seem like you have it,
2:19 like oh look, I have LESS— no, you don't have LESS.
2:23 Less is, let's see, so if we over here to read me, that one,
2:28 we can say less and it'll just show us the file here,
2:31 so less is very much like a slightly more advanced version of more,
2:37 at least on Mac and on Linux.
2:39 So that's not going to help,
2:41 what you want to make sure you have is LESS C, the LESS compiler,
2:45 and the way you get that is you have to install Node so you have npm,
2:47 and then you can npm install less-g for global.
2:52 And I'm not sure if you should put the g first, either way;
2:56 so you run this, it will install LESS
2:58 and then you'll be able to find this file somewhere on your system.
3:03 Once you have that done, and you said ok,
3:06 then when you create these files, something really cool happens.
3:11 So first, let's talk about LESS.
3:13 The idea with the LESS is that it adds some programmability,
3:17 some very basic programmability to CSS, and that's much, much needed,
3:22 so if you've got say like a common background color throughout your site,
3:25 with CSS you just have to repeat that thing over and over,
3:29 and oh my gosh is that a pain on a large site.
3:32 Similarly, you've got a certain type of padding,
3:35 like 5px padding around something
3:38 and you want to have that throughout your design,
3:41 well you've just got to type the five over and if you change it,
3:43 you better remember which five corresponds to which, it is really tough.
3:46 So over here what we can do is we can define things like dark blue,
3:49 and I'm going to say dark blue is—
3:57 so, that's not dark blue, but some kind of blue, right.
3:59 So in PyCharm you can pull up on these code intentions
4:02 and change the color to let's say a darker blue, like that one, that's cool;
4:06 and let's suppose we want a light blue as well, a really light blue
4:12 we can come over here and say let's make that really bright,
4:15 move that up, it's more of a purple, isn't it, but that's okay.
4:18 So we've got these two colors,
4:20 and now we can go and override the nav
4:23 and we can say the background color is at dark blue,
4:28 look at that, even auto complete for it.
4:30 And, we could set the color, but you'll see this is not actually going to do anything
4:34 so we've got to fix this, say light blue here.
4:37 Now, let me take away this important thing somewhere,
4:41 there's an important which is not typically a good idea.
4:45 Okay, so let's go back and look and see what we got here.
4:50 Alright, so we haven't set these yet, do you know why?
4:56 Because we have not included it.
4:58 Let's go actually include this.
5:00 Now, over here we want to include the code that we wrote for the styles, right,
5:06 if we put the LESS over, the LESS won't run,
5:10 LESS is not supported by the browsers,
5:12 but watch this— so if we go over here and we expand this,
5:15 just like with TypeScript, now we have these colors basically replaced,
5:21 it sort of evaluates down to CSS.
5:24 What we want to do is include our overrides and see what difference that made,
5:29 it's only going to fix it half the way.
5:31 Here we've got this, this is great, click around, it still works,
5:35 but notice the hyperlinks are still white
5:38 and that's because if you look at the style, we have nav a,
5:44 so we have to go to the nav and then go to the a and then set the color,
5:49 so if I uncheck this, you can see that's changing.
5:51 That's pretty cool, so let's go and fix that,
5:55 in CSS you would have to say nav a and so on,
5:59 but in LESS, you can group all the stuff that applies to nav and its children here,
6:02 so I could just say a, like this and actually put this color inside here, like so.
6:08 And when we hit save, over here in our CSS,
6:12 it writes the two parts that actually required by CSS.
6:16 Let's see if that did it—
6:18 oh yeah, that's beautiful, see our terrible purple color,
6:21 well it's beautiful in that our LESS is working,
6:24 it's not so beautiful in our color pallet we're using,
6:28 but the idea is that we can just use these LESS files,
6:31 and PyCharm automatically create a file watcher,
6:35 leverage LESS C to compile it down to CSS
6:39 and you get a much better experience,
6:41 you can also import one LESS file into the others
6:44 so you can partition your styles in a whole bunch of small little pieces
6:48 and then create like my whole site.less and just import all of them
6:53 in the right order, and it's really, really nice
6:55 that you kind of get this somewhat minified version
6:59 whereas you actually can write in a much more granular way.
7:03 So LESS I think is great for web design,
7:06 if you like SASS or some of these other ones,
7:09 feel free to go with those, but the same idea applies there.