When I first heard the word preprocessor, I thought it had to do with hardware and making use of some kind of main or secondary processor chips. With regard to CSS, it turns out that its a language extension! A preprocessor is a program that takes data, processes it and then passes that data on to another program to use.

So, on Week 2, Day 3 at Lambda School, we learned about preprocessing by using LESS (LEaner Style Sheets) to style a guided project and then our own project for the day (along with some code-alongs in CodePen). LESS is a programming language unto itself. My understanding is that code in LESS is compiled by a JavaScript compiler, which turns it into CSS. We didn’t do any work with CSS files for Days 3 and 4 of the week. Instead, we worked with LESS files and HTML files. The LESS files then compiled and were merged onto a single CSS document (index.css). It was an interesting process to observe.

LESS reminds me a lot of the JavaScript that I worked through in the bulk of the pre-course to get into Lambda. While CSS does a lot, especially when adding new components like Flexbox (and what I’ve seen of Grid). its still very similar to HTML in that its a declarative language. There’s no logic involved in coding in CSS; its really just a series of command issuances. LESS adds a lot to CSS: variables, nesting, mixins (which are like user-defined functions), operators and baked-in functions. So yes, in 2 weeks, we dived into learning at least the basics of 3 complimentary languages.

The three most-used CSS preprocessors are SASS, LESS and Stylus. SASS is very similar to LESS in format. Our instructor, Britt, actually learned SASS in her own bootcamp and learned LESS in a single day to teach it to us. This article goes over some of the differences. Its really interesting to compare LESS and SASS code in it and see how close they are:

• HTMLMAG: An Introduction to CSS Pre-Processors: SASS, LESS and Stylus

Set up

Our first matter of business was actually setting up LESS. This involved installing Node, which is an open-source JavaScript run-time that allows JavaScript to be run outside of a browser – like on the desktop. Next, we installed YARN – a package manager that we primarily used to share code in Git Bash. Finally, we installed less-watch-compiler using Git Bash. Its a program that monitors folders for file changes and automatically compiles .less files in the given folder/subfolders into CSS and outputs them into a .css file.

Some people opted to use another package manager called NPM, over YARN, because of installation issues, but I ended up going with YARN because the commands to work with NPM once it had been installed were different from YARN and would have taken me longer to learn to use, considering my lack of familiarity with either.

LESS

On Day 3, we focused on the following features in LESS: variables, mixins, nesting, bubbling and operations.

Variables in LESS are written with a starting @ symbol. Like with other programming languages, they allow developers to store values for use in their code. We used them for font, color and width sizes, among other things.

@headingColor: #FF0000;

Mixins are named for their ability to mix together different classes and use one class’s properties in another class. They very strongly resemble functions in JavaScript. They’re declared just like classes in CSS, but include a set of parenthesis before the curly brackets. Here’s an example mixin that takes two classes and fuses them:

.font-class {
  color: black;
  font-size: 18px;
  text-align: center;
}

.box-class {
  width: 100px;
  height: 100px;
  background: gray;
}

.example-mixin {
  .font-class();
  .box-class();
}

Nesting is exactly what it sounds like from other programming languages. Its a technique used to organize code by indenting lines so that they are visually contained by “parent” code. They allow developers to quickly scan code and know which parts belong to other parts – parent objects/elements and child object/elements. We’re advised not to nest more than 4 levels deep, much like the movie Inception. As a bonus, nested code is collapsible in VS Code and other editors, so its easy to shrink-down lines of nested code to declutter the screen and also learn the hierarchy and structure of a given page of code.

.parent {
  color: black;
  font-size: 12px;
  border: 1px solid black;
  padding: 20px;

  .child {
    color: red;
    font-size: 16px;
    margin: 20px;

    .grandchild {
      width: 400px;
      height: 100px;
      background: gray;
    }
  } // child
} // parent

Bubbling is the idea that nested code “bubbles up” to wrap the selector that its nested in. Its important for techniques like nesting media queries in sections of code, instead of making separate sections of code to store media queries. The way we used it was so place media queries exactly where they were needed, to format elements for different screen sizes on the spot in the code, instead of grouping together elements that needed to be adjusted into a single area and altering their layout there.

.some-class {
  // Large screen styling
  width: 800px;
  height: 100%;
  background: gray;

  // Medium screen styling
  @media (max-width: 800px) {
    width: 100%;
    background: black;
  }

  // Small screen styling
  @media (max-width: 500px) {
    width: 80%;
    background: green;
  }
} // .some-class

Operations are simple math operators, like in other programming languages. These include + (addition), – (subtraction), * (multiplication) and / (division). Operators take units into account and convert all to the leftmost unit type.

.some-class {
  width: 100px + 10; // 110px
}
.some-class {
  width: 100px - 10; // 90px
}
.some-class {
  width: 100px * 10; // 1000px
}
.some-class {
  width: 100px / 10; // 10px
}

Project

Our Week 2, Day 3 project was to get the compiler running and then build a digital resume from scratch for ourselves or a fictional character. I made one for myself, but I saw others that were really well-done for characters like Bruce Wayne (Batman), Walter White (Breaking Bad) and Jarlaxle Baenre (R.A. Salvatore’s Dark Elf books for The Forgotten Realms – I haven’t read D&D novels since the 90s, but Salvatore’s were some of my favorites).

We had to use the less-watch-compiler for this project. We were given a sample resume layout that we could build, if we didn’t want to make one of ourselves or pick a character. The content had to be provided by us and the page had to include a navigation with 4 items of our choosing, an intro about why we’d be a good hire, a skills section, work history and contact method. We had to incorporate variables for color and fonts, nest selectors in a main container, create 2 mixins and use nested at-rules to produce a mobile version of the resume at 500px max-width.

Stretch goals included incorporating a Google font, linking to our portfolio page (from last week’s projects) and converting the Great Idea CSS from last weekinto LESS (with variables, mixins, nesting and so on). I was able to complete the Google font stretch goal and link my portfolio.

Here’s my resume website, on GitHub Pages: Vish Singh – Full-Stack Web Development Student at Lambda School

I did a few small things for the first time that weren’t included in the MVP (minimal viable product) for the project, or the stretch goals. I included font-awesome icons for social media accounts. I added tooltips to those icons, and I made a table in HTML for the work experience section, which I also added a hover effect to that styled the row that was being hovered over. It was fun to add these, as silly and simple as they are.