A Look Into Smarter Front End Development

For some front-end developers, pride in writing good front-end code by hand and a reluctance in letting other people or systems muddle with code will always remain. After all, it takes a lot of time, effort, and practice to hone good development skills. Time, effort, and practice that can’t be replicated by just anyone or any tool.

Yet, when new development tools stepped into the game, smart developers began to see certain tools and approaches as a powerful ally, rather than a threat to expertise. Allowing us to take a new and forward thinking approach to development, these tools give leading front-end developers the chance to work smarter, more efficiently, and end up with code that is much cleaner with less effort.

Here are a few new approaches we’ve adopted at Envano that have transitioned us from the old, traditional way of coding to new, more efficient methods that not only make our jobs easier, but benefit our clients.

Sass (short for Syntactically Awesome Stylesheets)

A language that extends CSS with super powers. According to the Sass website, it is “a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” Sass is the preferred CSS preprocessor here at Envano simply because it allows us to write clean and efficient CSS.

Variables

One of the key features of Sass is its ability to create variables that can easily use throughout stylesheets. Take a look at this basic example:

/* Variables are declared here*/ 
$envano-purple:#452f63;
$envano-green:#abd351;
$font-impact: Impact, Charcoal, sans-serif;

/*page styles */
body {
  padding: 1em;
}
h1 {
  font-family: $font-impact;
  color: $envano-purple;
}

div {
  display: block;
  float: left;
  width: 10em;
  height: 10em;
  margin: .5em;
}
div:nth-of-type(2n + 2) {
  background: $envano-green;
}
div:nth-of-type(2n + 1) {
  background: $envano-purple;
}

The example above shows our colors and font being declared in variables that are easy to understand, they then get reused within several selectors. Variables allow us the to update their value at any time with the peace in mind that it will update anywhere it’s being used. In vanilla CSS you’d have to manually change the value of the property which, depending on the size of your stylesheet,  can be a painful task.

Mixins

Mixins are another great feature from Sass. They allow us to create reusable chunks of code in a similar way you’d create functions in Javascript or other programming language. Once again, it is easier to manage one block of code than several similar blocks used throughout your stylesheets. In the example below we look at how we can efficiently create simple buttons using a mixin:

/*  mixing to create button */
@mixin button() {
  background: #0974d8;
  display: block;
  width: 10em;
  padding: .5em 0;
  text-align:center;
  text-decoration: none;
  color: white;
  margin: .5em;
 
} 

/* How to use the mixing */

.button-1 {
  @include button();
}
.button-2 {
  @include button();

}
.button-3 {
  @include button();

}
.button-4 {
  @include button();
}

As you can see in the example, we wrapped all your declarations inside a mixin call button and then it the mixin gets called one each selector. You may be thinking of ways this could be done with vanilla CSS so lets kick it up a notch by allowing our mixin to accept variables.

/*  mixing to create button */
@mixin button($color) {
  background: $color;
  display: block;
  width: 10em;
  padding: .5em 0;
  text-align:center;
  text-decoration: none;
  color: white;
  margin: .5em;
 
} 

/* How to use the mixing */

.button-1 {
  @include button(#d84a58);
}
.button-2 {
  @include button(gray);

}
.button-3 {
  @include button(green);

}
.button-4 {
  @include button(blue);
}

On this example we improved our mixin by allowing in custom colors. This will give use the option to easily create buttons of different colors.

We are just scratching the surface of Sass by using some of its capabilities. Sass also allows you to nest CSS selectors, import partials, use math operators, and more. Check out the Sass offical page and The Sass Way to learn more.

Prepos

Prepos is a powerful web development tool that we’ve recently adapted into our workflow. Prepros is “a web design & development tool that does all the heavy lifting needed to preprocess, optimize and test your sites and keeps your workflow supercharged.” It compiles Sass and other preprocessors like LESS, Stylus, and Markdown. Prepros automatically scans files on a given project directory and identifies the file types based on their extensions. Once a file type is recognize, Prepos will provide options like auto compile, minify, automatic browser refresh, and others depending on the file type.