New terms from treehouse – Frameworks Basics Part 1 – Introduction to Front-End Frameworks, Prototyping with Bootstrap, and Building a Website with Bootstrap

Introduction to Front-End Frameworks

What is a Front-End Framework?

A tool for building websites that help you get started and streamline your process. They’re good for getting an idea out quickly. Building a site from scratch takes time due to testing to ensure things work on multiple browsers and viewports. Frameworks take care of a lot of that for you. Most sites are responsive and have a similar structure/layout. Rather than reinventing the wheel, you can use a framework. They’re basically a library of components we can easily reference and use when building a site.

There are two types: simple and complete. Simple are usually lightweight and used for specific features like typography, a fluid grid layout and css resets. Complete ones are more robust and have a complete set of tools for the whole project.

They use many best practices, the code is DRY, maintainable and scalable. They also have excellent documentation.

---

Should We Use a Framework?

They should be used to save time and speed up workflow, but NOT as a crutch if you don’t understand html, css, js, etc. First, ask why you need it? Do you just need a fluid grid layout, or something more? How much time do you have? What’s your budget? Are there technical/creative limitations? If you have no time, budget and skills, it may be a good choice. You should choose on based on those things, and what’s needed for the project. If you’re on a team, using a framework can make things easier for everyone to maintain things.

---

Prototyping with Bootstrap

Introduction to Bootstrap

Bootstrap is an evolving framework with a complete set of well defined html, css, js and font files. It powers over 1% of the web. It was built from the ground up by twitter to help with front-end inconsistencies. It’s one of the most complete frameworks, using modern web technologies like grid layout and responsive design. It comes with cross browser compatibility, though it works best in the latest browsers though. It’s built with the Less CSS preprocessors, so it takes advantage of things like variables, nesting, etc. It has good jquery plug ins as well.

---

Downloading Bootstrap

Download it here, and it will include the minified CSS and JS files. You can also clone/fork it off of github. You can also install and manage the files with Bower, a package manager for the web. If you have BS downloaded and Bower installed, just run the command “bower install bootstrap”. Or, rather than downloading, you can just link to Bootstrap’s CDN. The downside to this is that you need to be connected to the internet to use it.

When you download BS, you’ll get both the normal and minified versions of the css and js files. You can tell which ones were minified because they’ll have .min in the name. There is a font directory for the fonts you’d want to use as well.

It also contains a bootstrap theme css file for option you can link to for optional theming.

---

Building a Header, Navigation, and Jumbotron Component

When developing with BS, keep the documentation handy, which is available on their site in different sections. It contains examples and references to help you get started building.

We’ll start with some HTML that doesn’t have any styling applied besides normalize.css, which bootstrap uses. We’re currently linked only to the min.css file.

We’ll start by adding a container to our page. To do this, simply add the the bootstrap class .container to the main div container element. This let’s us easily center the pages content, and auto sets the containers max width at every media query breakpoint.

Next, we’ll style the header and nav links. We’ll use the page-header class component here, which will space up the header element for us. Looks like it add a bottom border for us as well.

For the nav links, we’ll use the nav component on the ul containing our links. It spaces them out, removes the list style, and adds a nice gray hover state.

We can now add modifier classes to create different types of navigation. First we’ll try the nav-tabs class, which gives a nice, horizontal nav.

nav-pills gives us pill shaped nav links.

To adjust the position of these links, we need to use one of bootstrap’s helper classes. Here we’ll use the .pull-right class to float the items right.

Use the active class to style the link for the page you’re on.

Next we want to style the most important part of this site, the main content text and call out links. For this, we can use the jumbotron component. It’s used to showcase important content. Give the div wrapping this content the class jumbotron. Then, use the lead class for the lead text, which will make it stand out, and also prevent it from appearing too big in smaller viewports.

Now let’s style the callout links using bootstrap’s button classes. You start with the base style btn, then add a modifier class for the button look you want. We’ll use btn-success to make the first one green, and btn-default to make the second one white. We’ll adjust their sizes with a button size class, in this case the btn-lg one.

