Preview

Start a free Courses trial
to watch this video

How to Set Up LESS to Generate CSS

16:53 with Jim Hoskins

LESS is a dynamic stylesheet language that generates CSS. LESS adds features like variables, mixins, and nested definitions which make writing and maintaining a large stylesheet easier. Because LESS requires a compilation step to generate CSS the browser can understand, we must configure our server to understand LESS.

In this video we add a library that can compile LESS and serve it as a CSS file. We also add Twitter's Bootstrap framework. Bootstrap is written in LESS and provides a base style that can be modified and extended through LESS variables and mixins.

Speaker's Notes
Questions?
Video Transcript
Downloads
Workspaces

This video doesn't have any notes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

[? Music ?] 0:00

[Code Racer] [Setting up LESS] 0:02

[Jim Hoskins] So we set up our first route that renders our index.eco file, 0:05

and we could replicate this by creating a different route 0:08

at maybe something like "/foo." 0:13

And instead of rendering index.eco, we could do foo.eco, 0:17

or we could even keep it index.eco 0:22

and change our title to, let's say, "Fooo!!" 0:24

So now if we go back to our browser and go instead to /foo, 0:30

we can see we get a page with foo. 0:35

By creating different routes, we can create our different pages 0:38

on our application, and we can either set up different index.eco 0:40

and foo.eco and about.eco and rules.eco, 0:44

or we can set different variables and reuse our views. 0:50

But this is what we'll do once we get some of the ideas from our designers. 0:53

We'll set up some basic pages that we know we're going to need to use 0:56

and set them up with some basic eco templates and maybe 0:59

any dynamic data they need passed in as variables 1:02

like we passed in title here. 1:05

Now, our designers are familiar with HTML. 1:07

All we need to do is tell them a little bit about eco and how it works 1:09

and tell them what variables we're going to have, 1:13

and they're going to be able to generate the designs fairly quickly 1:15

in real HTML right in the application that we're using. 1:18

We are still missing a couple things that we need. 1:21

For instance, we're going to have some static files like images, 1:23

some static style sheets, maybe some other files. 1:26

But we don't have any way to serve them, 1:30

so what we need to have is some way to serve static files. 1:32

Fortunately, Express has a way for us to serve static files 1:34

right off our file system. 1:37

All it requires is a little bit of code, 1:39

so the first thing I'm going to do is create a new folder. 1:41

We'll call it "public." 1:44

And I'm just putting it at the route of our Code Racer directory here. 1:50

And now the next thing we have to do is do our code for this. 1:53

Now, as we configure different parts of our application, 1:58

we're going to use this app.configure method, 2:00

which takes a callback, and inside of this, 2:03

we'll do our actual configurations. 2:06

Now, the way Express works is through a concept called middleware. 2:08

Middleware is a little bit of software that's responsible 2:11

for one part of our application. 2:14

For instance, when we do app.get, 2:17

that's actually using something called the router middleware. 2:19

And when the application receives a request, 2:22

it will go through this list of middleware 2:24

asking each one if it knows how to handle that request. 2:26

If one middleware doesn't know how to answer that request, 2:30

it will go to the next one, the next one, the next one. 2:33

Finally, the last middleware is the one that tells us, for instance, 2:36

a 404 page - not found. 2:39

Our router is already injected for us into the middleware stack, 2:43

so we don't have to worry about it, but we need to add another middleware 2:46

for our static, and this is done by using app.use. 2:49

And what we can do is pass in a function that will act as our middleware. 2:55

Express includes one, and it stores it in express.static. 2:58

And express.static takes an argument of what our 3:03

route folder for our static files are. 3:06

In our case, our static home directory is the public directory 3:08

that we just created inside of our project. 3:11

And let's see how we can express that. 3:14

We'll create a string, and we want it to be our public directory. 3:17

However, we want to be a little more specific, 3:20

so what we're going to do is we're going to use the special syntax right here. 3:22

