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