We’ll then use one of the button group classes to put them together on the same line. First, we must put the btn-group class in the containing p element.

That was awesome. This is fully responsive too over 4 breakpoints.

---

Using the Grid System

Bootstrap’s grid system is mobile first and responsive. It has four tiers, phones, tablets, desktop and large desktop.

The site has had some features added as content.

The grid consists of two important parts – rows and columns. Columns always need to be nested inside of a row. The grid can scale up to 12 columns depending on the viewport width. Here we want to layout three columns horizontally in one row. First, define the row with the class row in the containing div element. Next, add column classes to the child divs. There are multiple options here for how they should display on different breakpoints/devices. Simply divide the number of columns you want(3) by the total allowed (12), to get the number you need, in this case 4. There are four options for the different breakpoints, we’ll start with the smallest one col-xs for each div. Since it’s mobile first, this will apply to the larger breakpoints as well.

The col-sm is for small devices like tablets, and using them here will make the columns appear stacked in the extra small phone breakpoint. In the small range, they’ll switch back to the three columns.

If we were to use the medium col-md class, they would stack with the xs and sm class breakpoints. If we use the col-lg prefix, the columns will stacked in every device range but the largest one. Here though, the col-sm option works the best so we’ll stick with that.

---

Working with Nested Grids and Responsive Images

Once again, we have some new content to style. We’ll start by giving their container the class row. For the two child divs, we’ll make one the width of 8 columns and the other the width of 4 to hit our 12 total.

That’s a little big for the amount of text though, let’s make them both 4.

It would probably look better if one was on the left and the other was on the right though, so we can use an offset class to do that. Simply add the col-sm-offset-4 class to the second div.

But now we have this big 4 col gap, so let’s just make our two columns equal in width.

To nest rows inside of columns, we’ll need to another row of content, which will display a thumbnail of the tutorial and how to sign up. We’ll put a new div with some content within our div for the left column, and give it the class row. When rows are nested, you can still give columns the same grid classes as before, the difference is that the columns will scale according to the width of the column it’s within. So, for our columns here we’ll set each to col-sm-6.

It looks like our second column with the text sized correctly, but not the image. This is because the image itself is 450px wide, which is bigger than our column. To fix this, we can give the img a class of img-responsive. It applies a max-width of 100% and a height of auto, so the widest the image can be is the width of its containing element.

You can change the order of the columns with the col-push and pull modifier classes. Let’s say we want to reverse these to for only md and lg devices.

On mobile designs, sometimes you don’t want all the content you have on the desktop version. Bootstrap offers classes to let you hide or show things based on the device size.

Here, we’ll use the hidden-xs class to hide the left column on xs devices.

---

Building a Fixed Navbar

Here we’ll be linking to the bootstrap-theme file, to take advantage of some of its features. At some point we’ll need to add our own files as well, but when you do be sure to avoid editing bootstrap’s default css files, and add them via your own stylesheet. We’ve also linked to jquery and the bootstrap js file at the bottom of our document.

Now to make a fixed navbar. We’ll start by putting a div outside of our containing div, because remember that’s a wrapper and won’t let content within it span the entire length of the viewport. We’ll give it the classes navbar and navbar-default. Inside that we’ll add another div with the class container.

Now to add the nav elements. We’ll start with a link for our branding, and give it the class navbar-brand, which bootstrap uses to place it over to the left, and give it the class text-muted so it doesn’t stand out too much. We’ll then add our collapsing nav with a div and the classes collapse and navbar-collapse. We’ll then add our links with the ul from before, removing the pull-right and nav-pill classes, adding the navbar-nav, which positions the links horizontally and gives them their default color styles. Then, navbar-right, which will float them to the right.

We can invert the colors by changing the navbar-default class to navbar-inverse.

Now to make the navbar fixed at the top by adding the class navbar-fixed-top.

