IntroductionWelcome| 00:00 |
(music playing)
| | 00:04 | Hi I'm Joe Marini, and I'd like to welcome
you to CSS with LESS and Sass; two great tools
| | 00:09 | for building CSS, using features that
you've always wished that CSS had built in.
| | 00:15 | I'll start by showing you how to install the
tools you'll need to work with LESS, and Sass.
| | 00:20 | Then we'll see how to use each tool to
build CSS code using features, such as variables,
| | 00:25 | which allow you to define values once, and
then reuse them throughout your style rules.
| | 00:29 | We'll see how to create reusable classes called
Mixins; groups of style rules that can be parameterized,
| | 00:34 | and included inside of other styles.
| | 00:37 | We'll even see how to use functions, and mathematical
operations in CSS to create advanced visual effects.
| | 00:44 | If you're ready to take your CSS styles to
the next level, then let's get started learning
| | 00:47 | how to build great CSS with LESS and Sass.
| | 00:50 |
| | Collapse this transcript |
| What you should know| 00:00 | So, before we get started working with Sass,
and LESS in CSS, you should know some things
| | 00:05 | that I'm going to assume you're
already familiar with in this course.
| | 00:09 | First, you should be familiar with HTML5, and
you should be familiar with CSS, and JavaScript.
| | 00:14 | Now, if you're not already familiar with
these subjects, then I would stop here, and head on
| | 00:19 | over to the lynda.com library, where they've
got you covered. Here you can see there's
| | 00:23 | an HTML5 course that's been built by James
Williamson; really great course for learning
| | 00:28 | the basics, and structure, and syntax of HTML5.
| | 00:30 | There is also a couple of really good
CSS courses that I would direct you to.
| | 00:35 | The first one is CSS Fundamentals, also by James
Williamson, and this covers the basics of learning CSS.
| | 00:42 | The next is CSS Core
Concepts, again by James Williamson.
| | 00:46 | I would make sure that you cover CSS Fundamentals
and Core Concepts before you work with Sass
| | 00:50 | and LESS, because Sass and LESS
are basically supersets of CSS.
| | 00:54 | And last, but not least, I would also be
familiar with JavaScript, and there's a great course
| | 00:59 | here on lynda.com called JavaScript Essential
Training; really, really great course for
| | 01:04 | learning JavaScript.
| | 01:06 | So if you're not familiar with these
concepts, I would stop here, go cover these courses
| | 01:09 | first, and then come on back, and we
will dive into Sass and LESS with CSS.
| | 01:13 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium member of the lynda.com
online training library, or if you're watching
| | 00:05 | this tutorial on a DVD-ROM, you have access to
the exercise files used throughout this title.
| | 00:09 | I have laid out the exercise files in a series of
chapters, you can see here in the Exercise Files folder.
| | 00:15 | Each one of these chapters contains a collection
of files that we use in each one of the exercises.
| | 00:21 | So for example, here in chapter 1, we
have a collection of files that we use for
| | 00:25 | that particular chapter, and these correspond to
the movies that you're watching in the title.
| | 00:30 | I've also included a file
called ExampleSnippets.txt.
| | 00:35 | This contains all of the code that I used
to build the finished examples in this title.
| | 00:40 | So even if you're not a premium member of
the online training library, this file is
| | 00:45 | provided to you for free, so you still
have access to all the code snippets.
| | 00:48 | Let's jump into the code editor really
quick, so you can see what this looks like.
| | 00:52 | So this is the file of the ExampleSnippets, and you
can see that it's organized according to each chapter.
| | 00:57 | So throughout the title I'm going to
scroll down to the particular point in this file
| | 01:01 | where the snippets are used
in that particular chapter.
| | 01:04 | So for example, here in Chapter 1, I
have our first example, and I'll just be copying
| | 01:08 | and pasting this code directly from the
ExampleSnippets into the finished example files; this way
| | 01:14 | you don't have to sit there and watch me type.
| | 01:15 | Now, if you're a monthly member, or an annual
member of lynda.com, you don't have access
| | 01:19 | to the exercise files, but of course you
can still follow along from scratch with your
| | 01:23 | own assets, and as I said, you have
access to the ExampleSnippets.txt file.
| | 01:27 | Alright, let's get started.
| | 01:28 |
| | Collapse this transcript |
|
|
1. OverviewWhat are LESS and Sass?| 00:00 | Now, you might be thinking to yourself, why
do we even need LESS and Sass, and what are
| | 00:05 | they, and why isn't CSS good enough?
| | 00:07 | CSS seems to be a pretty stable styling language;
it's been around on the Web for a long time now.
| | 00:12 | So what's up with LESS and Sass?
What's so great about them?
| | 00:14 | Well, I wouldn't blame you for thinking that;
CSS is a pretty great language, but it does
| | 00:18 | have some drawbacks.
| | 00:19 | First, there is no way to specify
variables in CSS; these are values that you define
| | 00:24 | once, and then reuse them
throughout a style sheet.
| | 00:28 | So for example, if you define a color value,
and you want to use that in multiple places,
| | 00:32 | you have to then put that exact color value,
literally, in a whole bunch of places in your style sheet.
| | 00:37 | And if you want to go back and change it later,
you may have multiple, maybe even hundreds
| | 00:42 | of places where you need to change that color,
and LESS And Sass help us solve that problem.
| | 00:47 | CSS also has no way to define
and reuse common style rules.
| | 00:52 | So you can imagine that your Web site might have
some common attributes, like border thicknesses,
| | 00:56 | and colors, and various other
appearances that you want to use again and again.
| | 01:02 | CSS doesn't really have a way to do that.
| | 01:04 | LESS and Sass, on the other hand, give us a way
to define style rules, much like you might
| | 01:08 | define classes or objects in other languages,
and then reuse them throughout your style sheets.
| | 01:13 | CSS also has no way to customize style rules
with different values for making minor adjustments.
| | 01:20 | And this kind of thing comes up all the time.
You might imagine that you have, for example,
| | 01:23 | a set of rules from making
rounded corners on certain div elements.
| | 01:28 | Well, if you only change certain values,
like the border radius throughout your Web site,
| | 01:33 | then you have to define different CSS
style rules for each one of those classes.
| | 01:38 | Wouldn't it be better if you could just
define the style rule once, and then pass out some
| | 01:41 | value that says, hey, this time, make this value this
instead of that, just to make some minor adjustments?
| | 01:47 | CSS can't do that, but LESS and
Sass can, and we'll see that later on.
| | 01:51 | There's no way to perform
calculations on the fly in CSS.
| | 01:54 | So for example, in CSS, you have to define
static values; you can't do things like mathematical
| | 01:59 | operations, or any other kind of calculations.
| | 02:02 | LESS and Sass help us
solve that problem as well.
| | 02:04 | Finally, CSS syntax can get pretty unruly
if you're building a site that's non-trivial.
| | 02:10 | When you're building a large Web site,
sometimes you'll lose track of all the different CSS
| | 02:14 | style rules that different people have
defined, you yourself may have defined style rules
| | 02:18 | over the years, and forgotten where they are,
or you know, you could find yourself duplicating
| | 02:23 | effort over and over again.
| | 02:24 | LESS and Sass help you organize your CSS
into reusable objects and classes that help you
| | 02:30 | organize your styles, cut down on
code, and make things easier to track.
| | 02:34 | Alright, so we're going to take a
brief introduction to LESS and Sass.
| | 02:37 | First, LESS and Sass are higher level style
syntaxes that provide advanced CSS features.
| | 02:44 | Usually the way you use them is you compile
them -- in other words, you translate them -- into
| | 02:48 | standard CSS before the
browser renders the page.
| | 02:52 | Now, this process is automated; you don't
have to do this yourself. You use a LESS or Sass
| | 02:57 | compiler, and it takes the LESS, and Sass code,
whichever one you're using, and compiles it
| | 03:01 | into CSS, which is what you
upload to your Web server.
| | 03:04 | You don't usually use LESS and
Sass directly in your Web pages.
| | 03:08 | These files then upload it to the
production Web server, where they are then downloaded
| | 03:12 | by the browser, and served
just like any other CSS.
| | 03:15 | Now, before we go any further, we're going to
have to get some tools for working with LESS
| | 03:19 | and Sass, and that's what
we're going to cover next.
| | 03:20 |
| | Collapse this transcript |
| Downloading and installing the tools| 00:00 | To complete the exercises in this course,
there are some things that you are going to need,
| | 00:04 | such as tools, and various other things,
| | 00:06 | so we're going to get those
installed now, so you can get up and running.
| | 00:10 | First you're going to need the current
versions of the LESS, and Sass libraries, and we'll take
| | 00:16 | a look at how to
download those in just a moment.
| | 00:18 | For working with Sass, you're
going to need to have Ruby installed.
| | 00:22 | Now, most Macs usually already have this. On
Windows, however, you're going to need to install
| | 00:27 | Ruby, so we'll take a look at how to do that.
| | 00:29 | For LESS, you're going to need to download
a client-side compiler, and the one that I'm
| | 00:34 | going to be using in this course is called
SimpLESS, and the nice thing about SimpLESS
| | 00:38 | is A, it's free, and B, it works on Mac, and
Windows, so we'll take a look at that in a moment.
| | 00:43 | You're going to need a text editor, or an IDE
for editing CSS, and HTML, and it doesn't really
| | 00:48 | matter which one you use.
| | 00:50 | If you want to use Dreamweaver, that's fine.
| | 00:52 | If you want to use Sublime Text, that's fine.
| | 00:54 | I'm going to be using a tool called
Aptana Studio, and the reason I use Aptana Studio
| | 00:58 | is because it's free, it's cross-platform;
works on Mac, and Windows, so that's what I'll
| | 01:03 | be using in this course.
| | 01:04 | But don't worry if you don't have it, or don't
want to use it; you can use whatever you want.
| | 01:08 | You'll also need a Web server, either
local, or remote to test your Web pages on.
| | 01:13 | And in fact, this is pretty much optional.
Most of the work that we're going to be doing
| | 01:16 | is just static, client-side files,
| | 01:19 | but if you want to test your files out on a
Web server, you can have one running locally,
| | 01:23 | or you can use whatever remote
server you use to do your testing.
| | 01:26 | Okay, so let's take a look
at downloading the tools.
| | 01:29 | Let's begin by getting
the LESS, and Sass libraries.
| | 01:32 | You can find the LESS client-side library at lesscss.org;
that's all one word, with the .org on the end.
| | 01:40 | And you can see here that, as of this recording, the
current version is 1.3; that's this guy right here.
| | 01:46 | So you can just download this by clicking
on the Download button, and saving the file
| | 01:51 | into your Exercise Files folder.
| | 01:53 | Now, sometimes, in some browsers, when you click
this button right here, your screen will fill
| | 01:58 | up with code, because this is a
JavaScript file that we're linking to.
| | 02:02 | If that happens, the reason why that's happening
is because your browser is trying to download
| | 02:07 | the JavaScript code as if it were a
Web page, and that's not what we want.
| | 02:12 | So if that happens, just click the Back button,
come back to this page, and then right-click
| | 02:16 | on this, and choose Save link as.
| | 02:20 | Now, most browsers have a Save link as option,
and this will allow you to save the content
| | 02:25 | of this link as JavaScript code.
| | 02:27 | So save that into your Exercise Files,
and then let's go take a look at Sass.
| | 02:32 | Now, with Sass there is
really not much to download.
| | 02:35 | All you're going to need to do is install
Ruby, and then install Sass as a Ruby gem.
| | 02:42 | So to get Ruby, you go to the Ruby Installer for
Windows site, and this is at rubyinstaller.org/downloads.
| | 02:50 | And I'm going to just simply
install the latest version of Ruby.
| | 02:53 | You can see that there's a
list of RubyInstallers here.
| | 02:56 | Just get the latest one. I'm going to be
using 1.9.3-p194, but whatever the latest version
| | 03:01 | is by the time you get
here should work just fine.
| | 03:03 | So I'm going to click this, and download it.
| | 03:06 | Okay, so I have it downloaded.
| | 03:08 | I'm going to launch the
installer, and I'm going to run it, okay.
| | 03:11 | So I'm going to accept the License; click Next.
| | 03:15 | Now, just go ahead and install it wherever it
says it wants to install in the default location.
| | 03:19 | Here you can see it's
installing in C:\Ruby193. That's great.
| | 03:24 | Make sure you click the box
labelled Add Ruby executables to your PATH.
| | 03:28 | And you're going to need to do this,
because when you're running Sass later, you don't
| | 03:32 | want to have to type in long path
instructions to find the Sass compiler.
| | 03:36 | So just add the executables to
the PATH, and then click Install.
| | 03:40 | Okay, so now Ruby is installed
on my computer, so I click Finish.
| | 03:45 | And now I'm going to go over to my
command prompt, and make sure everything is fine.
| | 03:50 | And I'm going to type the word gem, followed
by -v, and you can see that that came back
| | 03:55 | with a version number 1.8.23.
| | 03:57 | And I can also type ruby -v, and you can
see that that's coming back with a response.
| | 04:03 | If this comes back with an error, what that
means is that ruby either wasn't installed
| | 04:07 | correctly, or you didn't put the
Ruby executables into your PATH.
| | 04:12 | So now we need to go and install Sass.
| | 04:15 | So to do that, all I need
to type is gem install sass.
| | 04:20 | Then Ruby will go out, and it's going to go
get Sass, and you can see it's installing.
| | 04:24 | Okay, looks like it's successfully installed.
| | 04:26 | Now, to make sure that it
installed successfully, let's type sass -?
| | 04:33 | and you can see that this comes
back with the help content for Sass.
| | 04:37 | Okay, so now we've installed Sass correctly.
| | 04:39 | Let's take a look at the client-side
LESS compiler that we're going to need.
| | 04:44 | Now, the client-side LESS compiler I'm
going to be using this called SimpLESS,
| | 04:47 | and SimpLESS is great because it's
free, and it works on both Mac and Windows.
| | 04:52 | So to install it, all you need to do is go
to the wearekiss.com/simpless URL; right up
| | 04:59 | here in the URL bar you can see that.
| | 05:01 | And it should default to the page for
the operating system that you arrive on.
| | 05:06 | In this case, you can see I'm using Windows,
so it's on the Windows page, but if you are
| | 05:12 | on a Mac, you'll see the page that probably
looks more like this, and you can see this is the
| | 05:15 | Mac version. So let me go
back to my Windows version here.
| | 05:19 | Now, I am just going to click on this
button, and download it, and install it.
| | 05:22 | And what will happen is you'll
see that it download, and installs.
| | 05:25 | Now, I've already done this;
| | 05:26 | I've already installed this, so I'm going to go
ahead and run it, and show you what it looks like.
| | 05:31 | And when you run SimpLESS for the first time,
you'll see an interface that looks like this;
| | 05:35 | it's pretty simple.
| | 05:37 | All you're going to do is drag and drop your
project folder onto this window, and the SimpLESS
| | 05:41 | compiler will compile your LESS code into CSS.
| | 05:45 | Make sure that up here in the title bar,
the version that you're using is SimpLESS 1.4,
| | 05:51 | because that's the one that corresponds to LESS
version 1.3, which is what we're using in this course.
| | 05:57 | So if you don't see this version string up
here, or something more recent, then download
| | 06:01 | it again, and install it, because you need to
have this version in order to work properly.
| | 06:06 | So those are all the client-side
tools that we're going to need.
| | 06:09 | The only things that you'll need in addition
to this, like I said before, are an editor, and
| | 06:13 | you can use whatever text editor you want.
I'm going to be using Aptana Studio, because
| | 06:17 | that's what I prefer to use.
| | 06:19 | And optionally, if you want to,
you can use a Web server.
| | 06:22 | It's beyond the scope of this course to
teach you how to install a Web server.
| | 06:26 | If you want to install a local Web server,
there are a couple of great courses on lynda.com
| | 06:30 | that show you how to do that. Just
jump on over to the site, and do a search.
| | 06:33 | But for the moment, we have all the things
that we need to get started writing some LESS,
| | 06:37 | and Sass code.
| | 06:38 |
| | Collapse this transcript |
| A quick tour of LESS and Sass| 00:00 | Alright, so we have our tools installed; we
have everything we need to get started working
| | 00:04 | with Sass and LESS.
| | 00:05 | Let's take a quick tour through the kinds
of things that LESS and Sass allows us to do.
| | 00:10 | Now, I don't expect that you're going to understand
everything I'm about to show you. The whole
| | 00:14 | purpose of this particular demonstration is
just to give you an idea of the kinds of things
| | 00:19 | that you can do when you're
using LESS and/or Sass with your CSS.
| | 00:24 | So I'm going to start off with a LESS example.
| | 00:26 | So in my Exercise Files, I'm going to open
up the first LESS example, and you can see
| | 00:31 | that this is just a basic HTML
file with not a lot of content in it.
| | 00:35 | There's a title, I've got a header here in
the page, and I have a div with some content.
| | 00:40 | What I'm going to do is open up the LESS
style sheet, and you can see that for the most part,
| | 00:47 | LESS looks a lot like CSS, with a couple of
things that probably don't look very familiar to you.
| | 00:53 | At the top of the file, I have this weird looking thing
called @baseColor, and I'm assigning it a color value.
| | 00:59 | This is a variable in LESS. This allows me
to define a value one time, and then use it
| | 01:06 | over and over again.
| | 01:07 | And if I want to change the value,
I only have one place to change it.
| | 01:11 | Now, the word variable is a bit wrong here;
it's actually more like a constant if you're
| | 01:15 | used to other programming languages.
| | 01:17 | Variables in places like JavaScript are allowed to
change values, and that's not the case in LESS and Sass.
| | 01:22 | So it's a bit of a misnomer, but that's the way
they refer to it, so that's how I'll refer to it.
| | 01:27 | Looking down a bit further, here on line 3
I've got a class for my header tag, and I'm
| | 01:32 | defining a font-family for it.
| | 01:34 | And then I'm going to define some properties. I
have a background-color, a border, and a color.
| | 01:38 | And you can see here on line 7, I'm assigning
the value of the baseColor variable to the
| | 01:43 | color property of the header.
| | 01:45 | Look on line 6; I've got a border, which is
1 pixel solid, and then I've got a function call
| | 01:50 | here called darken, and I'm giving
it the baseColor, and a percentage.
| | 01:54 | This is a built-in function that allows me to
take a color, and then darken it by a certain amount.
| | 02:00 | Then I have the background-color, and the background-color
is being assigned the value of the function lighten.
| | 02:04 | And again, I'm giving it the baseColor
variable, and telling it to lighten that color by 50%.
| | 02:10 | So in other words, LESS is doing a whole bunch of
calculations for me that I would normally have to do myself.
| | 02:15 | Okay, so what we're going to do now is
fire this up in the browser, and see it work.
| | 02:19 | So let's go back to the first LESS example.
| | 02:21 | Now, I'm going to show a technique for using LESS
on the client-side that we'll see a little bit later.
| | 02:26 | Now, this is not normally how you would do it
in production, because this relies on JavaScript,
| | 02:30 | and ordinarily you would compile your LESS
into CSS before you upload it to the server.
| | 02:35 | What I'm going to do is, in my ExampleSnippets
file, I'm going to go down to the first chapter,
| | 02:41 | and I'm going to copy two lines. The first
line is going to be this link tag, so let
| | 02:44 | me copy tha,t and I'm going to paste it
into the head of my document over here.
| | 02:50 | This links in the style sheet, and you can see
I'm giving it the rel value of stylesheet/less,
| | 02:56 | so this hides it from the browser, and the
LESS code will find this, and convert it into
| | 03:01 | CSS code, and the href I'm giving it is
styles.less; that's this file right here.
| | 03:06 | Okay, so let's go back to the code.
| | 03:08 | Now I need to include the LESS JavaScript
that we downloaded earlier, and that's
| | 03:14 | going to convert the LESS code into
CSS when the page loads in the browser.
| | 03:20 | So let's go ahead back to Snippets, and I'm
going to copy this, okay, and back to the document.
| | 03:30 | Now, make sure you put the script tag below
any LESS style sheets that you include this way.
| | 03:37 | The script for LESS has to be the last thing
to load. And we call earlier; this is the
| | 03:43 | LESS code that we downloaded
from the LESS css.org site.
| | 03:46 | Alright, so now I'm going to save this.
| | 03:49 | Now I'm going to bring this up, and just for
fun, let's go ahead and bring this up in Firefox,
| | 03:53 | so you can launch Firefox with this file
any way that you're used to launching it.
| | 03:57 | I'm here at Aptana Studio, so I'm going to
launch it like this; I'm just going to say
| | 04:00 | run this in Firefox.
| | 04:02 | And you can see that what's happening is
the color that I gave it is being assigned to
| | 04:06 | the text of the header; that's dark.
| | 04:09 | Here's the background-color; that's
lighter, and here's the border color.
| | 04:12 | So just defining that one
variable -- let's go back to the code.
| | 04:16 | Just by defining that one variable here, I
was able to affect multiple properties on
| | 04:21 | the element in the page of this header.
| | 04:24 | Alright, here's lighten,
darken, and the baseColor.
| | 04:27 | Okay, so that's pretty cool.
| | 04:28 | Let's see the same thing now in Sass.
| | 04:32 | So I'm going to close the LESS
style sheet, and the first LESS example.
| | 04:36 | I'm going to bring up the FirstSassExample.
| | 04:38 | Now, Sass is a little bit different. Sass
is not going to include its own syntax code,
| | 04:44 | we're going to actually
compile it using the Sass compiler.
| | 04:47 | So let me open up the styles.css file, and
you'll see that this is pretty similar to LESS.
| | 04:53 | There's couple of things that are different.
| | 04:55 | First, variables in Sass are defined with
dollar signs at the front, and not @ characters.
| | 05:01 | But for the most part, the
syntax is pretty much the same.
| | 05:04 | If we go down here to line 7, you'll see color,
and I'm assigning it the value of the baseColor
| | 05:07 | variable, and then above that, I've got border,
and background color, both darken and lighten.
| | 05:13 | Same function names;
| | 05:14 | Sass just happens to use the same function
names for those, so the same kind of thing.
| | 05:17 | Now, for Sass, we're going to
have to compile this into CSS.
| | 05:22 | So let me go over to my Sass compiler.
| | 05:26 | Okay, so here I am in my Command Prompt.
| | 05:28 | Now, based upon where you put the Exercise Files,
this is going to be slightly different for you.
| | 05:32 | So what I'm going to do is just change the
directory into my Exercise Files folder, which
| | 05:35 | is Desktop\Exercise Files, and we're
going to go into Ch1. Alright. Okay.
| | 05:43 | And if we do a quick dir, you can
see that there's the styles.scss file.
| | 05:49 | Now, to compile this into CSS, I'm going type --
and again, I don't expect you to understand
| | 05:53 | this right now; just I
want to show you the effect --
| | 05:55 | so I'm going to type sass --update,
and then styles.scss.
| | 06:03 | Hit Return, and you can see that Sass has
come back with the result overwrite styles.css.
| | 06:09 | So let's go into the
Exercise Files folder, into Ch1,
| | 06:13 | and you can see now that styles.css
has been created from the scss file.
| | 06:20 | Let's go back in to the editor,
and see what the results were.
| | 06:23 | Okay, so here we are back in the editor. This
is the Sass file, and you can see now here's
| | 06:26 | the new generated styles.css
file, so let's open that up.
| | 06:31 | And you can see that this file was generated
from the Sass code, so the variable was replaced
| | 06:37 | with the value down here.
| | 06:39 | Here we've got the darkened value,
and here we've got the lightened value.
| | 06:44 | So this is the resulting CSS code, and
let's go back to the FirstSassExample, okay?
| | 06:48 | So now that we've got our styles.css file
generated, that's where this link is linking
| | 06:53 | off to, and this time we're using
just a regular old CSS style sheet.
| | 06:57 | Let's bring this up in the browser, and I'm
just going to go ahead and launch Chrome.
| | 07:01 | Now again, you can bring this up
however you're used to doing it.
| | 07:03 | If you want to go out to the files system,
and double-click on the file, that's fine.
| | 07:06 | I'm just going to do this using Aptana.
| | 07:09 | And you can see, once again, similar results.
| | 07:11 | We have the text has been assigned a certain
color, the background has had its color lightened,
| | 07:16 | based upon the text color, and the border
has had its color darkened, based upon whatever
| | 07:21 | the text color was.
| | 07:23 | That's pretty cool, right?
| | 07:24 | I've defined one color value once, and then
using LESS and Sass, I was able to calculate
| | 07:28 | other color values.
| | 07:30 | This is just the beginning. We've only
scratched the surface, and we'll see how to put Sass
| | 07:33 | and LESS to use in much more powerful examples.
| | 07:35 |
| | Collapse this transcript |
|
|
2. Introduction to LESSUsing LESS on the client| 00:00 | Now that we've had a quick tour of using LESS and Sass,
we'll get down into the nitty-gritty of using each one,
| | 00:06 | and in this chapter, we're going to
focus on the basics of using LESS.
| | 00:10 | And I'm going to focus on
using LESS on the client side.
| | 00:13 | LESS can be used on both
the client and the server.
| | 00:16 | Now, using LESS on the server involves setting
up node.js, and a whole bunch of other work,
| | 00:21 | which is beyond the scope of this title to
cover, so I'm going to focus on using LESS
| | 00:26 | on the client side.
| | 00:28 | So let me go ahead and, in the Exercise Files,
| | 00:30 | I'm going to open up LESS_SampleDoc.html.
| | 00:33 | Now, if you watched the earlier movie, you
may recall that the way that we used LESS
| | 00:39 | on the client side before was to include a link to a
LESS style sheet, and it looked something like this, right?
| | 00:47 | The rel value was stylesheet/less, and then
the href pointed to wherever the LESS
| | 00:52 | style sheet was, and then we included the
script that pointed to the client-side LESS library,
| | 00:58 | which is written in JavaScript.
| | 01:00 | When the page loads, this JavaScript finds
all the style sheets of type stylesheet/less,
| | 01:06 | converts them into CSS on the fly,
and then includes them in the page.
| | 01:10 | Now, that's a very simple way of using LESS
on the client, but it's not how you'd probably
| | 01:13 | do this in production.
| | 01:15 | First of all, there is the small problem that
some people, yes, in this day and age, still
| | 01:19 | have JavaScript turned off. Not
sure what they're thinking, but they do.
| | 01:23 | The other problem, of course, is
that this is a performance issue.
| | 01:26 | If you are including a whole bunch of LESS
styles, and they're kind of complex, then having
| | 01:31 | all that happen via JavaScript on the fly
is not the most preferment way to do things.
| | 01:37 | So we are going to use the client-side LESS
compiler that we downloaded earlier called SimpLESS.
| | 01:42 | So let me jump over to
SimpLESS, and show you how this works.
| | 01:46 | Okay, so here I am on my Desktop, and when
you launch the SimpLESS application, you'll
| | 01:50 | get a very simple UI that looks like this.
| | 01:53 | It's basically a blank screen, and a nice, big
rectangle that says, Drag & Drop your project folder here.
| | 01:59 | So that's exactly what I'm going to do.
| | 02:01 | I'm just going to pick up the Exercise Files, and
I'm going to go ahead and just drop it on there.
| | 02:05 | Now, you'll notice that when I did that, the
SimpLESS application crawled through the structure
| | 02:10 | of the Exercise Files, found every file that has a
suffix of .less on the end, and put them into this list.
| | 02:18 | Now, in this list, you can see that on the
right-hand side, there's a whole bunch of
| | 02:21 | text that says Never compiled, right?
| | 02:23 | So none of these have been compiled yet.
| | 02:26 | And you can do this with
as many folders as you want.
| | 02:29 | If I scroll all the way down here, you'll
see that the text says, hey, Add more .less
| | 02:32 | files, or Drag & drop another project folder.
| | 02:35 | You can add as many project folders as you want.
| | 02:38 | We're only working with one, so I just dropped the
entire Exercise Files folder onto this application.
| | 02:45 | Now, the SimpLESS application gives you a
couple of features that you can turn on and off.
| | 02:49 | The first one is the prefixr.
| | 02:51 | If you want SimpLESS to automatically use
vendor prefixes for the styles that it generates,
| | 02:57 | for example, in places like border radius,
or box shadow, or whatever, you can turn that
| | 03:01 | feature on, on an individual file basis.
| | 03:05 | If you leave it off, then it
won't generate prefixes for you.
| | 03:10 | You can also decide whether you
want to have the code minified.
| | 03:14 | So right here, you can see that
this toggles CSS minification.
| | 03:18 | Now, normally you would leave this on, because
when you're going to deploy the CSS to your
| | 03:21 | server, since you won't be editing the CSS directly,
you might as well minify it to reduce download times.
| | 03:28 | And the last option is the love button,
| | 03:30 | and if you're feeling generous, you can mention
SimpLESS in a CSS comment in your source code.
| | 03:35 | I'm going to go ahead and leave that on,
because it's just a fun little option.
| | 03:39 | So I am going to leave minify on, I am going
to leave the love on, and I turn off the prefixr.
| | 03:43 | And then I'm just going to go ahead and go
through this list, and Click on the little
| | 03:46 | refresh icons to do an initial
compile of each one of these files.
| | 03:50 | So you see, when I Click on the styles.less
little refresh button right here, a little green
| | 03:54 | checkmark appears next to the styles.css
file, which indicates that it was compiled, and in
| | 04:00 | fact, over here you can see the
words Compilation successful.
| | 04:02 | So I'm just going to go down the list.
| | 04:05 | So now all of the examples in the Exercise
Files have been compiled for the first time.
| | 04:10 | Now, that's the last time
I'm going to have to do that.
| | 04:12 | As long as I leave this application running,
it's going to watch the Exercise Files folder,
| | 04:17 | and it's going to recompile the LESS
files that change every time I do a save.
| | 04:23 | So it will automatically
generate the CSS for me.
| | 04:26 | So let's go back into the code, and if you
look over in my Project Explorer here in Aptana
| | 04:31 | Studio -- and if you're not using Aptana, that's
fine; you can go ahead and look in the Example
| | 04:35 | Files folder if you want to --
| | 04:37 | you'll see that for each one of the LESS
files, there is now a corresponding CSS file.
| | 04:42 | So let's just open one of them up.
| | 04:43 | This is a simple one; this
is the variables example.
| | 04:47 | And you can see that the CSS has been generated, and
it's minimized, and this is the LESS code that generated it.
| | 04:53 | Now, we'll get into the code in a little bit;
| | 04:55 | I just wanted you to see what the results were.
| | 04:57 | All right, let's close each of these.
| | 05:00 | Now, because I've gone ahead and used the client-
side compiler SimpLESS, I don't need to do this
| | 05:08 | include the LESS JavaScript trick anymore.
| | 05:10 | So I'm going to go ahead and cut this out,
| | 05:13 | and instead, I can just point directly at
the generated CSS file for a given example.
| | 05:21 | So I can now use a regular link, with a
regular style sheet, and a regular type of text and
| | 05:26 | CSS, and I can just point this at
one of the generated CSS files.
| | 05:31 | So I'll type in V, I get my little var styles,
| | 05:34 | I'll use that one, and we'll Save.
| | 05:36 | And again, I don't expect you to understand
all of this syntax just yet, but let's just
| | 05:41 | run this in the browser,
and see what it looks like.
| | 05:44 | And you can see that it's working fine.
| | 05:46 | So there's some colors and
some fonts being assigned.
| | 05:49 | So that's in a nutshell how
you use LESS on the client side.
| | 05:54 | Using the SimpLESS compiler, you can have
the code watched, so that every time you make
| | 05:58 | a change to your LESS, the CSS is generated
for you, and you can use regular CSS in your
| | 06:03 | pages, which you then upload to the server.
| | 06:05 | All right, so now we've seen the basics of
using the compiler to generate CSS from LESS.
| | 06:10 | Let's take a look at the rest of the examples
in the folder, and see how to use LESS to make
| | 06:14 | your CSS even easier.
| | 06:16 |
| | Collapse this transcript |
| Using variables| 00:00 | Let's start off by looking
at using variables in LESS.
| | 00:03 | Using variables just by themselves is one
of those features that will probably make
| | 00:07 | you want to stop using plain old CSS,
and switch to something like LESS, or Sass.
| | 00:13 | Variables define placeholders for values that are going
to be used in several places throughout your CSS styles.
| | 00:21 | Variables can have different kinds of values.
| | 00:23 | They could be colors, they could be strings,
they could be numbers, and we'll see an example
| | 00:27 | of that in just a moment.
| | 00:28 | It doesn't take a whole lot of imagination to
see an example where this would be really useful.
| | 00:33 | Let's imagine that I had some CSS, and I had
an accent color, and the accent color is
| | 00:38 | #24a, which is what I've given it here.
| | 00:42 | And you can see I'm using it on a span, and
I might use it somewhere else in my code.
| | 00:46 | I might have a column, I might have a sidebar, I
might have some other elements that use this color.
| | 00:50 | Now, a couple of problems
become apparent pretty quickly.
| | 00:53 | Number one, if I ever decided to change this
color, I would have to do a search and replace
| | 00:58 | on all the places where I used the color, and
that's error-prone, and it's time-consuming.
| | 01:03 | And if I use any other colors that are based on
this color, then those would all have to change too.
| | 01:09 | I would have to go back and recalculate them,
figure out what the right color to use is,
| | 01:13 | and so on, and so forth.
| | 01:15 | Variables help solve this problem, and in LESS, the
way that you define a variable is by using the @ symbol.
| | 01:21 | So here, I have @accentColor, and
I've given it the hex value of 24a.
| | 01:27 | And now I can just go ahead and use this variable
in place of all the other places where I've used it.
| | 01:32 | I think this is pretty
self-evident how useful this is.
| | 01:36 | Let's jump over to the code, and
see some real examples in action.
| | 01:41 | So here we are in the code, and I've got my
ExamplesSnippets file open, and scroll down
| | 01:45 | to Chapter 2, which is the chapter we're
working in. This is all the basic LESS features, and
| | 01:50 | we're going to start off using variables.
| | 01:52 | Let's go ahead and open up the var_styles.less
file, and this is where we're going to be doing
| | 01:58 | our work for this example.
| | 02:00 | And I'll also open up the LESS_SampleDoc file,
and this is the sample file that we're going
| | 02:06 | to use as a test bed for all of
our LESS work in this chapter.
| | 02:10 | And you can see it's a
pretty straightforward document.
| | 02:12 | It has some divs, it has a header, some body content,
I've got an unordered list in here; I have a footer.
| | 02:18 | Back to the Snippets.
| | 02:20 | Let's start off with something simple.
| | 02:22 | I'm going to Copy these first two lines
here that define some color variables.
| | 02:26 | I'm going to paste them into my var_styles.less
file, and then let's use them somewhere.
| | 02:34 | So I'll copy over the definitions for
h1, and h2, and I'll paste that in here.
| | 02:42 | Let's take a look at what it is we've done.
| | 02:44 | I've got two Variables; @myColor1, and @myColor2,
and then I'm using them in the rule definitions
| | 02:49 | for h1 and h2 here.
| | 02:51 | Well, right now I'm only using @myColor1,
but I could use @myColor2 just as easily.
| | 02:55 | I'm just demonstrating that, in this case,
I've got a named color, here I've got a hex
| | 02:59 | color, so you can have
variables of different types.
| | 03:02 | So let's go ahead and save this, and when
we save this, the SimpLESS compiler, which is
| | 03:07 | running in the background, is now watching
this file, and will generate the CSS for us.
| | 03:12 | So let's go ahead and open up var_styles.css,
and you can see, sure enough, that for h1 and
| | 03:19 | h2, we have the color, which has been
translated into its hex equivalent, which in this case
| | 03:24 | is 0080, and that's a navy color,
and you can see it's been minified.
| | 03:29 | So let's close this.
| | 03:31 | We'll save, we'll go back to the sample file,
| | 03:34 | and now in the href for the style sheet, I
can just refer it to a regular CSS file now.
| | 03:39 | I'll type var, and I'll just use the var_styles.css,
and save, and let's go ahead and bring this
| | 03:46 | up in the browser, and see what it looks like.
| | 03:49 | I'll just go ahead and bring this up in
Firefox, and you can see that the colors for the h1
| | 03:54 | and the h2 are now in fact navy.
| | 03:57 | So far, so good. Let's head back to the code.
| | 04:00 | Let's copy over some other examples.
| | 04:02 | I'm going to bring over this line here
from @myStringVar on down to @paddingVar.
| | 04:08 | I'll copy those, and I'll
paste them in down here.
| | 04:13 | And then let's copy over
the code that uses them,
| | 04:17 | so I'll select these lines, and
copy and paste those down here.
| | 04:21 | Let's take a look at
what it is that we've done.
| | 04:24 | So we've already seen the examples
where I have two color variables.
| | 04:28 | I've defined a variable now for a string,
and we'll see how that's used in the moment.
| | 04:32 | I've got a font size variable, and then I
have a couple of variables that are multi-value.
| | 04:37 | So here for padding, I've defined a padding
definition that uses the different sides of padding.
| | 04:43 | For the border, I had defined a variable
that has a thickness, a border type, and in fact,
| | 04:49 | I'm reusing the color
variable that I defined up here.
| | 04:53 | So I can use variables inside my variables.
| | 04:56 | Let's scroll down into the rules.
| | 04:58 | You can see that here for the rule definition
for the element with the ID of mypara, which
| | 05:05 | if we go back to the HTML, you can see
that that's this paragraph right here,
| | 05:09 | I'm saying, make the font size whatever the
font size variable is, and I'm using the border
| | 05:14 | and padding variables to
assign some border and padding.
| | 05:17 | And for the string variable, I'm going to
use the pseudo-selector in CSS for after, which
| | 05:24 | will insert the content defined by the
string variable at the end of that paragraph.
| | 05:31 | If we look back in the source, we have sample
paragraph of text, and if all goes well, with
| | 05:38 | an appended string, will be added
into the document. So let's save.
| | 05:44 | I'm going to switch back to the HTML
document, and we'll bring this up in Firefox.
| | 05:51 | And you can see that we have our
colored h1's, like we had before.
| | 05:55 | Here we have our mypara element,
with a 4 pixel blue border.
| | 05:59 | You can see that's been padded.
| | 06:01 | The font size has been set, and sure enough, with
an appended string, was added into the document.
| | 06:08 | So hopefully this gives you an
idea of how powerful variables can be.
| | 06:12 | Variables can really save you a lot of time.
| | 06:14 | They can really make your CSS a lot easier to
read and maintain, and it's one of the features
| | 06:19 | that you're going to love about using
LESS, and later on, you'll see about Sass.
| | 06:22 |
| | Collapse this transcript |
| Working with mixins| 00:00 | Another really great feature of LESS
is the notion of what are called mixins.
| | 00:06 | Mixins are pretty much what their name implies;
| | 00:09 | they let you define common properties once, and
then reuse them throughout the rest of your CSS.
| | 00:15 | Let's take a simple example.
| | 00:17 | To define a mixin, you define it like
you would define any other CSS rule set.
| | 00:23 | So here I have a class named .myMixin, and
I'll just define some properties in there
| | 00:28 | for our font size,
and for background color.
| | 00:31 | I've defined some properties, and if I want
to reuse these elsewhere in my styles, all
| | 00:34 | I need to do is, inside the name of my style
sheet, just include the name of the mixin class.
| | 00:40 | So I would define a rule named myStyle, and then just
include the .myMixin right inside the rule itself.
| | 00:47 | You can imagine if I have a whole bunch of
places where the style rules for various elements
| | 00:52 | differ by only a few properties, but they reuse
a lot of common ones, I can just define a
| | 00:56 | mixin class that holds
all the common properties,
| | 01:00 | and in fact, I can use more than one if I want
to, and then just include them within the style
| | 01:04 | rules where I need to use them.
| | 01:07 | Let's see this in action
by jumping over to the code.
| | 01:10 | I've got my ExampleSnippets open.
| | 01:12 | Scroll down to the Mixins
section for Chapter 2,
| | 01:15 | and I've got my SampleDoc, which is
the same as the one we've been using.
| | 01:18 | We're going to use it now
to show how mixins work.
| | 01:22 | Let's open up the mixin_styles.less file, and right
now it's blank, because we're going to be building it.
| | 01:28 | So over in the Snippets, let's go ahead
and copy over the first part of our example.
| | 01:34 | So I'll copy those lines right there
for commonTraits, and paste them in.
| | 01:38 | What I've done is defined a set of properties that
are going to be used more than once in my style sheet.
| | 01:44 | So I have a border-radius, I've got
a border setting, and some padding.
| | 01:48 | So let's go back to the Snippets.
| | 01:51 | Let's copy over the rest of
the class definitions here.
| | 01:54 | So for header and footer, we're
going to copy, and we're going to paste.
| | 01:59 | What I've done is defined a couple of style
sheet rules; one for the header, one for the footer,
| | 02:04 | and you can see that, in this case, the only
difference is that their color differs slightly.
| | 02:08 | So for the header, I've got this hex color,
for the footer, I've got this hex color.
| | 02:13 | But other than that, they share the same
properties for our border-radius, border, and padding.
| | 02:17 | And to use those inside the class definitions,
I simply put the name of the mixin class inside
| | 02:23 | the rule definition.
| | 02:25 | And again, if I had more than one mixin
class defined, I would just simply list them off
| | 02:29 | as many times as I wanted to use them.
| | 02:31 | I could have another traits section.
| | 02:33 | I could have another section defined just for
borders, and use them as many times as I want.
| | 02:40 | Let's save.
| | 02:41 | Now we're going to jump
over to the Sample Document,
| | 02:45 | and remember that in the background, the
SimpLESS compiler has compiled this for us.
| | 02:50 | So now I'm just going to go ahead and refer
to the mixin CSS file that's generated, and
| | 02:55 | just to make sure that everything is
okay, let's go ahead and open that up.
| | 02:59 | And you can see that the mixin_styles.css
file has been generated, and it's minified.
| | 03:05 | Just for grins, let's go ahead and format
this, so you can see it in its unminified state.
| | 03:10 | So you can see that what happened was here
are the commonTraits, and everywhere in the
| | 03:15 | LESS where I had the word commonTraits,
I've had these properties replaced.
| | 03:21 | So we just did a search
and replace substitution.
| | 03:22 | So I'm just going to go ahead and undo that.
| | 03:26 | Let's go back to the Sample Document, and we'll
save it, and let's bring it up in the browser.
| | 03:33 | And you can see that the
color is different in each case.
| | 03:35 | We've got some darker colors up here for the
text, a lighter color down here, but the border
| | 03:40 | property is the same in both.
| | 03:42 | So we have a 1 pixel green border, with some
rounded corners, and those are the common traits
| | 03:47 | that are shared between
the header and the footer.
| | 03:51 | Let's go back to the code for a second.
| | 03:53 | And just to prove you that this works
cross-browser, let's also bring it up in IE,
| | 03:57 | and you can see it works fine in IE.
| | 04:00 | And let's bring it up in Chrome,
| | 04:03 | and you can see it's working
just fine in Chrome as well.
| | 04:05 | So using mixin classes allows you to group
sets of properties that are common together,
| | 04:10 | and you can define as many of these as you
want, and then reuse them in your CSS code.
| | 04:15 | This alone will probably cut down a lot of work
that you need to do in maintaining complex CSS files.
| | 04:20 |
| | Collapse this transcript |
| Using nested rules| 00:00 | LESS also lets you define
what's known as nested rules.
| | 00:04 | Now, nested rules are a bit more of a stylistic
thing than a real feature functionality thing,
| | 00:09 | but they come in handy on their own.
| | 00:11 | If you've written a whole bunch of CSS
code before, you have probably come across CSS
| | 00:15 | that looks something like this.
| | 00:17 | You have a whole bunch of classes, and then
child selector,s and then you might have something
| | 00:21 | like a child selector with a pseudo class on it.
| | 00:23 | It can be pretty hard to
read for nontrivial cases.
| | 00:26 | It seems pretty easy to read here, because I
don't have a whole lot of text on the screen,
| | 00:30 | but for styles that build on each other, where
you've got some styles defined in a parent style,
| | 00:36 | and then some more styles to find in a child
of that parent, and then so on, and so on, this
| | 00:40 | can get to be pretty eye straining, and
it leads to maintainability problems.
| | 00:45 | To help solve this problem, LESS lets you
write nested rules, which allows you to create
| | 00:51 | rules that look a lot more like
the DOM structure of your document.
| | 00:56 | So to take the example I just had, I
could also write it in LESS like this.
| | 01:00 | I would have an outside container called .content,
and then I would put my child rules inside
| | 01:07 | of this definition.
| | 01:09 | So for the paragraph, I would simply put the
P tag, along with whatever styles go in there,
| | 01:14 | and then if I had some more styles, say,
for an anchor tag, I would put the styles for
| | 01:18 | the anchor tag inside the content as well.
| | 01:20 | And then for the pseudo class case, where I
wanted to define a rule for when the user
| | 01:26 | hovers over the a tag, I would use what's
known as the ampersand selector, which
| | 01:30 | means refer to the parent of the
rule that's currently being defined.
| | 01:36 | So in this case, &:hover would resolve
into a:hover, because the ampersand
| | 01:43 | would match up with the parent of this rule,
and this rule is currently inside the a tag.
| | 01:49 | Let's go ahead over to the
code, and see how this works.
| | 01:54 | So here in the code, I've got my ExampleSnippets
open, and I've scrolled down to the Nested
| | 01:58 | Styles section, and over here, I've got
the Sample Document that I've been using.
| | 02:03 | So let's open up the nested_styles.less file,
and this is what we're going to be building.
| | 02:09 | Back to the Snippets.
| | 02:12 | Let's go ahead and copy over this one first,
the one for the body, and I'll paste it over.
| | 02:18 | And what I'm going to do is quickly jump over to
the SimpLESS compiler, and turn off minification,
| | 02:24 | so that you can see in the
resulting CSS what's happening.
| | 02:27 | Here in the SimpLESS compiler, you can see
for nested _style.less, I'm just going to turn
| | 02:32 | off the little minify option,
and we'll go back to the code.
| | 02:35 | I'm going to save this.
That's going to compile.
| | 02:40 | So here I have a style definition for the
body, and inside the body tag, I have a font
| | 02:45 | family, which is going to apply to the body,
and then I've got two other definitions: one
| | 02:49 | for a paragraph, and one for a
paragraph with the ID of mypara.
| | 02:54 | Paragraphs that match up with paragraph
tags that are inside the body will have a Times
| | 02:59 | family, except for this particular
paragraph, which will have the Courier New.
| | 03:03 | So if I save -- bring up this generated
CSS file, so you can see what's going on --
| | 03:09 | you can see that the generated CSS
code is pretty much what you'd expect.
| | 03:13 | You have the rule for the body, then you
have body p, then you have body p, ID of mypara
| | 03:20 | and all the font families
have been replaced appropriately.
| | 03:23 | So let's close this, let's go back over to the
SampleDoc, and let's include the nested styles result;
| | 03:30 | that's the CSS file, and we'll save, and we'll
just go ahead and bring this up in the browser.
| | 03:37 | So you can see, the font family has been
set for the body, which is the sans serif font.
| | 03:43 | Here is a paragraph that does not have the mypara
ID; that's now Times, and this one is Courier New.
| | 03:50 | So everything pretty
much worked as we expected.
| | 03:52 | So let's go back to the code.
| | 03:54 | Let's copy over the rest of the rules.
| | 03:57 | And in this case, I'm going to copy over the
rule set for the item with the ID of mypara,
| | 04:05 | which is that paragraph tag.
| | 04:07 | And in this case, I'm setting the color, along
with the border, and some padding, and I'm using
| | 04:12 | the little ampersand operator right here to
assign the pseudo class for the hover state,
| | 04:17 | so that when the user hovers over this
paragraph, the color will change to red.
| | 04:22 | So this will resolve into mypara:hover, because
this means refer to my parent, and if we look
| | 04:27 | up the chain, this is the
nearest parent style rule.
| | 04:30 | So we'll save, and then once
again, let's bring up the CSS.
| | 04:34 | We can see here that the
mypara case has been generated.
| | 04:40 | There's the hover right
there. Let's close this.
| | 04:42 | Let's go back to the SampleDoc.
| | 04:46 | We've already got our style sheet in there, so
let's save, and let's bring it up in the browser.
| | 04:52 | And you can see, in this case, where now the
border has been applied, the padding has been
| | 04:55 | applied, and you can see that as I'm
hovering over the paragraph, it's changing color.
| | 05:00 | Let's bring it up in some other browsers.
| | 05:01 | Let's go ahead and run this in IE.
| | 05:05 | You can see that that's working. And
for good measure, let's run it in Chrome,
| | 05:10 | and you can see it's working
just fine in Chrome as well.
| | 05:13 | By using nested styles, you can succinctly
write your CSS rules that they mimic the DOM
| | 05:19 | structure of your document, and they're
much easier to read and maintain this way.
| | 05:23 | They're a lot less verbose, and it
matches up better with your document.
| | 05:27 |
| | Collapse this transcript |
| Using operators| 00:00 | So far we've seen LESS used to
basically reorganize existing CSS.
| | 00:07 | So we've used variables, we've used mixins,
we've used nested classes, but LESS also adds
| | 00:12 | the ability to do things like
mathematical calculations inside your CSS.
| | 00:18 | Let's take a look at that in action.
| | 00:20 | Here you can see I've
opened my ExampleSnippets file.
| | 00:23 | I have scrolled down to the section on Operations,
and I'm using the same HTML file that we're
| | 00:29 | using for our examples.
| | 00:31 | And here, I've got my
ops_styles.less example file open.
| | 00:37 | Let's just copy over the lines from this
section here in the Snippets; all of them this time,
| | 00:42 | and we'll copy them, and
we'll just bring them on over.
| | 00:46 | So far, things look pretty much familiar if
you've been following the course along to this point.
| | 00:51 | We have variables for color, I have a variable for
some padding, and I have a variable for some thickness.
| | 00:57 | And then down here on a style rule for the
paragraph with the ID of mypara, I'm using those variables.
| | 01:06 | Let's take a look at how this
works before we do our operations.
| | 01:09 | I'm going to go ahead and save this, and then
over in the SampleDoc, I'm going to include
| | 01:15 | the stylesheet for ops_style.css. This is
the file that SimpLESS has generated for us,
| | 01:22 | and just to make sure everything looks good,
let's just quickly open, and look at it.
| | 01:26 | And you can see that things look
pretty much the way we'd expect.
| | 01:28 | Here is the rule; we have
color, border, and padding.
| | 01:33 | Close that, now we'll save, and now
we'll bring this up in the browser.
| | 01:37 | Let's bring this up in Chrome.
| | 01:39 | And you can see that here we have the color
of red, and we have some padding around the
| | 01:43 | paragraph, and here's the border.
| | 01:45 | So far, so good. Let's go
ahead and go back to the document.
| | 01:49 | Let's do a little bit of math.
| | 01:52 | If I have a base padding of 10 pixels, I
can also add padding for our left-hand side.
| | 01:57 | I can say add base padding, and I can say + 20.
| | 02:03 | LESS is smart enough to realize that I've used a
unit here in the variable definition of pixels.
| | 02:11 | When it calculates this value right here,
basepadding + 20, it's going to assume that
| | 02:17 | the 20 needs to be in pixels as well.
| | 02:18 | So let's go ahead and save, and let's
go bring the document back up again.
| | 02:22 | So you can see that the padding this time
has been increased on the left-hand side.
| | 02:28 | So we've taken the original
padding of 10 pixels, and added 20 to it.
| | 02:31 | So let's go back to the code.
| | 02:35 | You can see that here was the basepadding
of 10 pixels, and it calculated 10 plus 20, which
| | 02:40 | is 30 pixels for the second padding value.
| | 02:44 | Let's go back and do a few more things.
| | 02:47 | You can also do operations on color.
| | 02:50 | For example, I've got a color defined here,
and this hex value is all red, and no green,
| | 02:56 | and no blue, but I can add a color to it.
| | 02:59 | I can say + #00f, and that's going to
add a whole bunch of blue to the red.
| | 03:07 | So instead of seeing the text be red, when you
take red, and you add blue, you get a purple color.
| | 03:13 | So I'm going to save this, and once again,
let's look at the generated CSS, and you can
| | 03:19 | see that it added those two values together.
| | 03:21 | So now I've got a nice little purple
color instead of red. I've got fof now.
| | 03:25 | Let's close this, let's go
back to the document, and preview it.
| | 03:31 | And you can see, sure enough, the
text is now purple instead of red.
| | 03:36 | So let's close this.
Go back to the code.
| | 03:39 | One final thing to show; you can use brackets,
or parentheses, I guess, in your calculations.
| | 03:44 | I have the 1 pixel thickness of the border.
| | 03:48 | I can do things like base thickness,
| | 03:53 | I can add 11, and then divide by 2.
| | 03:57 | So that's going to be 1 plus
11 is 12, divided by 2 is 6.
| | 04:01 | So this should give me a border
thickness of 6 pixels instead of 1.
| | 04:07 | So let's save, and once again,
let's look at the generated CSS.
| | 04:11 | Sure enough, there's my border;
it's 6 pixels now instead of 1.
| | 04:15 | So let's close, and let's go
ahead and preview this in the browser.
| | 04:21 | And sure enough, you can see I've got a 6
pixel border surrounding my now purple text.
| | 04:26 | So using calculations and mathematical operators
in your CSS is possible through the use of LESS.
| | 04:32 |
| | Collapse this transcript |
|
|
3. Advanced LESSExploring parameterized mixins| 00:00 | In this chapter, we're going to take a look
at some of the more advanced features of LESS.
| | 00:05 | We're going to start off by looking at mixins
with arguments, and sometimes these are called
| | 00:09 | parameterized mixins.
| | 00:12 | If you recall from earlier in the title, we
learned how to write mixins, and they looked
| | 00:16 | something like this.
| | 00:17 | I have a variable, and it's named @radius.
| | 00:20 | Then I define a mixin
class named .border-radius.
| | 00:25 | You can see that the mixin for border-radius
is using the value of the radius variable
| | 00:31 | wherever it is used inside the mixin.
| | 00:33 | Then I can go ahead and use this mixin
throughout my LESS style sheets wherever I want.
| | 00:38 | But wouldn't it be better if I had a way
of changing the value of the variable simply
| | 00:44 | by passing an argument to the mixin class?
| | 00:47 | Well LESS actually lets you do this.
| | 00:49 | So instead of writing it this way, what
I would instead do is write it like this.
| | 00:54 | So now I don't have a variable anymore;
| | 00:56 | now I'm passing an argument
directly to the mixin class.
| | 01:00 | It works just like it did before.
| | 01:02 | So now anywhere the radius argument is used,
the value represented by the argument is going
| | 01:08 | to be replaced inside the mixin.
| | 01:10 | So it's one thing to
see it in theoretical form.
| | 01:13 | So let's actually jump over to the
code, and watch it in action. Okay.
| | 01:17 | So here I'm in the code, and I've scrolled down to
my ExampleSnippets file to the Advanced LESS section.
| | 01:23 | The first example is the Parameterized Mixins.
| | 01:26 | I've got my Sample Document
which I have been using up until now.
| | 01:30 | Let's go ahead and open up
the mixargs_styles.less file.
| | 01:35 | This is the file that we're going to build up.
| | 01:37 | So let's start off by copying over the first snippet
from the file, and we'll just go over here, and paste them.
| | 01:46 | Then back in the snippets, we'll copy this
part right here, and we'll paste it in down
| | 01:53 | here, and close it off.
| | 01:55 | What I've done here is declared a mixin which is named
border-radius, and it takes an argument named radius.
| | 02:03 | And in addition to taking an
argument, I've given it a default value.
| | 02:08 | If I use this mixin without passing in an
argument, the value of radius will default to 5.
| | 02:13 | If I do give it an argument value, then that
value will override whatever the default value is.
| | 02:19 | You can see that all this is doing is using
a whole bunch of vendor prefixes to define
| | 02:23 | the border-radius class.
| | 02:25 | So for my paragraph, we now
have the border-radius defined.
| | 02:30 | And in order to actually see
that, let's give it a border.
| | 02:34 | So let's say border: 1px
solid black. So we'll save, and
| | 02:41 | let's open up the
generated mixargs_styles.css.
| | 02:46 | You can see that the value of 5 pixels has
been replaced wherever I'm using the radius,
| | 02:51 | simply because I didn't
give it a default value.
| | 02:54 | So let's close this.
| | 02:56 | Let's go to the SampleDoc, and we'll go
ahead and use that CSS file in our document.
| | 03:03 | We'll bring it up in the browser.
| | 03:06 | You can see that I've got a 5 pixel
border-radius around my paragraph here.
| | 03:11 | If we go back into the code, go back to the
mixin, I can call this with, say, 10 pixels. Save.
| | 03:21 | Go back to the browser. Let's refresh it.
| | 03:24 | You can see that now the radius is now 10 pixels,
because I passed in an explicit value for the argument.
| | 03:30 | Let's take a look at some other examples.
| | 03:33 | Back here in the code,
let's go back to the snippets.
| | 03:37 | Let's copy over the next example right here.
| | 03:40 | We'll paste that in.
| | 03:42 | So now I have a new mixin named .customBorder,
and this takes a couple of arguments; there's
| | 03:47 | a color argument,
and there's a width argument,
| | 03:49 | and you can see the color defaults
to black, and the width defaults to 1.
| | 03:56 | So now I can take out this border
definition, and I can say .customBorder.
| | 04:05 | The other thing you notice is that I'm
using the names of the variable out of order.
| | 04:09 | I've got color over here, even though it
was passed in first, I've got width over here,
| | 04:12 | even though it was passed in
second; it works just fine.
| | 04:14 | So I'm going to call it without
any parameters. So let's save,
| | 04:19 | go back to the document,
and let's show it in the browser.
| | 04:23 | So far, so good.
It's black, and it's 10 pixels.
| | 04:25 | Let's go back to the code.
| | 04:27 | Now let's pass in some parameters.
| | 04:30 | I'll pass in blue, and I'll
pass in 5 pixels for the width.
| | 04:37 | Save, go back to the document, and we refresh,
and you can see that now it's thickness of
| | 04:44 | 5, and a color of blue.
| | 04:46 | So we've got multiple
parameters with default values.
| | 04:49 | Let's go back to the snippets.
| | 04:51 | Now, in this case, we'll copy over this, and
we'll paste this in, and back over to the snippets,
| | 05:04 | and we'll copy these last two lines here,
and we'll paste those in into my definition.
| | 05:11 | In addition to passing in parameters that
are named, and then using those names throughout
| | 05:16 | the mixin class, LESS provides a convenience
feature called the arguments parameter.
| | 05:22 | You can use the arguments parameter when you
want to just go ahead and use the arguments
| | 05:26 | as they are listed in order
throughout your mixin class.
| | 05:30 | So, for example, here I'm
defining a mixin called box-shadow.
| | 05:34 | And box-shadow, according to the W3C spec,
takes a whole bunch of arguments, right?
| | 05:38 | There's the X, the Y, the amount of
blur, the color, so on, and so forth.
| | 05:42 | If I want to use the arguments just as they're
given to me, I can just use the @arguments keyword.
| | 05:47 | You can see that I'm using the @arguments
keyword in all of these cases, for each one
| | 05:50 | of the vendor prefixes.
| | 05:52 | So it's just a shorthand way of saying,
take all of this stuff right here, and just put
| | 05:57 | it in where you see the arguments keyword.
| | 06:01 | So down here is where we're using it.
| | 06:03 | You can see I'm calling .box-shadow with some
values, and I'm putting some padding in this
| | 06:09 | time to make it a little bit more easy
to see in the screen. So let's save.
| | 06:13 | Let's go back to the document.
| | 06:14 | Let's bring it up in the browser.
| | 06:18 | You can see that here's the
box-shadow offset by 10 pixels,
| | 06:22 | we've got some blur on it, and it's all
accomplished using a mixin class, with parameters.
| | 06:28 | So hopefully this gives you an idea of how
you can define more advanced mixins that take
| | 06:32 | parameters, which should save you some time and
effort writing out variables that are global in nature,
| | 06:38 | and in this case, you can define mixins that
just get tweaked a little bit based upon the
| | 06:43 | values of the parameters you pass in.
| | 06:44 |
| | Collapse this transcript |
| Exploring mixins and pattern matching| 00:00 | LESS mixins can also be defined with an
advanced feature called pattern matching, and that's
| | 00:05 | what we're going to cover in this movie.
| | 00:06 | So you can see here in my Snippets file, I've
scrolled down to Chapter 3: Mixins with Pattern
| | 00:11 | Matching, and I've got my Sample Document
open, and I've also got my example file for this
| | 00:16 | particular movie called
mixpats_styles.less open.
| | 00:21 | Rather than explain how this works as we go,
let me copy a few things over, and then I'll
| | 00:24 | explain it once I'm done.
| | 00:26 | So I am going to start off by copying these
lines here, the ones for .alert(warning), and
| | 00:30 | .alert(error), paste them in over here, and
then I'm going to copy this one down here
| | 00:35 | with this @_ definition,
and I'll paste that in.
| | 00:39 | And then the last thing I am going to do is
go get my rule definition that uses the mixin,
| | 00:45 | and I'll paste that in down here.
| | 00:47 | So let's take a quick
review of what it is I'm doing.
| | 00:50 | You can see that I've defined a mixin
called .alert, but I defined it more than once.
| | 00:54 | I've defined it to take a keyword called
warning, I've defined it to take a word called error,
| | 01:00 | and then I've defined it to take something
that looks really weird; it's this @_ thing, and
| | 01:04 | we'll get back to that in a moment.
| | 01:06 | Down here in the rule definition, I have a
variable named type, and it is currently set to error.
| | 01:12 | And then inside this rule, which we'll
apply to the paragraph with the #mypara ID, I'm
| | 01:19 | using the mixin, and passing in that
type variable, which in this case is error.
| | 01:24 | So I can change this from error to warning,
because I've got both warning and error versions here.
| | 01:30 | Let's take a look in the browser; I am going
to go over here, use this generated file, which
| | 01:36 | is mixpats_styles.css, I'm going to save, and let's
bring it up in the browser, and see what happened.
| | 01:43 | So you can see that, in the browser, because
I set it to warning, I have yellow text, with
| | 01:48 | a border that's darker yellow.
| | 01:51 | Let's go back to the code, and take
a look at some changes we can make.
| | 01:56 | Alright, so back here in the
code, let's go back to the LESS file.
| | 02:00 | Now let's change this to error.
| | 02:02 | Let's go back to the browser, and refresh,
and now you can see that the paragraph is red
| | 02:06 | text, with a slightly darker red
border. Let's go back to the code.
| | 02:11 | So what's happening is, based upon the
value of this variable that I'm passing in, the
| | 02:15 | mixin is being selected according to which
keyword I'm using; it's using warning, or error.
| | 02:21 | Now, you might be wondering, what is
this weird @_ thing doing down here?
| | 02:26 | That means always match the contents of this mixin,
regardless of which one of these two gets matched.
| | 02:33 | So whether I use error, or whether I use warning,
these properties will be included, as well
| | 02:38 | as these down here.
| | 02:40 | So rather than copy and paste these properties,
and put them in both of these other two, I'm
| | 02:44 | just defining this mixin here
that says I always get matched.
| | 02:48 | Let's do one other thing.
| | 02:49 | I'm going to go back over here, and copy this
mixin definition, and I am going to paste it right
| | 02:55 | in the middle of these two.
| | 02:57 | Now, in addition to matching on these
keywords, I can also match on what is called arity,
| | 03:02 | and the word arity basically
means the function signature.
| | 03:05 | So you can see that each one of these mixins
takes a single argument; this one takes two.
| | 03:11 | If I wanted to use this one, rather than passing in
type, I can pass in other, and give it a color; say green.
| | 03:19 | So I'm going to save, and let's go
back to the browser, and refresh.
| | 03:23 | You notice that in this case, because neither
error, nor warning was matched, the other one
| | 03:28 | kicked in, and now I've got green text.
| | 03:31 | Now, sharp-eyed viewers might be saying, wait a
second; though the border is gone. Why did that happen?
| | 03:36 | Well, let's go back to the code.
| | 03:38 | Here we have a definition that matches on
whatever value is passed in, but notice it's
| | 03:42 | only taking one argument here.
| | 03:45 | So it only matches based upon the signature
of one of these other guys, because these guys
| | 03:49 | both take one argument.
| | 03:51 | If we wanted to have this match on the two
argument solution down here, I would just
| | 03:57 | need to copy this and paste it,
and do @_, @_.
| | 04:07 | So let's save, let's go back to the browser,
let's refresh, and now the border is back.
| | 04:14 | So now we have green text, with a darker green
border. And just to make sure we haven't broken
| | 04:18 | anything, let's go back to the code, let's
change this back to being error, and let's go refresh.
| | 04:27 | As you can see, I've used a mixin definition
that can take different kinds of arguments,
| | 04:32 | based upon how I want this element to appear.
| | 04:35 | In this case, I've defined two styles for
error and warning, and then a backup mixin
| | 04:40 | that can take any other kind of color, based on
the other keyword, as well as sets of properties
| | 04:45 | that get applied no matter which
version of the mixin gets selected.
| | 04:49 | And you can imagine this being used in real
world scenarios. For example, an airline Web site
| | 04:54 | might apply different styles to a single element,
based upon whether a plane is late, or on time,
| | 05:00 | or delayed for some mechanical
reason, or weather, or whatever have you.
| | 05:04 | You can define a mixin class that just simply
gets selected based upon the keyword you pass
| | 05:09 | into the mixin argument.
| | 05:11 | This is a really powerful feature, and it probably
makes writing CSS with varying kinds of style
| | 05:16 | definitions that are used in various
situations a heck of a lot easier.
| | 05:20 |
| | Collapse this transcript |
| Working with guarded mixins| 00:00 | LESS provides a way of writing mixins called
guarded mixins that are very similar to pattern
| | 00:06 | matching mixins, except that they match on
expressions, rather than simple values, or function
| | 00:12 | signatures, or what we call arity sometimes.
| | 00:16 | If you haven't watched the movie on pattern
matching mixins yet, you should probably stop
| | 00:19 | here, go watch that, and
then come back to this one.
| | 00:22 | In this chapter, we'll cover guarded mixins.
| | 00:25 | In my ExampleSnippets file, I
scroll down to Chapter 3: Guarded Mixins.
| | 00:30 | I got my Sample Document open, and I'm going
to do the work in mixguards_styles.less file.
| | 00:38 | Let's go back to the snippets, and before we copy all
these over, let's just take one line, and analyze it.
| | 00:45 | We'll copy that, we'll paste
this, and we'll close it off.
| | 00:50 | This mixin right here called .
text3d takes a single value called color.
| | 00:58 | What makes it a guarded mixin is this keyword
right here: when. When this condition is true,
| | 01:05 | that is when this mixin will be applied.
| | 01:08 | Now, this particular mixin only has one condition, and
you can see that it's calling a function called lightness,
| | 01:15 | and so it's retrieving the lightness value
from the HSL trio of this color, and it says,
| | 01:21 | okay, if the lightness of this color is less
than or equal to 50%, then apply this mixin.
| | 01:27 | Now, if I wanted to, I can
apply more than one guard.
| | 01:30 | I can put a comma here, and put
another condition in here, and so on.
| | 01:35 | And if any one of these conditions
evaluates to true, it acts as a giant or statement,
| | 01:40 | so any one of these being
true will trigger this mixin.
| | 01:44 | Now that we've seen what the syntax of
a guard looks like, let's go back and copy
| | 01:50 | over the rest of the snippets.
| | 01:53 | So we'll fill out this mixin right here by
copying its contents, and we'll paste that
| | 01:59 | in, and we'll get the next condition
here, and we'll paste that over here.
| | 02:06 | That's the mixin definition. Let's go back and get the
usage, and that's this right here; these three lines.
| | 02:13 | So we'll copy, and we'll paste.
| | 02:16 | Let's take a look at what the mixin is doing.
| | 02:20 | You can see that I've named it .text3d,
and let me just save this really quick.
| | 02:25 | And inside the mixin there are a
whole bunch of style definitions.
| | 02:29 | There's one for color, font size, there
is a border, and there is a text shadow.
| | 02:36 | This mixin is going to create text that's
been sort of 3D stylized based upon what the
| | 02:43 | lightness value of the color is.
| | 02:45 | If the lightness of the color is less than
or equal to 50%, as defined in whatever the
| | 02:50 | HSL value of the color is,
then this mixin will be applied.
| | 02:55 | If the lightness of the color is more
than 50%, then this mixin will be applied.
| | 03:00 | And just like we saw earlier, I have my
little @_ condition here, which means always match
| | 03:06 | this part of the mixin, regardless of
what the other two values turn out to be.
| | 03:11 | So we save this, and you can see down here in my h1
definition, I'm using the mixin with a color value.
| | 03:19 | This color value will be converted into HSL
on the fly, and then will be compared against
| | 03:24 | the various conditions or expressions
for the guards to see which one to apply.
| | 03:29 | Let's start off with a fairly dark
color; this is color 666 hex value.
| | 03:32 | I'm going to save this, go back over to my document,
and I'm going to insert the mixguards_styles.css,
| | 03:43 | and we'll save that.
| | 03:45 | And before we run it, let's take a look at the
generated CSS code, and we'll format it, so it looks nice.
| | 03:51 | So you can see that in this case, the dark
color had various properties applied in the
| | 03:56 | mixin that matched.
| | 03:57 | Let's go back to the code
really quick in LESS.
| | 04:00 | So this is a dark color, so
this one here got applied.
| | 04:03 | That's the CSS code, so let's undo this.
| | 04:06 | I'm going to close it.
| | 04:09 | So let's go to the document,
and bring it up in the browser.
| | 04:12 | So you can see that the text here has
a 3D sort of effect applied to it using the
| | 04:18 | CSS code, and we can tell which mixin was
applied by looking at the style of the border for
| | 04:26 | this particular result.
| | 04:28 | So let's go back to the code really quick.
| | 04:30 | So you can see here in the code that when the dark
version gets applied, the solid-gray border is there.
| | 04:36 | When the lightness is greater than 50%,
the dashed-gray border will be applied.
| | 04:42 | So since we're currently looking at a solid-gray
border, that means this mixin was the one
| | 04:46 | that got chosen, based upon the fact that the
lightness of the color was less than or equal to 50%.
| | 04:53 | Let's make a little change. We'll scroll
down here, and let's give this a lighter color.
| | 04:58 | Let's make this hex value ccc. Now
we'll save, and let's go back to the document, and
| | 05:07 | we'll refresh it in the browser.
| | 05:10 | And you can see that in this case the
dashed version of the border is now being applied,
| | 05:14 | and the 3D effect has been
applied using lighter color values.
| | 05:19 | So let's go back to the code really quick.
| | 05:22 | Let's take a look one more
time at what's happening here.
| | 05:25 | So the mixin is being applied based
upon what the lightness of the color is.
| | 05:29 | So in this case, when the lightness is less
than 50%, we have a solid gray border, and
| | 05:33 | we're taking the text, and darkening it
to give it sort of a darker 3D appearance.
| | 05:38 | And when the lightness of the color is greater
than 50%, then we're using the built-in lighten
| | 05:43 | function to create lighter versions of
the color to give it a nice 3D effect.
| | 05:49 | Using guarded mixins, you can create mixins that
get applied based upon expressions; expressions
| | 05:54 | that are evaluated based upon some values
that you pass in, which is a little bit unlike
| | 05:58 | the previous version of mixins that we saw,
the pattern matching, which switch on simple
| | 06:03 | values, or how many arguments are passed in.
Just another way to create some really powerful
| | 06:08 | mixin classes using LESS.
| | 06:10 |
| | Collapse this transcript |
| Using built-in functions| 00:00 | The LESS library provides a host of functions
for working with some common situations you're
| | 00:05 | going to find yourself in when
using some of the features of LESS.
| | 00:08 | So, for example, there's a whole bunch of color
functions that you can use to both manipulate
| | 00:13 | and extract values of colors.
| | 00:16 | So, for example, if you wanted to take a color,
and make it lighter or darker, you could use
| | 00:19 | the lighten or darken functions.
| | 00:21 | There are functions for
controlling the saturation level of colors.
| | 00:25 | You can affect the alpha transparency of
colors using the fade functions; you see fadein, and
| | 00:30 | fadeout, and fade there.
| | 00:31 | You can also use the spin function, which will
take a color, and then spin it a certain number
| | 00:35 | of degrees on the color wheel
to come up with a new color.
| | 00:38 | And then finally, you can mix two
colors together with the mix function.
| | 00:42 | You can also use functions to
extract values from certain colors.
| | 00:46 | So, for example, you can use the hue, saturation,
lightness, and alpha functions that, when given
| | 00:51 | a color, will convert that color to the HSL
space, and then give you the value based upon
| | 00:56 | the function that you're using.
| | 00:58 | There are also math functions.
| | 01:00 | So, for example, you can use functions like
round, to round a number, or ceil, or floor
| | 01:05 | to get the next closest integer number, given a
decimal number, or you can use the percentage
| | 01:11 | function, which, given a decimal number, will
come back with a percentage, and that's useful
| | 01:15 | in cases where, say, a CSS property is
expecting a percentage value, rather than a decimal.
| | 01:22 | Let's take a look at some of these in action.
| | 01:25 | Here in the code, I've scrolled down in my
snippets to Chapter 3, the LESS Functions,
| | 01:28 | and I've got my sample document,
which I'll be using for this exercise.
| | 01:32 | And I'm going to open up the funcs_styles.less
file; this is where we'll be using the exercise.
| | 01:40 | Let's begin by copying over the snippets.
| | 01:43 | First, I'm going to copy over this mixin that
I'm using just as a utility in this example;
| | 01:48 | this is not directly related
to functions, so I'll save that.
| | 01:54 | Now let's copy over the examples that are
using the color functions, and we'll start here.
| | 02:00 | So here you can see I've defined a
color variable, and given it a value of navy.
| | 02:06 | And then I've defined a whole bunch
of style rules for h1, h2, h3, and h4.
| | 02:13 | And for the h1, I'm going to go ahead
and use whatever color I was given,
| | 02:17 | but I want the headings in my document to become
progressively lighter, based upon the base color.
| | 02:23 | So, for example, in the h2 I'm going to call
the lighten function, which will lighten the
| | 02:29 | color that was given by 20%.
| | 02:31 | For h3, I'll lighten it by 30%,
and for h4, I'll lighten it by 40%.
| | 02:36 | Let's save this, and when I save it, the SimpLESS
compiler in the background is going to convert this into CSS.
| | 02:43 | So let's open the CSS, and let
me format it, so you can see it.
| | 02:48 | So you can see that the h1 has been given
a color that's navy blue, and then each one
| | 02:52 | of the progressive headings has been
given a color that's progressively lighter.
| | 02:57 | So let's undo that, and close it.
| | 03:00 | Let's go to the Sample Document, we'll reference
that in the link here, that's the CSS file,
| | 03:08 | so we save it, and let's
bring it up in the browser.
| | 03:11 | So you can see the effect here in the browser.
| | 03:14 | My h1 here is dark blue, and then each one
of the headings gets progressively lighter.
| | 03:19 | So just by giving it one color, I've been
able to implement a pretty cool text effect just
| | 03:23 | by using the lighten color functions.
| | 03:26 | So let's go back to the code, and this time
instead of navy, I'll use a dark gray color.
| | 03:33 | So hex 333, we save, let's go back to
the browser, let's refresh, and you can see,
| | 03:40 | in this case, we've got dark
gray now down to light gray.
| | 03:43 | That's pretty cool. So I've only defined the
color once, and yet, by using the LESS built-in
| | 03:47 | functions, I'm getting this nice little
fading effect on each one of my headings.
| | 03:51 | Let's go back to the code, and let's go
back to the snippets, and look at the next one,
| | 03:56 | and we'll copy that, and we'll paste it in.
| | 04:01 | So in this example, now I have a style rule that's
going to affect the paragraph that has the mypara ID.
| | 04:08 | And here I'm using a little border-radius mixin
that I defined up here, just to make it easy to see.
| | 04:14 | And in this case, I'm using the border color
property, and I'm using the hsl function, which
| | 04:21 | will create a new color based upon the
value of this color variable up here.
| | 04:27 | So the hue function will take the color
that it is given, convert it into HSL, and then
| | 04:35 | extract the hue value.
| | 04:37 | I'm then using the result of that function
to create a new hsl color, with the hue of
| | 04:43 | the color that I was given, and a couple of
settings over here that I've just decided
| | 04:47 | to set at 45% and 60%.
| | 04:50 | So let's take a look at what that does.
| | 04:51 | We're going to save, and then back here in
the browser, we'll refresh, and you can see
| | 04:57 | now that my paragraph has a border around
it with a color that was created based upon
| | 05:02 | the color that we set in the variable.
| | 05:05 | Let's go back to the code. Let's go back
and change this to navy once again, we'll save,
| | 05:13 | and we'll refresh, and you can see now that
the border color has changed, and the color
| | 05:18 | of the border is being derived from one variable, which
is affecting the colors of all of these separate elements.
| | 05:24 | So hopefully this gives you an
appreciation of the power of LESS.
| | 05:27 | I've only defined the color one time, and then
just by using some formulas, and some functions,
| | 05:32 | I've been able to get a variety of visual
effects, simply by defining one color, and using
| | 05:37 | the power of the LESS.
| | 05:37 |
| | Collapse this transcript |
| Importing external files| 00:00 | Just like in regular CSS, LESS allows you
to import files into other LESS style sheets,
| | 00:05 | and this really helps organizationally when,
for example, you're trying to factor out variables
| | 00:10 | from different LESS style sheets that may
make use of them, or if you've got functions
| | 00:15 | that are used in more than one place, or
mixins that are used across you're your Web site.
| | 00:19 | You can just define them in one file, and then
import them in two files where they're used.
| | 00:24 | And that's what we are going to
look at in this particular movie.
| | 00:27 | Here I have my snippets scrolled down to the
Importing Files section, and I've got my Sample Document,
| | 00:32 | which you are no doubt familiar with by now.
| | 00:35 | I'm going to go over and open
up my import_styles.less file.
| | 00:40 | This is a style sheet that
makes use of certain variables.
| | 00:44 | You can see I've got my color, my font size,
border; in fact, you probably recognize it
| | 00:49 | as part of the example we looked at
earlier when we were using variables.
| | 00:54 | This is the part where the variables are used, so
let's take a look at where the variables are defined.
| | 00:58 | I've created a style sheet called import_me,
and that's this guy right here: import_me.less.
| | 01:05 | So what I've done is taken all the variable
definitions, and placed them into an external
| | 01:10 | file that could be included as needed.
| | 01:13 | All we need to do now is, inside this style
sheet, import the variable definitions that
| | 01:18 | are contained in this style sheet,
| | 01:20 | and the way we do that is by
using the import statement.
| | 01:22 | So I'm going to go back over to my snippets,
I'm just going to copy these two lines, copy,
| | 01:27 | and we'll come over here, and
we'll paste, and we'll save.
| | 01:33 | Now I've imported the variable definitions
in this style sheet into this one, and I've
| | 01:39 | saved it, so if I open up the generated CSS,
and format it, you can see that all of the
| | 01:47 | variable definitions have been replaced in
all of the style sheets that are using them.
| | 01:51 | Let me undo that, and then close it, and let's go
back to our Sample Document, and we'll reference
| | 01:58 | the import_styles.css.
| | 02:02 | We'll save, and let's bring this up in the
browser, and you can see, just as expected, we
| | 02:08 | have the same result that we saw earlier
in the course in our variables example.
| | 02:13 | So the variables were imported into the style
sheet, and their values were calculated, and placed
| | 02:17 | at the right points in the style rules.
| | 02:20 | By separating out your commonly used
variables, and mixins, and so on into importable style
| | 02:26 | sheets, you can further compartmentalize and
organize your LESS styles to make them easy
| | 02:30 | to use, and easy to maintain.
| | 02:31 |
| | Collapse this transcript |
|
|
4. Introduction to SassThe Sasscommand-line basics| 00:00 | Alright, we've reached the point in the
course now where we're going to talk about Sass,
| | 00:03 | and Sass, just like LESS,
is a CSS preprocessor.
| | 00:07 | It takes code that is written in a certain
syntax -- in this case, Sass syntax -- and converts
| | 00:13 | it into official CSS before
you upload it to your Web site.
| | 00:17 | You can find more information about Sass by going
to the sass-lang.com Web site, which you can see here.
| | 00:24 | Sass actually comes in two different flavors.
There is the newer version, which as of Sass 3,
| | 00:29 | is known as SCSS.
| | 00:32 | And SCSS is a superset of CSS 3's official
syntax, which basically means that if you
| | 00:39 | write a style sheet using CSS 3,
it is valid as SCSS as well.
| | 00:45 | Now, there's an older syntax that came along with the
first version of Sass, and it's the indented syntax.
| | 00:52 | If you've used languages like PML, or Python before,
then you probably will be familiar with the format.
| | 00:58 | It's no longer the primary format, and the files
are ended with .sass suffixes, or file extensions.
| | 01:07 | In this particular course, because SCSS is
now the primary way of writing Sass, that's
| | 01:12 | what I'm going to be using.
| | 01:13 | If you want to learn more about the older
format -- the .sass format -- you can look on the
| | 01:18 | Web site, and check out their documentation.
| | 01:20 | Alright, before we get started actually
using Sass, we need to learn how to use it from
| | 01:25 | the command line, because unlike LESS, it
does not have a nice graphical UI, or maybe there
| | 01:31 | is, but I haven't found it yet.
| | 01:33 | But in any case, using it from the
command line is how most developers use it.
| | 01:37 | So to do that, we're going to start up our
command line, and exercise some of Sass's commands.
| | 01:43 | Okay, so let's go over to the command line.
| | 01:46 | So here I am in my command line terminal, and
depending on where you put the Exercise Files,
| | 01:51 | this is going to be different for you,
| | 01:54 | but just follow along with me,
and you should be just fine.
| | 01:57 | So first we need to make sure that Sass
is installed correctly, and is running.
| | 02:02 | So to do that -- and if you recall earlier, we
installed Ruby, and then we used the RubyGem
| | 02:07 | installer to go and get Sass,
so everything should be set up.
| | 02:10 | I'm going to type sass -?
| | 02:14 | And you can see that because Sass is installed,
it comes back with the Help content for using Sass,
| | 02:21 | and it gives a description of what Sass is,
and then there's a whole bunch of options
| | 02:25 | here for using Sass.
| | 02:27 | Now, because this is an introductory course,
we're not going to go through all of these;
| | 02:30 | we're just going to go
through the most important ones.
| | 02:33 | So let's scroll down to
the insertion point here.
| | 02:36 | The first thing that we're going to look at is,
well, you've seen it already; it's how to get help.
| | 02:40 | But essentially what we're going to be using
the command line for is converting SCSS code
| | 02:45 | into CSS code, and there's two ways to do that.
| | 02:48 | There's the update command, which you can
see right here, and there's also the watch
| | 02:53 | Command, which you see
above that, which is right here.
| | 02:58 | The update command takes an
SCSS file, and converts it into CSS.
| | 03:05 | So let's go into the directory where we
have our examples, and if you open the Exercise
| | 03:09 | Files folder, you'll see that here in Chapter 4, we
have a whole bunch of SCSS code, so I'll just
| | 03:16 | try it on one of those.
| | 03:17 | So here in the command line, I'm going to type
cd Desktop, and I am going to go into Exercise
| | 03:26 | Files, and Chapter 4, and I'll just do a dir to make
sure I'm in the right place, and it looks like I am.
| | 03:33 | Okay, so let's try converting
one of these SCSS files into CSS.
| | 03:38 | So I'll type sass --update, and I'll type var_
styles.scss. You can see that Sass came back with a
| | 03:50 | result; it says overwrite var_styles.css.
| | 03:53 | So that means that everything compiled okay,
there were no syntax errors, and the SCSS code
| | 03:58 | was converted into CSS with no problems.
| | 04:01 | Now, you can pass an
additional parameter to that command.
| | 04:04 | I can say sass --update var_styles.scss,
I can give it a colon, and I can give it the
| | 04:14 | name of the file that I
want the output file to be.
| | 04:17 | It doesn't have to be the same name with .css
on the end. So I can say, for example, mysheet.css.
| | 04:26 | And you can see, in this case, rather than
just assuming that I wanted the same file
| | 04:29 | name, but with .css on the end,
it made an entirely new sheet.
| | 04:34 | You can also do entire directories.
| | 04:36 | So let's go back up our directory here.
| | 04:37 | I'm going to say sass --update Ch4, and the
output directory I want to also be in Ch4.
| | 04:47 | And you can see, in this case, it converted all
of the files in the directory from SCSS into CSS.
| | 04:53 | Now, this is really great,
| | 04:55 | however, it gets really tedious to have to
type the update command over and over again,
| | 04:59 | which is why Sass provides a watch facility.
| | 05:03 | So once again,
let's go type sass --watch:Ch5.
| | 05:07 | Now watch what happens when I hit Return.
| | 05:11 | Now you see that not only did the conversion
take place, so all of the SCSS code has been
| | 05:17 | transformed into CSS, but there is this additional
message right here; it says Sass is watching for changes.
| | 05:23 | Press Ctrl-C to stop.
| | 05:25 | So just like the LESS compiler in the previous
part of the course, now Sass is watching that folder.
| | 05:30 | So in my editor, I can go about, and happily
edit my SCSS files, knowing that as I save,
| | 05:36 | and make changes, the Sass compiler is
watching, and will automatically do the conversion for
| | 05:40 | me, without me having to
intervene, and do it manually.
| | 05:43 | Okay, so now that we've covered the basics for
using the Sass command line, let's dive in,
| | 05:48 | and start writing some Sass code.
| | 05:49 |
| | Collapse this transcript |
| Using variables| 00:00 | Okay, let's begin our investigation of Sass
by taking a look at how Sass uses variables,
| | 00:05 | and if you've already watched the first part
of the course, where we covered LESS variables,
| | 00:09 | this is probably going to look pretty familiar
to you, because the syntax is almost the same.
| | 00:13 | Sass variables are declared using a dollar
sign character, and are defined like CSS values,
| | 00:18 | and they could be one of six different types.
| | 00:21 | There are numbers, so I can declare a
variable that, say, contains a pixel value, or perhaps
| | 00:26 | an em value, or a unit, like inches.
| | 00:29 | There are strings, so I can make a
variable that contains some string content.
| | 00:34 | There are color variables, so I can define
a variable that contains a hex value for
| | 00:38 | a color, or even a named color.
| | 00:40 | There are booleans, so I can declare a variable,
and give it a value of either true or false
| | 00:46 | as a boolean value.
| | 00:48 | There are null variables, so I'll just
assign a value of null to a variable.
| | 00:52 | And there are list variables.
| | 00:53 | Now, a list variable contains
more than one value.
| | 00:56 | So, for example, I can define a variable
called my list, and give it a series of pixel values,
| | 01:02 | or perhaps other values that are used in
CSS properties that take multiple values; for
| | 01:07 | example, a border setting.
| | 01:09 | Okay, let's jump over to the code,
and actually see this in action.
| | 01:13 | Okay, so here in my code editor, I've scrolled
down to the Sass section, and this is the part
| | 01:20 | on Variables, and this is my Sample Document.
| | 01:22 | This is where we will be
testing all of our stuff out.
| | 01:25 | And I'm going to open up the var_styles.scss,
and this is where we'll do our exercise.
| | 01:32 | So over in the snippets, I'm going to copy
a couple of things, just to get us started.
| | 01:36 | I'll copy these first two right here, and paste
those guys in, and let's copy something that uses them.
| | 01:43 | So we'll copy, and we'll paste.
| | 01:46 | Okay. So I have declared two
variables; $myColor1, $myColor2;
| | 01:50 | one is a named color navy, the other one is
the hex value, which is also navy blue, and
| | 01:56 | then I have declared two style rules for the
h1 and h2 tags that use the value of $myColor1.
| | 02:03 | So if I save this, now what I need to do is get the
Sass compiler to compile all the SCSS code into CSS.
| | 02:11 | So let's jump over to our
command line interpreter.
| | 02:14 | Okay, so here I am in my command prompt, and
based upon wherever you put the exercise files,
| | 02:20 | this path may look different for you.
| | 02:22 | I've put the exercise files on my Desktop,
so the path here is to the Desktop folder,
| | 02:27 | which contains the Exercise Files.
| | 02:29 | So just get yourself to the point in the directory
structure where you put your Exercise Files.
| | 02:34 | And I'm going to type sass --watch, and the
examples we're working with are in Chapter
| | 02:41 | 4, so that's the input directory.
| | 02:43 | And we want the output
to also go into Chapter 4.
| | 02:46 | Now, if we had our folder structure set up
differently, where the CSS code was contained
| | 02:51 | in a separate directory, we could put that
here, but for the sake of these exercises,
| | 02:55 | I'm just putting the Sass code
and the CSS in the same place.
| | 02:58 | Okay, so I'm going to go ahead and hit return,
and you can see that Sass is now watching
| | 03:02 | for changes, and it's already compiled all
the existing Sass code in there into my CSS.
| | 03:08 | So let's go back to the code editor.
| | 03:10 | Alright, so back here in the editor,
you can see I've got my CSS files.
| | 03:14 | Let's switch over to the SampleDoc, and
put in var_styles.css, that's it right there,
| | 03:22 | and we'll save, and we'll
bring it up in the browser,
| | 03:26 | and you can see that the effect is what we
expected. The h1 and h2 here are colored navy.
| | 03:33 | All right, let's go back and
use a few more variable features.
| | 03:38 | Okay, so here in the style sheet, we'll copy
some more snippets over. Let's just go
| | 03:43 | ahead and copy these guys,
and paste them in.
| | 03:48 | Alright. And copy some
things that use them; alright.
| | 03:56 | Let's take a look at what I've got here.
| | 03:57 | So now I've got a string variable, I've
got a font size variable, and I've got two
| | 04:01 | list variables; one for a border, and one for
some padding. And then I've declared two new rules.
| | 04:08 | This rule here is assigned to the paragraph
who has the ID of mypara, and this is the
| | 04:13 | same thing; paragraph with the ID of para,
but I'm using the pseudo selector after to
| | 04:19 | insert some content.
| | 04:21 | So I'm using the font size variable, the border,
and padding variable, and the string content
| | 04:27 | should be appended after the
content that's already in the paragraph.
| | 04:31 | So we'll save once again, and we'll go back over
the document, and we'll bring this up in the browser.
| | 04:38 | And you can see, sure enough, I've got some
padding, there is the appended content; the
| | 04:44 | h1 and h2 tags are both navy colored.
| | 04:47 | So just like LESS, Sass gives you the ability
to declare and use variables in your style sheets,
| | 04:53 | which makes reusing common values
over and over again much easier.
| | 04:56 |
| | Collapse this transcript |
| Defining nested rules| 00:00 | Sass also lets you define nested styles,
| | 00:03 | and again, if you saw this earlier in the
section on LESS, this will look familiar to you.
| | 00:08 | So you've probably seen CSS code
that looks like this before, right?
| | 00:11 | You have a class that defines some styles, and
then you have the same class, but it uses some
| | 00:16 | child selectors to define some more
styles, and so on, and so forth, right?
| | 00:20 | Here I have a base class named content, and
then various child selectors terminating in
| | 00:25 | an anchor tag that has a hover pseudo
class style assigned to it as well.
| | 00:30 | Now, as CSS code gets more and more complex,
this kind of CSS structure can get more and
| | 00:36 | more unruly to read.
| | 00:38 | Sass allows you to define styles in a nested
format, which more closely mirrors the DOM
| | 00:44 | structure of the
document that you're styling.
| | 00:46 | So, for example, I could rewrite the same
CSS that you see here in a different format
| | 00:51 | using nested styles.
| | 00:54 | So, for example, I could define the outer content
class like this, and then just put the contents
| | 00:59 | that are specific to the paragraph
child inside the content class, like this.
| | 01:03 | I could also define the
class for the anchor tag here.
| | 01:07 | Now, remember that the anchor tag had a
hover effect applied to it, so to define a nested
| | 01:12 | style that refers to the parent, in this case,
we need to have the :hover attach to the anchor;
| | 01:17 | we use the ampersand character.
| | 01:19 | So in this case, the &:hover will say, hey,
put this pseudo class on the parent of the
| | 01:27 | rule that's currently being defined. So,
in this case, the ampersand refers to this
| | 01:31 | A tag right here.
| | 01:32 | Okay, so let's go to the code
editor, and see this working.
| | 01:36 | Alright, so here I'm in the code editor, and I've
scrolled down to my Nested Styles ExampleSnippets.
| | 01:41 | I've got my SampleDoc right here,
and let's open up nested_styles.scss.
| | 01:46 | Okay, let's copy and paste.
| | 01:50 | So I'll put these guys in
first, the body tag; alright.
| | 01:55 | And so we'll just paste that,
and we'll save.
| | 01:57 | And remember, the Sass compiler is in the
background, silently watching all these things
| | 02:02 | that I'm doing, so it's updated the CSS code.
| | 02:05 | What we're going to do now is open up the
nested_styles.css, and you can see that it's
| | 02:11 | compiled the CSS code into what you'd expect.
| | 02:14 | We have the body definition, with some body
specific properties, and then the paragraphs
| | 02:19 | inside the body, except for this one
paragraph that has the mypara ID.
| | 02:24 | So let's close this.
| | 02:25 | Let's go back to the SampleDoc, put in nested_
styless.css, and fire this up in the browser.
| | 02:33 | And you can see, it worked
pretty much exactly as intended.
| | 02:36 | The body has this sans serif font.
| | 02:39 | Here we've got some Courier
New, and this is Times right here.
| | 02:43 | All right, let's go back to the code.
| | 02:45 | All right, back in the code, let's copy
another snippet, and that's this guy here.
| | 02:50 | So we'll select these lines, and
copy, and paste them in; all right.
| | 02:56 | So, in this case, I'm declaring a rule for the
item that has the mypara ID, which is, recall,
| | 03:04 | this paragraph right here.
| | 03:07 | And we're giving it a color,
and a border, and some padding,
| | 03:11 | and we're using the ampersand
character to define a pseudo class of hover.
| | 03:15 | So this will resolve down to mypara:hover.
| | 03:18 | So we'll save, and we'll open up the generated
CSS again, and you can see that that's pretty
| | 03:22 | much what happened.
| | 03:24 | Here's the pseudo class right here, and here's all
the settings that we put into that particular class.
| | 03:29 | All right, so let's save, and let's
go back to the browser, and refresh.
| | 03:33 | All right, so I refresh it, and you can see
now that the mypara element has its border,
| | 03:39 | and it's got a little hover effect on it.
| | 03:41 | And just to show that it works, let's
bring the same document up in Chrome.
| | 03:46 | Okay; see the same effect.
| | 03:50 | And let's bring the same document
up in IE; same effect. Alright.
| | 03:57 | So using nested styles, you can succinctly
write your Sass code, so that when it's compiled,
| | 04:02 | it will more closely match the DOM
structure of your document, and make your CSS code a
| | 04:06 | lot easier to read.
| | 04:07 |
| | Collapse this transcript |
| Working with mixins| 00:00 | Similarly to LESS, Sass
defines the concept of mixins.
| | 00:05 | Mixins let you define common properties once,
and then reuse them over and over again throughout
| | 00:09 | your style sheet files.
| | 00:10 | Mixins are defined by using the @mixin directive,
and this is different from LESS. Where LESS
| | 00:16 | let's you just use a class name to define a
mixin, Sass actually requires that you use
| | 00:20 | the mixin directive.
| | 00:22 | So you write @mixin, then you give it the name
of the mixin, and then you define the properties
| | 00:27 | inside the mixin class.
| | 00:29 | When you want to go use the mixin,
you need to use the @include directive.
| | 00:32 | So, in this case, I have a style rule,
which is including the myMixin directive.
| | 00:38 | So this is slightly different than the way
LESS does it, but the effect is the same.
| | 00:42 | So let's jump over the code and see.
| | 00:44 | Okay, so here in the snippets, I've scrolled
down to the Sass Mixins example, and I've got
| | 00:49 | my SampleDoc, and I'm going
to open up mixin_styles.scss,
| | 00:54 | and let's go ahead and copy some stuff.
| | 00:58 | So I'll copy the common traits
into the style sheet over here.
| | 01:03 | So you can see what I'm doing is I'm using
the @mixin directive to define a common traits
| | 01:08 | mixin, which has some CSS properties in it that
I'm going to use a couple of different places.
| | 01:14 | And then here in the snippets, I'll copy the
header and the footer definitions, and paste those in.
| | 01:20 | So here I've got a header style rule, with
a color definition, and then I'm using the
| | 01:24 | @include directive, which includes the common
traits mixin class, which I've defined up here,
| | 01:30 | and same thing for the footer.
| | 01:31 | Just a different color, and then
including the stuff that's common.
| | 01:35 | So let me save, and we'll go over to the
SampleDoc, and we'll put in the mixin_styles.css.
| | 01:45 | And actually, before we fire it up, let's
take a look at the generated CSS code. So you can
| | 01:50 | see here, the generated CSS; the colors are
different, but the included properties are
| | 01:56 | the same, because I'm just reusing them.
| | 01:58 | So let me close that, and let's
bring this file up in the browser.
| | 02:03 | So here we are in IE, and I've got different
colors for the header, and the footer, so this
| | 02:09 | is one color blue,
this is a lighter color blue,
| | 02:12 | but you can see that the border around each
one is the same. It's a green border of 1
| | 02:16 | pixel with some border radius applied.
| | 02:19 | Okay, and let's close this. Let's bring
it up in Chrome, and see the same result.
| | 02:26 | And let's bring it up in Firefox,
just for good measure. There you go.
| | 02:30 | So by defining mixin classes, you can define
sets of traits that you want to reuse throughout
| | 02:34 | your styles in one place, and then
just include them when you need them.
| | 02:37 |
| | Collapse this transcript |
| Using operators| 00:00 | One of the things missing from standard CSS
is the ability to use mathematical operations
| | 00:05 | and other logic control
inside your style sheets,
| | 00:09 | but Sass fixes this problem by letting you use
math and other kinds of operations inside your styles.
| | 00:14 | So let's take a look at how this works.
| | 00:16 | You can see here in the code I've scrolled
down to the Chapter 4 section on Operations,
| | 00:20 | and I'm going ahead and open
up my ops_styles.scss file here.
| | 00:27 | And let's go ahead
and copy the example over.
| | 00:30 | So I'll copy this lines
right here, and paste; alright.
| | 00:34 | So let's take a look at what's going on.
| | 00:36 | I have a couple of variables.
| | 00:37 | I've got myColor, which is red, and I have
a basepadding, and a basethickness variable,
| | 00:43 | each of which are set to, let's see, we've
got 10 pixels, and 4 pixels, respectively.
| | 00:47 | And then I have a rule defined, which is going
to affect the paragraph with the mypara ID on it.
| | 00:54 | And I'm just starting off using the
variables in a pretty straightforward way.
| | 00:58 | So far, nothing here is really different
than the variable section that we saw earlier.
| | 01:03 | But Sass understands math,
| | 01:05 | so, for example, if I wanted to, say, do an
operation on the base padding I could do,
| | 01:11 | let's see, I could say
basepadding, and I could say basepadding+20.
| | 01:16 | Now, Sass is smart enough to realize that
the base padding is 10 pixels, and I declared
| | 01:24 | the unit of pixels here,
| | 01:26 | so when it sees the +20, it's going to
know that what I really mean is plus 20 pixels.
| | 01:32 | So I'm going to save this,
| | 01:35 | and let's bring up the generated
CSS, so you can see what happened.
| | 01:38 | So you can see here in the generated CSS
we have padding. Here's the base padding here,
| | 01:44 | but now the left-hand side padding
is 30 pixels, because 10 plus 20 is 30.
| | 01:49 | So let's close this.
Let's go back to the styles.
| | 01:51 | If I change this to, say, I don't know, 10
ems, and save, you'll notice that Sass was smart
| | 01:58 | enough to keep the units in sync.
| | 02:01 | I switched the variable to ems, and
now the result here is ems as well.
| | 02:05 | So let's go back to pixels, and let's go to
our document, and put in ops_styles.css, and
| | 02:13 | let's bring this up in the browser.
| | 02:16 | So you can see that we have a red border,
and we have some padding here on the left-hand
| | 02:22 | side, along with the base padding, and the
thickness is 4 pixels, just as we would expect.
| | 02:28 | So let's go back to the code.
| | 02:30 | Okay, so back here in the
code, let's do some more math.
| | 02:35 | This time let's do some
math on the base thickness.
| | 02:38 | I can do things like use
parenthesis to group operators together.
| | 02:41 | So, for example, I can say border is basethickness,
let's see, plus -- let's choose a nice round
| | 02:49 | number -- 10, and then I could say divide by 2.
| | 02:52 | So, let's see; we've got 4 plus 10,
that's 14, divided by 2 is 7.
| | 02:57 | So the thickness of the border should
increase now from 4 pixels to 7.
| | 03:02 | So let's save this, and
let's go back to the document.
| | 03:05 | All right, back here in the document, let's
bringit up in the browser, and you can see now
| | 03:09 | that the border is substantially
thicker; it's almost twice as thick now.
| | 03:13 | Alright, let's go back to the code.
| | 03:15 | So back here in the code,
let's do one more thing.
| | 03:18 | We can actually do color math.
| | 03:19 | So, in this case, I've got a color that's
red, but I can add another color to it.
| | 03:24 | So, for example, if I add blue, again, Sass is
smart enough to realize I'm adding two colors together.
| | 03:31 | So you got red plus blue; that ends up being
purple, or I guess in CSS base, it ends up being magenta.
| | 03:38 | So I'm going to save this,
| | 03:39 | and let's open up the generated CSS, and you can
see, sure enough, the resulting color is now magenta.
| | 03:46 | So let's close this, and
let's go back to the document.
| | 03:49 | Alright, so let's refresh this, and you
can see that the text has now gone from being
| | 03:54 | red to being magenta. Pretty cool.
| | 03:57 | Alright; one last thing to show.
| | 04:00 | This is an area where Sass is a
bit of an improvement over LESS.
| | 04:03 | Sass provides this really cool conditional
operator that you can use called the if function.
| | 04:08 | So let's go back to the snippets, and let's
copy these two lines right here, and let's replace
| | 04:14 | the color definition with
this line, or these two lines.
| | 04:20 | And let's get rid of the math
to make this easy.
| | 04:24 | So what I'm doing here is I've got a variable
named gender, and I'm giving it the value of boy.
| | 04:31 | And then I've got my color variable, and I'm
assigning it the outcome of this conditional logic.
| | 04:37 | So I have this if operator, and inside the if
statement, I have the condition I want to test for.
| | 04:43 | So if gender is equal to boy, then
select this color, which is blue,
| | 04:49 | and if it's not, then
select this color, which is red.
| | 04:51 | So I'm going to save, and
let's bring up the generated CSS.
| | 04:56 | So you can see it's selected blue, because
the gender is currently boy. Alright.
| | 05:00 | Let's go back and change
this to girl. All right.
| | 05:03 | So now, instead of selecting blue, it
should be selecting red. So let's see;
| | 05:08 | yep, sure enough,
it's selecting red instead.
| | 05:10 | So that's pretty cool.
| | 05:12 | So let's just see this in the
browser. Let's go back to boy, alright,
| | 05:16 | and we'll go refresh the document.
| | 05:19 | So now when I refresh, you can see that the contents
turned into blue. Alright; back here on the code,
| | 05:27 | let's change this to girl,
and let's go refresh it.
| | 05:29 | Alright, so I'm going to
refresh it now, and it changes to red.
| | 05:34 | So, pretty cool set of examples showing
how you can use operators in your CSS code to
| | 05:39 | make decisions about what values to
select for your style rules on the fly.
| | 05:43 |
| | Collapse this transcript |
|
|
5. Advanced SassDefining mixins with arguments| 00:00 | Now that we've seen some of the basic features
of Sass, let's move on to some more of the
| | 00:04 | advanced features, and we'll start
by looking at mixins with arguments.
| | 00:09 | And you can see here in the Snippets file,
I've scrolled down to the Advanced Sass section,
| | 00:14 | and this is Mixins with Arguments.
| | 00:17 | I've got my SampleDoc open right here, and
let's go ahead and open up the mixargs_styles
| | 00:24 | document, where we will build our example.
| | 00:28 | Let's begin by copying over one of the snippets, and
it's this first one right here, then we'll paste it in.
| | 00:35 | So, here I have a mixin directive, and I'm
creating a mixin called customBorder, and this mixin
| | 00:43 | takes three arguments.
| | 00:44 | So I've got width, color, and style.
| | 00:48 | And then inside the mixin, I've got a border
definition with a nested syntax, so this will
| | 00:54 | become border width,
border color, and border style.
| | 00:58 | So I am going to save that, and let's go
copy the code that uses it, and we'll paste.
| | 01:07 | This is like using any other mixin, except
that in this case, I get to pass parameters
| | 01:11 | to the mixin, which helps
customize the way the mixin behaves.
| | 01:15 | So, in this case, I've got my definition, and
down here, I have my include customBorder,
| | 01:20 | but here I'm passing in
the values that I want the mixin to use,
| | 01:23 | and this is really useful, because in this
case, it allows me to customize the mixin with
| | 01:28 | values that may change based
upon where I'm using the mixin.
| | 01:33 | So rather than defining a mixin with fixed
properties and values, I'm able to customize it further.
| | 01:39 | I'm going to go ahead and
run this; go ahead and save it.
| | 01:42 | And remember, we have to go to our command
line interface, and tell Sass to start watching
| | 01:47 | this folder to compile the CSS.
| | 01:50 | So we'll do that right now.
| | 01:52 | Here we are in the command prompt.
| | 01:53 | I'm going to type sass --watch, and just
like before, we're going to say the source is in
| | 02:02 | Chapter 5, and we want the
destination to be Chapter 5 as well.
| | 02:06 | The path to the Exercise Files
folder might be different for you.
| | 02:09 | Just get to wherever the root level of your
Exercise Files folder is, and type this statement.
| | 02:14 | You'll see that Sass is now watching for
changes, and it's already converted the SCSS files
| | 02:20 | in the directory into CSS.
| | 02:22 | So let's go back to the code now.
| | 02:25 | We have our Sass code here.
| | 02:27 | Let's take a look at the generated code.
| | 02:29 | And you can see that inside the mixin, it
got replaced with border-width, border-color,
| | 02:34 | and border-style. Close that.
| | 02:39 | Go to the document, and include that style sheet,
and we'll save, and let's bring it up in the browser.
| | 02:47 | And you can see here that, sure enough,
the paragraph that we are applying the
| | 02:51 | style to has a dotted blue
border that's about 3 pixels wide.
| | 02:56 | Let's take and look at another
advanced feature of Sass mixins.
| | 02:59 | We'll go back to the code.
| | 03:02 | Let's copy the other snippet in,
and we'll paste that over here.
| | 03:08 | This creates a mixin called customBorder2.
| | 03:11 | The difference between customBorder and
customBorder2 is that in customBorder2, I'm declaring the
| | 03:17 | parameters to the mixin, but
I'm supplying default values.
| | 03:22 | So if I include this mixin without giving
any parameters, it will use the default values
| | 03:27 | that are declared here in the parameter list.
| | 03:31 | So, for example, if I don't tell it what width
to use, it'll be 1 pixel; if I don't give it
| | 03:35 | a color, it'll be black; and if I
don't give it a style, it'll be solid.
| | 03:39 | Let's go ahead down here,
and change this to use it.
| | 03:42 | So we'll say customBorder2, and
let's just get rid of that; here we go.
| | 03:48 | So now we're calling customBorder2 without
giving it any parameters, and let's make sure
| | 03:52 | that compiled correctly.
| | 03:54 | Looks like it did; looks like a change was
detected to the mixargs_styles.sass code.
| | 03:59 | So let's go back to the code now,
and let's look at the generated CSS.
| | 04:04 | And we can see that in the generated CSS that,
because we didn't supply any parameters, the
| | 04:09 | default values were used.
| | 04:11 | So let's close this, and let's
bring this up in the browser.
| | 04:16 | And you can see that the
default values were applied.
| | 04:19 | Let's go back to the code, and this time let's
give it some values. 3 pixels, blue, and dashed.
| | 04:31 | There we go.
| | 04:32 | We'll save.
| | 04:34 | The generated code now is using the parameters
we gave, and we'll go back to the document.
| | 04:40 | Let's run it, and sure enough, we
have a 3 pixel, blue, dashed line.
| | 04:47 | Using Sass, you can define mixins that take arguments,
which allow you to customize the way mixins work,
| | 04:53 | and this is really cool, because instead of
having to define mixins that have fixed properties,
| | 04:57 | you can define mixins whose properties are
set, but whose values can change over time,
| | 05:02 | or depending on where you're
using them in your project.
| | 05:05 |
| | Collapse this transcript |
| Working with functions| 00:00 | Sass provides a whole host of functions for
working with all kinds of CSS data types, such
| | 00:05 | as colors, and math, and strings, and so on.
| | 00:08 | There are far too many functions to go into
here, but let me give you a sample of some
| | 00:12 | of the color functions that are available.
| | 00:14 | You can use functions such as lighten,
and darken, and fading in and out. You can
| | 00:18 | mix colors together.
| | 00:19 | You can extract information about colors, such as
getting their hue, their saturation, and so on.
| | 00:24 | You can use functions like
grayscale to convert colors to grayscale.
| | 00:28 | You can get the complement of a color.
| | 00:29 | You can take a color and invert it, and so on.
| | 00:32 | There's also a bunch of functions for math.
| | 00:34 | For example, you can round numbers.
| | 00:36 | You can convert numbers to percentages.
| | 00:37 | You can find out the min or max
number in a sequence of numbers, and so on.
| | 00:43 | We have too many functions to go into in-depth,
| | 00:45 | so what I'm going to do is just jump over
the code, and show you some functions in action,
| | 00:51 | and hopefully that will give you an idea of
some of the things you can accomplish in Sass,
| | 00:54 | just by using the built-in functions.
| | 00:58 | So here in the code, I've scrolled down to
Chapter 5, and this is the Functions section,
| | 01:03 | and I've got my SampleDoc right here, and
I'm going to open up the funcs_styles file,
| | 01:11 | and this is where we're going
to do all of our sample work.
| | 01:15 | Remember that the Sass library is watching
my Chapter 5 folder in the background, so
| | 01:21 | every edit that I make to this file is
going to be automatically compiled into CSS.
| | 01:26 | So I'm going to start off by
copying parts of this snippet over.
| | 01:30 | So we'll copy this mixin class
right here, and then I'll scroll down,
| | 01:36 | and I'll take this one next,
and paste it in.
| | 01:39 | A couple of simple straightforward things
her; I've defined a mixin, which we covered
| | 01:43 | earlier, and all this does is set the border
radius of an element, and that's just to make
| | 01:48 | things easier to see.
| | 01:50 | The real work is done down here in mypara.
| | 01:53 | In this style rule that I've got for the item
whose ID is mypara, and remember, in my document,
| | 01:59 | that's this paragraph right here.
| | 02:02 | What we're going to do is include the
border-radius, and then calculate the border color
| | 02:07 | based upon the hue of an existing color,
and then create a new HSL color base on that.
| | 02:13 | So let's go back to the snippets, and copy the line
for the color definition, and we'll paste that there.
| | 02:21 | So we're starting off
with a color of navy blue.
| | 02:25 | What we should see when we run this document
in the browser is the border color should
| | 02:30 | be based upon the navy blue
color that we're passing here.
| | 02:33 | We're going to extract the hue using the hue
function, and then create a whole new HSL based
| | 02:39 | color using the hue foundation, and then
some other percentages that I've just chosen.
| | 02:45 | So let's save, let's go to the
SampleDoc, and let's set our CSS.
| | 02:50 | And before I run this, let's just take a
look at the CSS code that's been generated.
| | 02:55 | And you can see that the color that's
been generated is this color right here.
| | 02:59 | It took the navy blue color,
and made this one.
| | 03:02 | Let's go back to the document, and
put in our funcs_styles.css reference.
| | 03:08 | Save, and bring this up in the browser.
| | 03:12 | And you can see that the color of the border
around this paragraph is a lighter style of
| | 03:17 | blue than the navy color that we gave it.
| | 03:20 | So we extracted the hue from the navy
color, and made a new color based on it.
| | 03:24 | So far, so good. Let's go back to
the code; back to the snippets.
| | 03:29 | Let's copy over some of these
other definitions.
| | 03:31 | Copy, and we shall paste them in
over here right above this rule.
| | 03:37 | A couple of things going on.
| | 03:39 | So, I've copied in some style rules for these
header tags; h1 through h4, and that's going to
| | 03:45 | correspond to these guys
over here; h1 through h4.
| | 03:49 | And a few things I'm doing.
| | 03:50 | First, for the h1, I'm setting the color to
whatever the value of the color variable is.
| | 03:55 | So let's go back to funcs_styles file.
| | 04:00 | Here's the color; it's navy.
| | 04:01 | So the H1 is going to be navy.
| | 04:03 | And then I'm sending the background
color to invert of whatever navy is.
| | 04:08 | Sass will calculate what the inverted color
of navy blue is -- it's probably some sort of
| | 04:12 | yellowish -- and then
convert that to a grayscale.
| | 04:16 | So this should set the background color of
the h1 to some grayish color, upon which the
| | 04:21 | navy will appear; the navy colored text.
| | 04:24 | And then from h2 through h4, we're just going
to progressively lighten the navy blue color.
| | 04:28 | So for h2, we're going to lighten it up by
about 20%; for h3, we're going to lighten it
| | 04:33 | up by about 30%, and so on, down to h4,
which gets the lightest color at 40%.
| | 04:39 | Save this, and let's go over to our generated
CSS, so we can see what's going on over here.
| | 04:46 | So you can see that for h1, sure
enough, there's the navy color.
| | 04:48 | We got the background color of whatever
grayscale that is, and we have our h2 through
| | 04:55 | h4, which get progressively lighter, and
then we have the mypara rule from earlier.
| | 05:01 | So let's close this, and let's
go view this in the browser.
| | 05:07 | So you can see that here, the h1, we've got navy
colored text on top of this grayish background,
| | 05:14 | and we have these headings, which are getting
progressively lighter, and we have our paragraph,
| | 05:19 | which is surrounded by the new
color we created with the hsl function.
| | 05:24 | Let's just try changing, on the fly, the base
color, so you can see what happens when you do that.
| | 05:28 | So I'll close this, and go back to the code.
| | 05:31 | Let's use a different color; let's use olive.
| | 05:36 | So just by changing this one value, let's see
what happens when we run the document again.
| | 05:41 | We see a completely differently effect.
| | 05:43 | So now I have the olive text on a slightly
darker gray background, with progressively
| | 05:48 | lighter headings, and the
paragraph border has been changed as well.
| | 05:52 | So this gives you an idea of the kind of
creativity that you can achieve using functions in Sass.
| | 05:58 | It gives you the ability to do calculations
in CSS code, which is something that CSS can't
| | 06:03 | do natively, but it really opens up a
whole bunch of creative possibilities.
| | 06:06 |
| | Collapse this transcript |
| Using output-style formatting| 00:00 | One of the nicer features of Sass over LESS
is that Sass gives you some nice control over
| | 00:05 | the formatting options of how CSS code is
generated when the Sass code is compiled into CSS.
| | 00:13 | There's a couple of different options you can
use, and it's specified using the dash dash style
| | 00:17 | option at the command line.
| | 00:19 | There's the nested format, which is the
default format that Sass uses if you don't give it
| | 00:25 | one, and this displays your CSS code indented in
a certain way, with classes underneath each other.
| | 00:33 | The expanded format is the most
human-friendly, readable format.
| | 00:37 | This is where braces are on separate lines,
each property is on a separate line, and so on.
| | 00:43 | There's the compact format, in which case the
CSS output is condensed, but it's still readable.
| | 00:49 | And then finally, there's the compressed
option, which is the minimized output, and this is
| | 00:54 | probably what you want to use
in your production environment.
| | 00:58 | Let's take a look at how Sass converts code in
real time. We'll jump over to the code to see this.
| | 01:04 | So here I'm in my code, and I've scrolled
down to my Output Formatting section, and this
| | 01:08 | is basically the same style sheet that we used in
the Nested Styles section earlier in the course.
| | 01:14 | I'm going to go ahead and open up my format_styles
.scss file, and we'll just copy and paste this in
| | 01:22 | its entirety into the file.
| | 01:26 | And I am going to put a comment
up here using double slashes.
| | 01:30 | Let's go to the command line, and convert
this into CSS code using the Sass command line.
| | 01:37 | So I am going to go to my command window.
| | 01:40 | So here on the command window, I will change into Ch5,
and I am going to say sass --update format_style.scss.
| | 01:50 | And in this case, I won't give it any
style directives; I'll just do the default.
| | 01:57 | And you can see that it says okay, overwrite
format_styles.css, so that means it was converted.
| | 02:02 | Alright, let's go take a look.
| | 02:05 | So let's open up the code.
| | 02:08 | This is the default output.
A couple of things to notice.
| | 02:11 | First, comments that are in the format of
slash, star, which are usual style CSS
| | 02:17 | comments, are preserved.
| | 02:19 | So this comment existed in both the Sass code,
and is preserved into the resulting output code.
| | 02:25 | If you have a comment that starts with two slashes,
that is not preserved; that's actually taken out.
| | 02:30 | So you'll see that this is a
comment that is not present in this file here.
| | 02:35 | So if you want to put comments in your Sass
files that are not transferred over to the
| | 02:38 | output file, you can use double slashes.
| | 02:41 | Second thing to notice is that here you
can see that the styles are all indented.
| | 02:46 | So underneath body, we have the font-family,
and then underneath that, we have body p, which
| | 02:50 | was indented here, so that's further indented, and
then this one is indented here, and so on down the line.
| | 02:59 | So this is the default output format.
| | 03:00 | It's still pretty readable, but
this is what Sass calls nested.
| | 03:03 | Alright, so let's close this.
| | 03:06 | Let's make a change to this file, and save
it, and let's go back to the command line.
| | 03:12 | This time I'm going to say update format_styles, and I
am going to say style, and I'm going to say expanded.
| | 03:21 | And you can see that it overwrote
the code, so let's go take a look.
| | 03:25 | Now, in this case, the CSS
code is much more readable.
| | 03:30 | Braces are fully expanded.
| | 03:31 | Each property has its own line.
| | 03:33 | The indentation is gone. This is probably
how you're used to writing your CSS code, and
| | 03:38 | Sass lets you set this as an
option for output formatting.
| | 03:42 | Let's make another change, and we'll save.
| | 03:46 | Let's go back to the command line.
| | 03:49 | This time let's do compact, back to the code,
and here you can see the compact version has
| | 03:58 | styles all on one line.
| | 04:01 | It's still kind of readable, and in fact,
maybe you even write your CSS code like this when
| | 04:06 | you have very simple classes, but in this
case, it's much more compact; you can see
| | 04:10 | that the multi-line comment has also been
translated into a single line, and all the styles fit
| | 04:17 | on their own lines.
| | 04:19 | Let's close this, let's make one more change,
and save, and finally, let's do compressed.
| | 04:30 | Back to the code; let's open it up.
| | 04:33 | And you can see here that the comments are
all gone. In this case, none of the comments
| | 04:37 | were preserved, and everything is on one line.
| | 04:40 | So this is the compressed version of the
CSS file, and probably what you want to use in
| | 04:46 | your production environment.
| | 04:48 | That's a summary of how you can use Sass's
output formatting to control how your CSS
| | 04:52 | is formatted when its output.
| | 04:53 |
| | Collapse this transcript |
| Importing external files| 00:00 | Just like in regular CSS, Sass provides a
way to import one style sheet into another,
| | 00:06 | and this is a great little organizational
tool, because it allows you to take commonly
| | 00:09 | defined things, like variables, and mixins, and
such and such that you want to use throughout
| | 00:14 | the rest of your site, and organize them
into individual files that can be included when
| | 00:19 | and where they are needed.
| | 00:21 | So let's take a look at how this
works. I'm going to open up two things.
| | 00:24 | First I'm going to open up import_styles.scss,
and you probably recognize this as one half
| | 00:31 | of the variables example that
we saw earlier in the course.
| | 00:35 | And I'm going to open up this other file
here called import_me, and this is the first half
| | 00:39 | of the variables example that
we saw in the previous chapter.
| | 00:44 | I've taken that example
and split it into two things.
| | 00:46 | This file here uses the variable definitions
that are defined inside of import_me.scss.
| | 00:53 | In order to use them, I have to
import this file into this file here,
| | 00:59 | and the way that we do that is by typing
@import, and I'll just write import_me.scss.
| | 01:09 | This will cause the SCSS file named import_me
to be loaded by the Sass interpreter.
| | 01:15 | It will compile into a CSS file, and then the
results will all be put together in one output file.
| | 01:21 | So let's go over to the command line,
and kick off the process to convert this.
| | 01:27 | Here we are in the command line, and I'm going
to type sass --update import_styles.scss, and
| | 01:40 | you can see it was overwritten. Let's go
back to the code, and we can take a look at the
| | 01:44 | resulting style sheets, and that's going to
be this one right here; the import_styles.css.
| | 01:50 | And you can see that this file, complete with its
slash star comments, were imported into this one.
| | 01:58 | And as I said earlier, the double slash
comments are not preserved, but star slashes are.
| | 02:04 | And here you can see that the variable definition
for navy, and the various strings, and so on
| | 02:09 | were all successfully imported
into the resulting style sheet.
| | 02:14 | So if you're used to using your style sheets in
a modular fashion, where you take your common
| | 02:18 | styles, and your other settings, and put them
into style sheets that are imported into your
| | 02:23 | various style sheets that you use in production,
you can now do the same thing using Sass,
| | 02:27 | and this makes it really easy to take commonly
used variables, and commonly used mixins, put
| | 02:32 | them in one place, and import
them when and where you need them.
| | 02:35 |
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, it looks like we've reached the end of
our introduction to the LESS and Sass tools.
| | 00:05 | Sass and LESS are an interesting new direction
for Web developers, because they introduce
| | 00:10 | the concept of working in a higher level
language than regular CSS, and just treat CSS as an
| | 00:16 | underlying layer that is part
of the overall Web run-time.
| | 00:20 | So take what you've learned here, and go try
out some new ideas on your own. Happy coding!
| | 00:26 |
| | Collapse this transcript |
|
|