The hash with the curly braces allows us to inject 3:26

some arbitrary values into our string. 3:30

If we were to put a variable name or anything else in here, 3:33

it will be added into our string in the place of our hash, curly braces. 3:37

There's a special variable in Node called _dirname, 3:42

and this is going to change from file to file because it represents 3:46

the directory name that holds the file that we're currently writing. 3:49

Our server.coffee's full file address is in Code Racer, 3:53

and it's actually in /users/jhoskins/dev/coderacer. 3:57

However, the dirname here will be the directory all the way up to Code Racer, 4:03

so this represents the directory that server.coffee is in, 4:07

and then we can append /public to it, 4:11

and that will be the full path to our public directory. 4:14

This also could have been written like this with public like that, 4:16

dirname and a +. 4:21

This is pretty much equivalent. 4:25

The only difference is we simply use the CoffeeScript interpolation syntax 4:27

to place it all into 1 string. 4:30

I'm actually going to keep it like that. 4:33

I prefer this syntax instead of concatenating a bunch of separate strings together. 4:35

And now to test it out, inside our public directory I'm just going to create a new file. 4:38

We'll call it app.js, and we'll add a little bit of an alert or something in here. 4:44

Now I'm back in JavaScript here, so you can see I'm using proper JavaScript syntax. 4:52

But this is just a demo, and we should hopefully see that 4:57

it exists inside of our public directory. 5:00

Now we can go back to our server, and Supervisor has already reloaded it for us, 5:02

so if we refresh, Fooo!!! is still fine. 5:06

But if we go to app.js, we can now see it's serving the file 5:09

with alert 'Hello' in it, 5:14

so this is not going to do any preprocessing. 5:16

It's just going to take the file off the directory. 5:18

It's just going to take the file off the file system and serve it up, 5:20

just like you would in a normal web server. 5:23

We can think about how this worked. 5:26

Our server got the request for app.js, 5:28

and at the top of our middleware stack is our static middleware 5:32

and it says--well, I've got a request for a file called app.js. 5:35

It looks inside of its public directory where we specified those files would be, 5:40

and if it finds an app.js, it's just going to serve that file and return. 5:44

But otherwise, if we go to simply /foo, 5:48

there's no file called foo, so the Express middleware 5:53

can't handle that, and then it sends it to the router, 5:56

which is the middleware responsible for handling these requests 6:00

that we're defining right here. 6:04

Since there is a foo, this handles it right here. 6:07

If it was something else, like bar, 6:10

even the router couldn't handle it, and that's where we see "Cannot GET /bar." 6:14

Now we can tell our designers and our team that any static files 6:18

that need to be served can be served into app.js. 6:21

And we can see how we could include it by going to our layout.eco here. 6:25

We'll create a script tag, "src." 6:29

And we can set the source to /app.js. 6:33

Save it out, and if we go to our route here, 6:39

we got our alert popup, which means that our app.js was loaded successfully 6:43

into our page. 6:47

For any static files, all we need to do is 6:49

place them in our public directory and then include them the normal way. 6:51

This is great. We have the ability to stop here. 6:56

We could have our index.eco or various other templates 6:58

set up, and our designers can start filling them out. 7:02

But there is one last requirement. 7:04

[lesscss.org] 7:06

We want to use LESS, which is a CSS preprocessor which allows us to 7:08

add some extra special features to CSS 7:11

like variables, mix ins, and some other cool goodness. 7:13

However, it falls under the responsibility of our app 7:17

to turn our LESS files into compiled CSS files. 7:19

There are a few different ways we could do this. 7:23

There is a Node package we can set up, 7:25

but what I've done is since I've done this so often, 7:27

I've actually taken all the logic for taking a LESS file 7:30

off the file system and turning it into a CSS file. 7:33

Now, I've actually published this onto the NPM repositories, 7:38

so if we were to go to search.npmjs.org, 7:41