However, the fixed positioning here causes the navbar to overlay the content. To fix this, we can add our own padding via our own style sheet.

Now, those nav links disappear in xs devices, which is good, but we want to have a button appear there instead. We’ll start by adding some html for a button.

The navbar-toggle class on the button positions the toggle button on the right side of the nav bar in mobile views. The collapse value for the data-toggle attribute calls the javascript for the collapse functions and plug ings. The data-target makes the nav toggle on and off when clicked. The span elements make the collapsed menu bars.

Last thing to do is reset the max width of our container.  Currently it’s set at 1170px, which is too wide, so we’ll adjust that in our own stylesheet.

---

Build a Website with Bootstrap

Adding a Dropdown Menu and Glyphicons

Bootstrap uses the dropdown.js plugin to make this happen. First weapply the dropdown class to the parent element of the link we want to trigger the dropdown. Next we’ll add a data-toggle attribute to the link with the value dropdown. Also, replace its href with a data-target attribute, set to #. This keeps the urls intact, letting us use the link as a trigger rather than having it link to a page. To indicate that the link will open a dropdown, will add a b element with the class caret.

Now to make the list of links in the dropdown. Add this right beneath the trigger link, and add the dropdown-menu class to the ul tag.

 

To add dividers, just add a li with the class divider.

 

This is also responsive.

Next we’ll add a contextual icon over each column paragraph of content, using our glyphicon font files, which contain 180 glyphs to choose from.  Simply add the glyphicon class to a b element, then the class of the one you want.

To resize them, we’ll go into our mystyles.css file, select .glyphicon and increase the font-size to 3em, display block, text-align center, and set the color to a blue.

---

Building a Carousel

Bootstrap’s carousel component lets you cycle through pictures. To add it, put it outside of the first container div, so it takes up the full width of the page. Make a div and give an id of your choosing. Then, give it a class of carousel, and slide, which will slide the pics from left to right, and jumbotron, which will maintain headings and text size. Then, add in a container div. Inside that, add a div with the class carousel-inner, which positions the slides and sets the overflow. Inside that, add the first slide aka item, as a div with the class item.

We’ll now paste our header and p content into our first slide, since this carousel is replacing the previous jumbotron. Then, we’ll add the active class to our first item, so it displays.

To remove the space between our slide and the header, simply adjust the body’s padding-top under mystyles.css.

Let’s add more slides.

To actually see them though, we need to add anchor elements with spans for the arrows. Set the href to the id you gave the original div. Give it a data-slide attribute set to prev, and give the span a icon-prev. For the right arrow simply switch left for right, and prev to next. Note: you add this at the end of the carousel div after the slide items.

Finally, we’ll add those navigation dots with an ordered list. Give it the class carousel-indicators to the ol, and in the li add the data-target attribute and set it to the id you created earlier, and the data-slide-to attribute set to the index of the slide you want. Finally, add the active class to the first li.

So to style those better, adjust the style and position with our own custom styles.

---

Building Modal Windows and Forms

The modal.js plugin lets you add modals. Here, we’ll make it so when you type text me the link, a modal pops up with a form that lets you enter your number. First make a div with the class modal, and also fade, which will make it slide down and fade from the top of the page. Then, give it an id of your choosing. Inside that, create a div with the class modal-dialog, which will keep our class centered on the page. Inside that, a div with the class modal-content, which gives the borders, box shadow and border radius. Then, a div with the class modal-header, and another with the class modal-body.

In the header, we’ll add a button to close it and some text. The close class styles and positions the close button in the top right and data-dismiss=modal closes the window when the button is clicked.

Next, to add the form. In the body, add a form element with the class form. Inside that a div, with the class form-group, which applies the spacing to labels and form elements. Next, create the label with the class sr-only, which hides the class from us, but screen readers can still read it. Then, an input with the form-control class which makes the input receives the global styling and sets the width to 100%, and a placeholder. Make another form-group field, inside that a select element with the class form-control and the options for iOS or android. Lastly, add a button element for the submit button, with some button classes. The data-dismiss attribute=modal will close the modal when this is clicked.

