Week 2, Day 4 of Full Stack web development at Lambda School continued with preprocessing using LESS (LEan Style Sheets). We learned about parametric mixins, functions, and escaping as well as importing .less files into a single .css file for use by the browser to style a website (and, of course, we implemented all of this in our project).

Parametric Mixins

Parametric mixins are mixins that accept arguments and parameters. They’re essentially JavaScript functions. Their format is the same as writing a style that operates on a class in CSS, but with a pair of parenthesis in-place before the curly brackets, to pass parameters to the mixin.

The following is a parametric mixin that I wrote for one of my projects. It uses variables (arguments/parameters) to change the color of a button and its text (actually a <div> styled to look like a button), so that the overall appearance of the website can responsively change based on media query.

.styleButton(@btnText, @btnColor) {
  display: flex;
  color: @btnText;
  background-color: @btn-bg-color;
  width: 30%;
  height: 10%;
  border-radius: 5px;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}

So, although a standard mixin reduces the amount of code that we might need to rewrite for parts of a program that use it, they’re also inflexible. They really only do one thing. Parametric mixins allow a mixin to become more dynamic, by virtue of incorporating variables (which can actually be other mixins as well!).

Its easy for new developers who have just discovered mixins to create them for everything, but we were cautioned to make certain that there are enough use cases for them, to avoid adding unnecessary complexity to projects. Often, a simple class can accomplish what we need. The main question to ask is whether the mixin will be used many times in the program, or only a few.

Functions

Functions are pre-built code that are part of LESS. They remind me of built-in methods in JavaScript. There are many types of functions. A quick look at the LESS documentations shows the following categories:

• Logical functions
• String functions
• List functions
• Math functions
• Type functions
• Misc functions
• Color Definition functions
• Color Channel functions
• Color Operator functions
• Color Blending functions

Functions generally return a value – something common in programming languages, but new to more declarative languages like CSS. We looked at a few select functions during the lecture. I remember a pair that darkened or lightened a color, without the programmer needing to actually know the name or any kind of code for the given color.

.btn-class {
  padding: 10px 40px;
  border-radius: 10px;
  background-color: teal;
  color: white;
  cursor: pointer;

  &:hover {
  // The compiled color returned is #006667 
  background-color: darken(teal, 5%)
  }
} // .btn-class

There are really too many functions to cover all at once, but here’s a link to all of them from the LESS documentation:

• LESS Functions

Escaping

Escaping is a tool that’s mainly used with media queries. It allows a string to be stored as a variable to help keep code from having to be retyped. The format is like this:

~"string value"

During the lecture, we were shown a <h1> heading that has a base font-size and padding which changed at different widths, to accommodate different screen sizes. The initial code was pretty static, and the problem with it was that if we had different elements all over the program that needed to be reconfigured at certain breakpoints, but the width for those breakpoints changed, we’d have to search for every instance of those individual changes at each resolution to change them. without escaping.

With escaping, we  could assign a string value to the media query and keep it stored, centrally, in the program. We could then easily change and incorporate it into the program by simply altering the string from one place.

Here’s <h1> code without escaping:

h1 {
  font-size: 2rem;
  padding: 10px;

  @media( min-width: 500px ) {
  padding: 20px;
  }

  @media( min-width: 800px ) {
  font-size: 1.8rem;
  padding: 0 10px;
  }
} // h1

And here it is WITH escaping:

@tablet: ~"(min-width: 500px)";
@desktop: ~"(min-width: 800px)";

h1 {
  font-size: 2rem;
  padding: 10px;

  @media @tablet {
  padding: 20px;
  }

  @media @desktop {
  font-size: 1.8rem;
  padding: 0 10px;
  }
} // h1

Note the @tablet and @desktop variables. Changing these would immediately update every occurrence of the given media queries and allow the program to be globally updated from one spot.

Importing

CSS files can get big. We were told that we’ll see CSS files with thousands of lines of code, and I remember actually seeing one with several thousands of lines only last week: it was the CSS for the portfolio project (Week 2, Day 2). We picked a template to customize, and I distinctly remember at least 4,000 lines of code in the CSS of the one I chose.

Using imports basically allows us to use smaller files to style different sections of our web page and then combine them together into one file for actual display. It makes code more manageable, especially for larger projects, and also allows different people or teams to work on different sections of a website without adversely impacting each other.

The syntax in LESS is as follows:

@import 'filename';

We used an “index.less” file to import all of our .less files. Cascading matters! So, we were told to generally import variables and mixins first, any resets or normalizing next, then general styles, and then styles for individual sections. If the files are in the same folder as the main .less file, their extensions can be left out. I kept mine in though, just to be safe.

Here’s an example:

// Vars and Mixins
@import "variables";
@import "mixins";

// General Styles Here
@import "reset";
@import "general-styles";

// Components Here
@import "header";
@import "cta";
@import "main-content";
@import "contact";
@import "footer";

Project

Our Preprocessing II project was to update the website for the Fun Bus travel agency. We had to add a new navigation, header and buttons to the home page and then style a mobile version of the website – and we had to use preprocessors. It was important for us to keep the less-watch-compiler running on Git Bash, so that it would automatically compile our .less files and output it to a single .css file when we saved and page in the project. We had to import 7 .less files into our main .less file as well. The buttons on the page needed to be styled using a parametric mixin, and the mobile breakpoint had to be called using escaping. For both the desktop and mobile versions, we had to match the provided design documents as closely as possible.

I didn’t get to work on any of the stretch goals, which were to create an animation mixin using parametric mixins, add a form that allowed users to select a vacation package (with inputs for select fields) and then style the site to look good at all sizes, not just desktop and mobile.