the name of the package that I created was called "connect-lesscss." 7:44

And the reason I've called connect is because connect 7:52

is the basis for Express, so connect is like Express, 7:55

but it has a little bit less functionality in it. 7:59

Typically, instead of using connect, we use Express, 8:02

but since it's compatible with any connect-based system, 8:05

I've named it "connect." 8:07

This is just a module I wrote that extracts away some of the complexity 8:09

of dealing with LESS files. 8:12

What I'm going to do is we'll go back to our package.json. 8:14

We can do "connect-lesscss." 8:18

And we'll say--we'll use any version. 8:24

Let's go to our terminal, stop our server. 8:29

We can see it's been stopping and restarting a lot as we've saved our files, 8:31

and we can run "npm install" once again. 8:34

Now we're able to include our connect-lesscss package 8:39

into our application, so let's just include it right now. 8:42

I'm going to store it into a variable called "less," 8:45

and then we'll say require 'connect-lesscss.' 8:47

We actually want to create a directory where all of our LESS files will be. 8:52

[twitter.github.com/bootstrap] 8:56

And actually, on top of that we want to include Bootstrap, and Bootstrap is a 8:58

framework from Twitter that gives us some base CSS, 9:00

including things like some typography, 9:03

some buttons and other things. 9:07

And it's available to us through LESS, 9:09

so what I want to do is get a copy of the Bootstrap LESS files for my application. 9:13

If we were to just click "Download Bootstrap," 9:17

we'd actually get the compiled CSS. 9:20

However, the LESS files are useful because we can change and tweak 9:23

the variables in them as well as use LESS to add more to our styles. 9:26

The way I like to do this is since I use Bootstrap on a few different projects, 9:31

I actually like to check out a copy of the repository into my local computer, 9:35

and then every once in a while I can just copy the contents 9:40

of this LESS directory here, and LESS is where all of the different files 9:43

are for the different components of the Bootstrap framework. 9:48

I've copied the URL of the repository here. 9:52

I'm just going to actually change to the directory higher here, 9:56

and this is my dev directory. 9:59

Right now I only have 1 project in here, 10:01

but I want to clone Bootstrap as another project. 10:03

I'm going to do "git clone," the Bootstrap repository, 10:06

and it will take a few seconds to just download, 10:11

and now if I take a look, we can see we have a Bootstrap directory, 10:13

and inside of Bootstrap, there's a LESS directory 10:16

which has all of those files. 10:19

What I'm going to do is I'm going to copy from our Bootstrap directory 10:21

by doing a "cp -r bootstrap/less." 10:24

And I want to copy all those files into a directory in my Code Racer project, 10:30

so we'll say "coderacer," and I actually want to keep all of our LESS files 10:34

in a separate directory called less, so we'll just say "less." 10:37

Now if we go back into our project, we can see we now have a LESS directory 10:42

with all these LESS files in it. 10:45

So let's cd back into our Code Racer directory so we are in the right place. 10:48

We successfully moved everything into our LESS directory. 10:54

Going back to our server, we've required our connect-lesscss here, 10:59

and this is just another middleware, so we can add it into our app.configure here. 11:04

We're going to do "app.use," and we're going to not just pass in a function. 11:09

Instead we're going to pass another argument which we didn't use 11:14

the first time we used the app.use method, 11:16

and this is where we're going to actually mount our middleware. 11:19

We can have our middleware handle all requests, 11:22

for instance, like our static request does. 11:25

It takes all requests, sees if there's a static file, and if so, serves it. 11:27

Otherwise, it passes it along. 11:32

Or we can specify as our first argument where we want to mount it, 11:34

and this means only requests to this specific URL 11:38

will be handled by this middleware. 11:41

What I'm going to do is I'm going to pass in the name of 11:44

the route that we want to serve our main application.css file from. 11:47

So, when we request application.css, 11:53

I want my LESS middleware to handle it, and it will look like 11:58

