Effective PyCharm Transcripts
Chapter: Client-side web apps
Lecture: LESS > CSS
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.