Currently the form fields are displaying block, so they take up 100% of their parent’s width. To change that, set the form element’s class to form-inline. Note that they will still display block on smaller devices.

---

Build a Website with Bootstrap

Customizing Bootstrap

You can customize bootstrap for your needs, choosing your LESS components and variables and jQuery plugins. The variables let you preset things like colors and the container sizes and navbar height, which makes them easy to use later. The defaults are written in grey as placeholder text. When you’re done, scroll to the bottom and click Compile and Download.

 Note that in your header your should put this for IE8.

---

Building the Navbar

First define the containing div as a navbar with that class, and then the navbar-default class for the default navbar files. Then, add a container div to make sure that the element stay within a fixed width. To make it fixed, simply add the class navbar-fixed-top to the main div. For our logo, give it the class main-logo (note this isn’t a bootstrap class, but a custom one we’ll use), and for the text, navbar-text. Float them left and right with the pull-left and pull-right classes. We’ll add hidden-xs to the text to hide it on small devices.

Now for custom styles, remove margins for the navbar-text and make it bold, and for the logo, use the trick where we indent the text a ridiculous amount so it doesn’t appear, and instead use a background image for it.

---

Building the Hero aka Jumbotron Component

Give the first div the class jumbotron, then, wrap it’s content in a container class div. Then, create a row div and some container columns, spanning 6 columns each from small upwards with col-sm-6. Note that in xs devices they will be stacked instead because of this. Make one for the image, giving it the custom class device so we can style it later, and add the class hidden-xs so it’s hidden in extra small viewports. We also give the p tags a class of .lead, Then for custom styles, we’ll give the jumbotron a custom bg image, some padding and margin-bottom. Then, style the device class image. Then, style the h1 and .lead text.

---

Adding Button Styles and Media Queries

Now, we’ll style the buttons by giving them first the btn class then btn-default for the default styles we set up earlier and then also btn-lg to set the size. We’ll add some custom button styles as well, increasing the border width and changing the color, and also some hover styles, changing the background-color.

 

Now, we’ll add media queries, starting with anything =< 991px. We’ll change the padding for the jumbotron and position of its bg image. Next, we’ll do one for =< 767px, reducing the height of the navbar and size of the logo, and more padding changes for the jumbotron.

---

Content Layout with Grids

Start by adding a container div, then give each div inside the class row, and ft, a custom style. Then, create the columns in the rows with divs with the class col-sm-6, and one with another custom class ft-copy, for the feature copy.  For the second column containing the image, we’ll add the hidden-xs class to hide it on small devices. Inside that we’ll make a div for the image, with the custom class ft-icon, and the camera class since this one will be a camera.

Now, we’ll make custom styles for the ft-icon div, setting it’s dimensions and bg color and image. Then, we’ll adjust the background position for the bg image for the different divs to make them look more interesting.

To change the layout, simply rearrange the markup.

---

Adding the Feature Icons

Now, to add the three icons for this section, which are currently all in a sprite sheet.

We’ll add these with the :before pseudo element, with an empty content, display block, absolute positioning (which is why we set the ft-icon div to relative), a width and height, then center it by setting top, bottom, right, left to 0, and margin to auto. Then, add the sprite sheet with a bg image.

To get the right icon for each, we’ll just adjust the background position.

We’ll use the img-rounded class on the div to round the images, and add some custom styles on ft-icon for margin-bottom and padding for pt-copy.

---

Building the Form and Button Panel

We’ll tweak the media queries for the padding of pt-copy and margin-bottom of the pt section. For the panel, we just add the panel class to our div, and panel-default for the default panel styling, and the hidden-xs class to hide it on xs devices. Next, we’ll make a row div with two columns divs, each taking up half the row. For the input, once again we’ll use the sr-only class to hide the label from us, but not screen readers. For the text input we’ll give it the class form-control, which brings in global styling and width for form elements, and a custom class phone-txt. For the button we give it the button class, and a custom class button submit.