there's a file called "application.css." 12:01

However, it will be using LESS to do this. 12:03

The way our middleware works is LESS is a function, 12:06

and it just takes the name of the LESS file that we want to serve. 12:09

Now, if we look inside of our LESS here, 12:13

there's a file called "bootstrap.less," 12:16

and this is the main entry point. 12:19

You can see it imports a lot of the other components, 12:22

so if we compile bootstrap.less, 12:24

we'll be including all these other components into 1 large file. 12:27

If we go back to our server here, that's the file I want to load in. 12:31

We'll use the same technique we've done before. 12:35

We'll do our dirname, 12:37

and then it's in our LESS directory, 12:40

and then /bootstrap.less. 12:43

And it's as simple as that. 12:48

If we start up our server again using "supervisor server.coffee," 12:50

everything looks like it's running fine. 12:55

Let's go back. Our homepage still works. 12:58

But if we go to /application.css, 13:01

we can see we get a big CSS file, 13:06

and this is the compiled version of our LESS file 13:09

with all of the information in it. 13:13

So, this is really nice. 13:16

Our Bootstrap is cool because we can, for instance, 13:18

go into our variables 13:20

and change the base colors around to different things. 13:23

Now, one thing that I don't want to do is actually load in Bootstrap itself. 13:27

Instead, I want to create another LESS file 13:31

that will include Bootstrap. 13:34

I'll create a new file, and we'll save it as our application.less. 13:36

And all I need to do is import, import our bootstrap.less file. 13:46

Now we can easily add other rules here without adding them to the bootstrap.less file 13:56

which we didn't write, so by just importing it, 14:01

we could add a crazy rule like "body background: red." 14:04

And since we've changed where we actually want to start our LESS compilation 14:12

from Bootstrap to our application.less, 14:16

we'll go into our server here, change Bootstrap to application. 14:19

The server will restart automatically. 14:24

And it looks like I have a small syntax error probably, 14:29

so let's go into our application.less, 14:31

and I forgot the semicolon. 14:34

Right now it doesn't give us much of an error, 14:36

but hopefully in the future version it will. 14:39

But now that we've changed that, we can see we have our Bootstrap here, 14:41

and all of this is included because we did our import bootstrap.less. 14:45

And if we make it all the way to the bottom, 14:50

and we'll just resize the window here, 14:53

we'll see there's a body background: red, 14:55

so now our designers have a place that they can start putting 14:58

CSS and LESS rules into the page. 15:02

And to show that this will work, let's go to our layout.eco, 15:06

add a link tag, rel is stylesheet. 15:09

Our href is /application.css. 15:18

And that's it, so if we go back to our homepage, 15:27

we should see we have some nice typography there. 15:30

However, our background color is not red, 15:36

which could be the result of a few different things, 15:38

so let's just take a look really quick. 15:41

At our application.less I added quotes to that, which is not how you do it. 15:43

Just a little error on my part, but if we take those off and turn it into 15:50

a proper CSS color instead, now if we refresh we get a blindingly red page. 15:53

Let's put that to something maybe a little bit nicer. 15:59

A light grey. 16:03

Now we can see the designers have a great place. 16:05

They can now add CSS and LESS to the application.less file. 16:07

They can add any static files like JavaScript files, 16:13

images, or any other static assets they need to the public directory. 16:18

And they can use views to do any normal pages 16:21

that they would need in the application 16:25

like our home page or any of our other pages. 16:27

They're very easy to create. We'll just create different routes. 16:30

Tell it to render different files 16:33

and pass it any information that it needs. 16:35

It's a very small amount of code, but we got to a point now 16:37

that we could share this out with the rest of our team. 16:39

Different developers could add different routes to different functionality. 16:42

Designers can start coding in the actual application, 16:46

and we're well on our way to creating our Code Racer game. 16:49

You need to sign up for Treehouse in order to download course files.

You need to sign up for Treehouse in order to set up Workspace