3. CSS Preprocessor
CSS preprocessors are extension languages that compile into CSS.
They add functionalities to CSS such as variables, mixins and nested inheritance.
.title{
color : #f938ab;
}
.special{
color : #f938ab;
}
@color : #f938ab;
.title{
color:@color;
}
.special{
color:@color;
}
6. PostCSS
PostCSS is a tool for transforming CSS with JS plugins.
These plugins can support variables and mixins, transpile future CSS syntax, inline
images, and more.
7. Autoprefixer
●PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from
Can I Use.
●Working with Autoprefixer is simple: just forget about vendor prefixes and write
normal CSS according to the latest W3C specs.
●You don’t need a special language (like Sass) or remember where you must use
mixins.
8. Autoprefixer
Write Pure CSS
a {
display: flex;
}
a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
10. Postcss-cssnext
● PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax
today.
● It transforms new CSS specs into more compatible CSS so you don't need to wait for
browser support.
14. PreCSS
● PreCSS is a tool that allows you to use Sass-like markup in your CSS files.
● Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.
23. CSS Modules
● A CSS Module is a CSS file in which all class names and animation names are scoped
locally by default.
●A way to scope CSS to a component and escape the global namespace hell.
24. CSS Modules
JS
import styles from "./styles.css";
element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`;
HTML
<h1 class="_styles__title_309571057"> An example heading </h1>
CSS
._styles__title_309571057 { background-color: red; }