For the button we want it to be an arrow, so we’ll use bootstraps glyphs, by making a span inside the button with the class glyphicon and then the class of the glyph we want. We’ll then offset the first column to make it closer and line up better with col-offset-1.

Now for custom styles for the panel, starting with the rainbow background image and have it repeat on the x axis only. Then, a border-bottom and some padding and margins.

---

Adding Icon Fonts with IcoMoon

Now to add the iOS and Android icons to their buttons. Bootstrap doesn’t provide these, so we’ll use IcoMoon. Click App > Start the App > click the ones you want > click Generate Font at the bottom > Download.

Once they’ve downloaded, put them in your fonts folder in the project. Then, import them using the @font-face rule, which IcoMoon actually gives you with your download.

To insert them, you can use the data-icon attribute in the elements you want them to appear in. For the value, they give you the unicode value needed. Then, you’ll need to use a pseudo element to actually get them to appear, which is easily done with an attribute selector. Bring in the font-family from the @font-face we added, then set the content to be the value of the attribute data-icon, set a font-weight/variant/transform, line-height and margin

---

Content Layout with Nested Grids

First we’ll split our row into two columns, each taking up half the space with col-sm-6 Within those, we’ll make a new row and columns for our image/call to action. We’ll add the bootstrap img-responsive class to make sure the image has a max-width of 100%, and also img-rounded for some border-radius.

We’ll now layout the next column the pretty much same way, though with dif size and a img-circle for the image.

---

Adding Responsive Classes

Now we’ll style it for the xs devices, since a lot of things were excluded for it, like with the use of col-sm-6. We’ll start by hiding some of the teacher content from before with hidden-xs. We’ll add a custom th-copy class to the copy in the features section.

Now to style the callout button. Give it the btn class, btn-success for those styles, and btn-lg to make it large, then some custom styling.

 

---

Adding the Video Modal and Footer

Now we’ll build a video modal for when you click the video image. First, add the markup for it. Most of the classes here were explained earlier for the modal lesson, but we did need to add an id so we could link to it.

The link requires some custom attributes, like data-toggle=”modal”, and href set to the id.

Now, to do the footer, which is already set up with rows and columns, including some offsets and custom classes. For the div containing the footer we gave it a custom class main-footer, which we apply some margins to.

New terms from treehouse – Sass Basics Part 2 – Speeding up Workflow with Sass and Advanced Sass Concepts

Speeding up Workflow with Sass

Creating a Color Palette

We start with this pretty much blank site, and add some colors.

Let’s Sass things up with some variables.

To modify the color variables, there are some functions you can use, such as lighten(). It takes two arguments, the first being the variable, the second being the percent lighter you want it to be. This is nice because it changes it dynamically, so if we were to change the color for the $text-color variable later it lighten that one instead. Notice how Sass calculated the hex code of the new color and put that into the CSS. There is a darken() function as well, which works the same way.

Once again thinking as DRY as possible, this works well for variables.

In art, there are complimentary colors, which are opposite on the color wheel.

In Sass, you can generate a color’s compliment using the complement() function. Note that in this example, the lighten color is being calculated off of the calculated complement color.

There are a whole bunch of other functions, like desaturate, hue, opacity, even a mix function that let’s you mix multiple colors together.

Learn more about color operations and keyword arguments in the documentation.

---

Implement Files

It’s good to have one stylesheet, as it reduces the requests when loading a site. However, for devs one huge stylesheet is a pain to work with, so it’s better to have multiple files, all of which are imported by the one stylesheet that’s loaded by the site. A good practice is to have a sheet for just your Sass variables.

So, we create a separate sheet for that, then import it using @import, followed by the name of the file to import in quotes, followed by a semicolon.

