SASS with PostCSS pipeline - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main role of PostCSS in a SASS build pipeline?

Consider a build process where SASS files are compiled to CSS, then processed by PostCSS. What is the primary purpose of PostCSS in this setup?

A To compile SASS syntax into standard CSS

B To add vendor prefixes and optimize the compiled CSS for browser compatibility

C To minify JavaScript files linked in the project

D To convert HTML files into CSS stylesheets

💡 Hint

Think about what happens after SASS compilation before the CSS is sent to browsers.

PostCSS is used after SASS compilation to transform CSS with plugins, such as adding vendor prefixes for better browser support and optimizing CSS. It does not compile SASS or handle JavaScript or HTML.

📝 Syntax

intermediate

Which PostCSS plugin configuration correctly adds vendor prefixes in a SASS pipeline?

Given a PostCSS setup, which plugin configuration will correctly add vendor prefixes to the CSS output from SASS?

SASS

module.exports = {
  plugins: {
    // Which plugin here?
  }
};

A "autoprefixer": {}

B "cssnano": {}

C "postcss-import": {}

D "stylelint": {}

💡 Hint

Look for the plugin that automatically adds browser prefixes.

"autoprefixer" is the PostCSS plugin that adds vendor prefixes to CSS rules. "cssnano" minifies CSS, "postcss-import" handles imports, and "stylelint" is for linting CSS.

❓ rendering

advanced

What will be the final CSS output after SASS and PostCSS processing?

Given the following SASS code and PostCSS with autoprefixer enabled, what is the final CSS output?

SASS

$main-color: #3498db;

.button {
  display: flex;
  background-color: $main-color;
  user-select: none;
}

A

.button {
  display: -webkit-flex;
  background-color: #3498db;
  user-select: none;
}

B

.button {
  display: flex;
  background-color: $main-color;
  user-select: none;
}

C

.button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #3498db;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

D

.button {
  display: flex;
  background-color: #3498db;
  user-select: none;
}

💡 Hint

Remember autoprefixer adds vendor prefixes for better browser support.

The SASS variable is replaced with its value. Autoprefixer adds vendor prefixes for display: flex and user-select properties to support older browsers.

❓ selector

advanced

Which CSS selector is generated by this nested SASS code after PostCSS processing?

Given this SASS snippet, what is the correct CSS selector generated?

SASS

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
      &:hover {
        color: red;
      }
    }
  }
}

A .nav ul li:hover { color: red; }

B .nav ul:hover li { color: red; }

C .nav ul li & :hover { color: red; }

D .nav:hover ul li { color: red; }

💡 Hint

Look at how nested selectors combine in SASS.

The &:hover inside li means the hover state of li. So the full selector is .nav ul li:hover.

❓ accessibility

expert

How can PostCSS help improve accessibility in CSS generated from SASS?

Which PostCSS plugin or technique can be used to enhance accessibility by improving focus styles in CSS output from SASS?

A Using <code>stylelint</code> to automatically add ARIA attributes in CSS

B Using <code>cssnano</code> to minify CSS and remove all focus styles

C Using <code>postcss-import</code> to import external CSS files

D Using <code>postcss-focus-visible</code> plugin to apply focus styles only when keyboard navigation is used

💡 Hint

Think about focus styles that help keyboard users without distracting mouse users.

postcss-focus-visible adds support for the :focus-visible pseudo-class, which shows focus outlines only when users navigate with keyboard, improving accessibility. Other plugins do not handle focus styles or ARIA attributes.