Produce Maintainable CSS With Sass

Different displays for different browsers

Our site looks good when you check it out in your browser but not necessarily everyone else’s. We’ve developed it using Chrome but someone else might use Firefox, Opera...or Internet Explorer (gasp). 😱

The point is, some CSS properties will display differently on different browsers, and you want everyone visiting the site to have a predictable and accurate experience.  For older, more established properties, such as border or margin, there’s nothing to worry about; they have been standardized and work uniformly across browsers. But newer properties, such as grid or  flexbox , aren’t as straightforward.

The vendors who make your browsers, such as Google and Mozilla, don’t want to wait for the cool new stuff to be standardized before they implement it. Instead, they make their own version of it, adding a prefix to differentiate it from other browser’s implementations. Eventually, the new property will be standardized and work the same across all browsers, removing the need for prefixes. Until then, you need to use vendor prefixes in your code.

When using flexbox, rather than just defining thedisplay  property asflex , you should be writing out all of the vendor prefixes as well:

.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Now our header will display uniformly on Chrome, Safari, Firefox, Opera, and Microsoft Edge! I know, we haven’t done that at all so far. And we’ve written a lot of code. And now we have to go back and update all of it. And that seems like a lot of work.

Don’t worry, nobody does. Vendor prefixing is tedious and constantly changing. Since the standards are constantly changing, you need to look them up every time you write CSS to ensure you’re writing compliant code.

“Autoprefixer” is a plugin that can save you from the monotony of-webkit- and-moz- . It does exactly what it sounds like: automatically add prefixes to your CSS. All you do is supply it with a CSS sheet, and it will read through it and add vendor prefixes where needed.

Installing Autoprefixer

So, how do you get this sanity-saving plugin up and running? Open the terminal in VS Code and use npm to install it, as well as postcss and its companion postcss-cli, a command line tool that you’ll use to run Autoprefixer. The process is pretty much the same as installing Sass, only you’re installing three packages at once. You can install as many at a time as you’d like, each separated by a space:

npm install autoprefixer postcss postcss-cli -g

 Once npm has downloaded and installed the packages, you need to jump back into package.json  and add a new script for npm to execute, just like when you installed Sass. After your “sass” script, add a new script named “prefix”:

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix":
  },
  "author": "",
  "license": "ISC",
}

And inside the script, you need to tell npm to use the new  postcss  package you've just installed, as well as where to find your compiled CSS file:

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix": "postcss ./public/css/style.css"
  },
  "author": "",
  "license": "ISC",
}

 After you’ve told npm which package to use and where to find the CSS file, you need to tell the  postcss package to use Autoprefixer by implementing its --use flag followed by autoprefixer:

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix": "postcss ./public/css/style.css --use autoprefixer"
  },
  "author": "",
  "license": "ISC",
}

And then, finally, you need to tell it where to put your new, prefixed, CSS sheet:

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix": "postcss ./public/css/style.css --use autoprefixer -d ./public/css/prefixed/"
  },
  "author": "",
  "license": "ISC",
}

Now your prefixing script is complete! All that’s left to do is tell Autoprefixer how far back you want it to cover in your browser compatibility. By default, Autoprefixer will only look at the previous version of the major browsers to figure out which vendor prefixes to add to your sheets. But you want to make sure that people with slightly older versions of browsers will be covered as well. Let’s tell Autoprefixer to look at the last four versions of the common browsers when it checks the compliance of our CSS sheets. Right after our scripts, let’s add a new key named  browserslist :

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix": "postcss ./public/css/style.css --use autoprefixer -d ./public/css/prefixed/"
  },
  "author": "",
  "license": "ISC",
  "browserslist": 
}

 And then givebrowserslist a value of last 4 versions :

{
  "name": "joeblow",
  "version": "1.0.0",
  "description": "Joe Blow's web portfolio",
  "main": "index.js",
  "scripts": {
    "sass": "sass ./sass/main.scss:./public/css/style.css -w --style compressed",
    "prefix": "postcss ./public/css/style.css --use autoprefixer -d ./public/css/prefixed/"
  },
  "author": "",
  "license": "ISC",
  "browserslist": "last 4 versions"
}

Now you're ready to auto-prefix your CSS! 🤘

 Let's jump into the terminal and run the prefix  script:

npm run prefix

The script pops up in the command line interface, and, a moment later, it’s all done!

Take a look at the new, prefixed, CSS and check out the .header block:

.header {
  background: #15DEA5;
  height: 10rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

Now our website will display properly and uniformly across all compatible browsers.

Our website is ready for the general public! It’s responsive and compliant. And maintaining it in the future will be so much simpler using Sass.

Let's recap!

•  Some CSS properties require vendor prefixes and will display differently on different browsers. 

• Use the plugin Autoprefixer to automatically add prefixes to your CSS.

• Install Autoprefixer using the command line, and be sure to indicate how many older browser versions you would like it to cover! 

Bonus end of part challenge

Use loops and maps to create modifiers

You know what they say, practice makes perfect!

The following is completely optional, but is great practice at creating maps and using them with  @each loops, which can help save time and keep your code maintainable.

The challenge is this: automate the creation of modifiers that change the font color of  .article__headline  to the following color values:

1. #cc8624 (orange)

2. #cc2475 (pink)

3. #2469cc (blue)

4. #24cc24 (green)

Put the color values into a map, giving each a key, then use an@each loop to generate selectors with the following structure:

.article__heading--/*colour name goes here*/ {
    color:/*colour values goes here*/;
} 

If you're feeling a bit fuzzy on maps, you can brush up on them in the previous chapters! 😀