Note: the file name was started with an underscore. They did this so that Sass would not create a separate CSS file for it. If we hadn’t used an underscore, there –watch would make a variables.css file, which we don’t want. This is known as a partial Sass file.

Within the _variables file, it’s good to make use of Scss comments (which appear to be like JS’s, just two //) to divide up the sections.

Make another stylesheet for global styles, and suddenly there’s no actually css in the main.css file that gets loaded. This is normal for a lot of Sass projects, it’ll just be a list of @import’s.

Another convention is to make a folder called pages, then create a stylesheet for each page of the site to import. The order matters – you need the variables and mixins first because the other stylesheets depend on and use them. Additionally, like normal CSS, things cascade and will overwrite if they’re called later.

Another example is if you need to do special styling for blackberry browsers. You could start by importing main.css, which contains imports to all those other stylesheets, and then add your own styles on top of that. Additionally, you wouldn’t start the name with an underscore, so you’d get a separate blackberry.css file as well.

If you want to use normalize or reset.css, simply import that first.

---

Working with Sass Libraries

Bootstrap is a UI library/framework that gives you a flexible grid system and predefined styles. It was originally written in LESS, a competitor to Sass, but people have fixed this for you and it works well with Sass. Foundation is another responsive framework that was written in Sass.

There are also Sass libraries, which focus on helping your write Sass. Compass is the most popular one, but there are others, like Bourban, which is a bit simpler. You’ll need to use the command line to install Bourban, which will create a folder where specified with the needed files. You can then read through those to see what’s available to you, like button mixins for example.

To import, just @import like you would any other scss file. Now, we can use the library. The linear-gradient property is a good example as it’s not yet standardized across all browsers. Bourban takes one declaration and auto includes the vendor prefixes you need for that for each browser.

It’s also helpful for defining font families. You can see here it put in the rest of the back up fonts for you in the CSS, based off the $lucida-grande variable.

---

Sass Functions

Sass let’s you build your own functions. We’ll start by making some div’s.

We’re going to build a Sass machine, which isn’t necessarily a normal site. When you give it a color, it will show you a color and the percent make up of it of RGB by size.

We’ll start by defining a color variable and set the first div to it, then float the other div’s so they’re all in a line.

Next we’ll set the background colors for the rbg divs.

Now we need their width to be overwritten and represent the amount of red, green or blue in our color. There’s a function called red() and we can pass it an argument, which will return the amount of red in the color from 0-255. We’ll set the red div’s width to that. We need it to be in px’s, so we’ll add that as well.

This ends up putting everything in quotes though, which we don’t want. Luckily we can use the unquote() function to fix that.

It would be better to do this as a function though. They’re written at the top like mixins and variables. You start it with @function, then the name of the function, any arguments you want to pass in (note that these parameters need to start with a $), then curly braces for the code. Within that you need to use @return, which is what the function returns.

We then plug that in and get this.

And we’re done! We can now change the value of the $color variable and the div’s below will change accordingly.

---

Speeding up Workflow with Sass

Debugging Sass

Common mistake – forgetting a semi colon. Sass is pretty strict about this. We forgot one for our $margin variable, and you can see Sass is sassing us about it at the top of our html and css pages

Note that it adds the content at the top of your html using a before psuedo class and the content property.

 

If you mess up a curly brace, the compiler won’t know anything’s wrong til it gets to the end of the file. Here, we forgot a closing brace for the h1. Sass thought the .entry’s closing brace was the h1’s now, and now thinks there is none for the .entry. Note that because of this it’s telling you the error at the end of the file, which is wrong. It basically counts the number of braces and let’s you know if it’s off.

There are lots of Sass options, which you can access from your console with sass –help. There are a lot of cool options, like –style, which let’s you modify how the css is outputted (by default it’s nested like we’ve seen before). If you do compressed, you can minify a scss file into css.

Note that you can modify the output so it puts that in the css file, rather than printing it to the console, by putting :filenameyouwantittogoto after it.

Alternatively, you can use the expanded style and have it print out normal CSS rather than the nested kind.

Another cool option is –line-numbers, or -l, which will put in CSS comments letting you know where to look in the scss file/what line for the corresponding code.

Finally, there is a @warn directive you can use for mixins to warn devs it might be depreciated in the console.

 

This didn’t come up in the lesson, but for Sass comments, you do // for Sass only comments, and /**/ for CSS comments.

---

Working with Media Queries

We’ll start with a basic responsive site.

In normal CSS, you’d have your media query at the bottom like this:

With Sass, you can actually just nest them into the selector.

And just like that, we’ve replaced the original media query with our nesting.

In the CSS, it will create multiple, nested media queries.

Sexy.

---

Interpolation and if/else Loops

Interpolation is helpful for repeating patterns. In the example below, just a mixin wouldn’t work because you need it to be dynamic based off the class name.

To do interpolation, use a pound sign then curly braces, putting the variable name inside of them. Now we can use the mixin and it will dynamically update the color based on the class name. You can add on other classes and selectors to the original class, etc.

Here’s using the same technique to set the background image.

Alternatively you could concatenate them.

We can do if/else statements as well. Let’s say if the color is red we want to do something different. You write it with @if, then the the condition, then put the code in curly braces. Here, if the color is red we add a border.

You can compare numbers for the condition as well. Here, we adjust a padding based on width for a div. Note that if the condition isn’t met and there are no styles to apply for the div, Sass won’t print the div at all to the CSS, since there are no styles for it.

 

To use an else, just do @else. To use an else if, just do @else if.

---

Creating Loops with @for and @each

We’ll start with a bunch of divs all styled the same.

Our goal is to set a color for each one slightly lighter than the last. To do a for loop, type @for, then $i, then your condition. Typing 1 through 100 will make the variable $i start at one and go up to 100. Here we used the nth-child pseudo selector with the looping $i variable to set the background-color for each div.

To make this actually do what we want, we’ll use the darken() function, and set it’s percent variable to the $i, which will increase for each block. Fun fact: Sass will automatically use a keyword rather than the hex code if there is one.

We can also do each loops, which do loops over lists. Start by writing @each, then a variable, then in, then the list, then code you want in curly brackets.

---

Advanced Mixin Arguments

Here, we’ll rewrite the @each loop from the last lesson as a mixin. We’ll start by making a mixin, naming it band, and pasting in the each loop. Then, we’ll include it to make sure it shows up in the css. Remember, a mixin doesn’t do anything until you include it.

But this isn’t dynamic. We want to be able to pass in arguments. Here’s one way to do that.

But, if we want to include a second band with only one member, it gives us an error, because it’s expecting four.

To fix this, mixins accept variable arguments, meaning anywhere from 1 to infinity. To do this, you simply write an argument followed by three dots. Here we changed the argument to that, then changed the list in the each loop to the new argument, minus the dots.

Let’s go a step further and have it accept the name of the band as well. We added a second argument, $name, and used that to change the class name and folder path for the background image as well.

In Sass, there are lists. In the example below, the margin values are separated by spaces and count as one list value, made up of the four margins. If you added commas, then it would be wrong and they would each become a separate value.

So, for our previous example, if we remove the three dots from $members, we can actually list the members without commas, as you can see in the first include here.

Still, this really isn’t recommended, as most other programming languages don’t have a concept like this.

Here, we start with a pretty straightforward mixin.

But, users may get confused on the order they need to pop in the arguments (which matters). As a way around this, you can actually write the $variable_name: value instead of just the value. This makes it so the order you write in the arguments doesn’t matter, which is helpful if you have a lot of options.

If you do this when writing the mixin itself, you can actually set a default value. Here, display will default to block unless otherwise specified. We didn’t even have to provide a value for $display when entering the arguments without their name.

If you set a default for every argument, you actually wouldn’t even need to pass in any arguments if you’re okay with just the default values.