- [Chris] Hi, this is Chris Converse,
and in this episode we'll take a look at
creating our own mixin in LESS.
Mixins work a lot like functions in other languages
like JavaScript and PHP, and many others.
They allow us to define some CSS properties
and reuse and customize those properties
for any number of other CSS rules in our document.
Now if you'd like to follow along with me,
download the exercise files,
and make sure to have the compiling tool running as well.
So your LESS file will be converted into CSS.
And once you've extracted the exercise files,
you'll see a style.less file.
You'll also see a style.css file.
It's this style, that CSS file,
that the LESS file will be compiled into.
There's an index.html file.
An images folder with a banner.jpg graphic.
And in my particular case, I have a code kit file.
Code kit is the compiling software
that I'll be using to convert my LESS files into CSS.
So you will not have this file in your exercise files.
So to begin our project,
let's open index.html in a text editor.
Now inside of the HTML file, in the head area,
we have a link to the style.css file.
Again, this is the compiled file from the LESS document.
If I scroll down, inside of the body element
we have a header element and a main element.
Inside of the main element, we have an article element.
And an aside element.
Inside of the article and aside elements,
we have anchor links with a class of btn.
Now in an earlier episode,
we converted anchor links into buttons using CSS.
So we're gonna be using mixins in LESS
to share some of those properties
across the buttons inside of the article element
and the button inside of the aside element.
Now if you'd like to preview the layout
we're gonna be working with,
you can open the HTML file up in a browser.
Inside of the browser, you'll see
on the left hand side here the article element.
We have our two anchor links
that are being converted into buttons.
And over in the aside, we can see the third button
showing up over here.
So now to begin creating our mixin,
let's go back to the exercise files,
and let's open up style.less in our text editor.
So with our LESS file open,
there is one thing I wanna call your attention to
before we start creating our mixin.
And that is in an earlier episode
we created columns in a layout
using the CSS calculation feature.
However, one thing to keep in mind with a LESS file,
is that the LESS compiler will attempt to
calculate that CSS calculation.
So if I scroll down here and find the article selector,
we have a width, and the original property was
to calculate the width as being 100%,
and then subtracting 240 pixels.
So in order to keep this value without the LESS compiler
actually calculating this,
we need to add a tilde before the calculation,
and we need to have the calculation show up as a string.
So we we need to put either double quotes
or single quotes around that calculation.
Now I've already added this to the LESS file,
but I wanted to call your attention to this
in case you try to use other calculations
inside of a LESS file.
So with that taken care of,
let's scroll down to the bottom.
Let's find the selector of a.btn.
Inside of here are all of the properties
that convert those anchor links into buttons.
So I want to reuse these properties in a mixin,
and then reapply these to the links
inside of the article and the aside.
So for now, let's come in here and select
all of these properties.
Let's go to the Edit menu.
Let's choose cut.
Then I'll just come in here and delete that rule.
And let's now create a mixin,
and then put the properties inside of the mixin.
So a mixin inside of LESS starts with a period.
Then the name of the mixin.
So we'll call this button underscore normal.
Put in a beginning and ending parentheses.
Then a beginning and end bracket.
So again, this looks a lot like functions
inside of a language like JavaScript.
And then let's come in here
and paste in all of those properties.
Now with my mixin in place, I'm gonna hit save.
If I go back to the browser now and hit reload,
we'll see that all of the anchor links
are now showing up as regular links.
So we've basically locked all of the properties
being assigned to those because these are all
now inside of a mixin.
So now back inside of our LESS file,
let's create rules that will reapply
those properties back to those individual anchor links.
So let's first start by targeting
the anchor links inside of the article.
So let's type article space a.btn.
And a space.
Let's put in our brackets.
Scroll up here a little bit.
And now inside of this CSS rule,
to apply the mixin we'll simply type a period.
Type in button underscore normal.
Beginning and ending parentheses, then a semicolon.
Next let's come up here and select this entire rule.
Let's copy it.
Lets hit a few returns, let's paste it.
And let's change article to aside.
So now with these in place, let's save our LESS file.
It'll get compiled.
Let's go back to the browser.
Let's hit reload, and we can now see
that all of those properties are now being reassigned
to the links inside of both the article and aside sections.
So now that our mixin is working properly,
now let's create the option to create some customizable
properties inside of our mixin.
So let's go back to our LESS file.
Let's find button_normal.
Let's go inside of the parentheses,
and let's add three properties that we're going to
send to this particular mixin.
So the first one, we're gonna name it text.
And we'll use LESS variables.
So use an at symbol, type in the word text then a comma.
Next we'll send the background color.
So let's come up here and type an at symbol.
Type in background.
And then finally we'll send the border color.
So a comma, at symbol, border.
Now you can name these variables anything you want.
I'm choosing to name these text, background, and border.
Now inside of the mixin, I'm gonna come in here
and add another property called color.
This is gonna be the color of the text.
So I'll type color colon space and the value
is going to be this text variable.
So I'll select this up here.
Let's paste it down here.
Hit a semicolon.
Next let's select the background variable name.
Let's copy that.
Let's come down here to the background color property.
Let's replace the pound sign and three Fs,
with the background variable.
Then finally let's come up here and copy the border variable
and let's come down here to the border property
and replace the pound sign and three Fs for the color
with the border variable.
So now with these in place, let's come down here
to article space a.btn.
And when we call the mixin, we're gonna need
to send these three properties.
So the text color for the buttons
inside of your article element I want to be white.
So I'll type a pound sign
and three Fs inside of the parentheses, then a comma.
For the background color we're gonna use a green color.
So that's gonna be a pound sign, eight C for red.
C four for green.
And two eight for blue.
Then a comma and we're gonna use
the same color for the border.
So I'll come in here, copy that, and then paste it again.
So these three values are going to be sent
when we call the button normal mixin.
So now let's come down here to the aside.
Lets find the button normal mixin call down here.
And we're gonna set the text color here to a dark green.
So pound sign, we're gonna use 72 for red, B zero for green.
And zero three for blue.
Then a comma.
For the background color we're gonna use white.
So that's a pound sign and three Fs.
And then for the border color we're gonna use white as well.
So pound sign and three Fs.
So with these in place, let's hit save.
The LESS file will be compiled to CSS.
Let's go back to the browser.
Let's hit reload, and we can now see that the buttons
in the article element have some
slightly different properties
than the button over in the aside.
However, there are a series of common properties being used.
Such as display, padding, border radius, and so forth.
So now that we have some variations working
in our mixin for some of our properties,
now we're gonna create another mixin
so we can create some hover states.
So let's go back to our LESS file.
Now after the button normal mixin, let's add another mixin.
So we'll type dot button underscore hover.
Put in our parentheses.
Put in our brackets.
Split this open on the brackets.
Now the two properties we wanna send to button hover
will be just text and background.
So I'll come up here and copy these two variable names.
Let's come down here and paste them in the parentheses
for our button hover mixin.
And now inside of our button hover mixin,
let's set some properties.
First will be color.
So color colon space.
The value we're gonna set that to the text variable.
And then next we're gonna set background color.
And we're gonna set that value to the background variable.
And now with that in place,
we need to assign hover selectors to our buttons.
And we're gonna do that by using
the nesting feature of LESS
which we covered in an earlier episode as well.
So let's come down here to article space a.btn.
Let's hit a few returns.
So to create a nested selector in LESS, we use an ampersand.
Then we'll add a pseudo class of hover.
So colon hover, space.
Put in our brackets.
And now inside of this selector
we need to call the button hover mixin.
So let's come up here and copy this.
Come down here and paste it.
Put in our parentheses and a semicolon.
Now we're gonna send two parameters
inside of the parentheses here.
One for the text color, and one for the background.
So for the text color for the buttons inside of the article,
we want that to be black.
So we'll type a pound sign and three zeros.
Then a comma, then for the background color
we're gonna set that to white.
So that'll be a pound sign and three Fs.
Next let's come up here and select this entire selector.
Let's copy that.
Let's come down inside of the aside space a.btn.
I'll hit a few returns.
Paste that down here.
And the hover state for the aside,
we're gonna set the text color to white.
So let's come in here and replace the pound sign
and three zeros with a pound sign and three Fs.
And for the background color,
I wanna use a semitransparent white.
So instead of a hash symbol,
we're gonna use the RGBA color space.
So we'll type RGBA beginning and ending parentheses.
Inside of the parentheses, to use white
we'll set red to 255 comma 255 for green comma 255 for blue,
comma then point three for the alpha.
So we'll get a 30% white transparent background
for the hover state of the button inside of the aside.
So with all of these properties in place,
let's save our work.
Let's go back to the browser.
Let's hit reload.
And now we can come over here and hover
over each one of the buttons,
and we'll see the different styles taking effect.
Now the last thing I'd like to do
is add a right-facing arrow to each one of the buttons.
And we can do this by using the same nesting technique
in the main button normal mixin.
So let's go back to our LESS file.
Scroll up here a little bit.
After the background color property, I'll hit a few returns.
Let's type an ampersand.
Let's add a pseudo element.
So we'll type in two colons.
Then the word after.
Add in our brackets, we'll split this open.
Inside of our pseudo element,
the first thing we need to do is define the content.
So we'll type content colon space two ticks and a semicolon.
Inside of the ticks for the string,
we wanna use a right-facing arrow character.
So we'll type a backslash, two five B-A.
Then the next property is gonna be font size.
We're gonna set this to point eight ems.
Next property is gonna be padding-left.
We're gonna set that to six pixels.
And then finally we're gonna set the opacity to point 65.
So with these in place we'll hit save again.
And now since we nested this pseudo element
into the button normal mixin,
if we come back to the browser and hit reload,
we'll now see that all of the buttons
have the right facing arrow being applied to them.
Now if you're curious to see
how all of these LESS properties get compiled into CSS,
we can go back to the exercise files, open style.css,
scroll down to the bottom, you'll see all of the properties
that were defined inside of the mixin being applied
to all of the selectors in the final CSS file.
And so now if you'd like to learn more
about using LESS, or SASS,
I'd recommend taking Joe Marini's course
entitled CSS with LESS and SASS.
Which is also available here in the library.
And so with that, I'll conclude this episode.
And as always, thanks for watching.