Shulou(Shulou.com)06/03 Report--

This article mainly explains "what is postcss". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is postcss".

Why use postcss?

With the development of technology, css has developed to the third stage where css3.css3 can support more dynamic effects. Most of the animation, transition, computing and other functions that used to be achieved with js can be achieved with css, and the performance is better. Of course, with the needs of the business, in the process of writing css, in order to make css have the reusability of js, flexibility, modular development and better management of style files, css frameworks like sass emerge as the times require. Css preprocessor Sass

Sass can address some of css's shortcomings, including, but not limited to:

1. Variables: declare a variable and use it in multiple places

$content: "Non-null content"; .main {content: $content;} compiled to .main {content: "Non-null content";}

two。 Nesting: it can better clarify the hierarchical relationship between parents and children, facilitate modification and search, and reduce style naming.

.main {

.redbox {background-color: # ff0000; color: # 000000;}

}

Compile to

.main .redbox {

Background-color: # ff0000; color: # 000000

}

3. Reference mixed style: one definition, multiple uses

Before compilation:

@ mixin clearfix {display: inline-block; &: after {content: "."; display: block;height: 0 position clear: both;visibility: hidden;}} .box {@ include clearfix}

Compiled to:

.box {display: inline-block;} .box: after {content: "."; display: block;height: 0 clear: both;visibility: hidden;}

4. Function instructions: start programming like js

$grid-width: 40pxboot guttercolor width: 10pxcandidate function grid-width ($n) {@ return $n * $grid-width + ($n-1) * $gutter-width;}. Sidebar {width: grid-width (5);} compiled to .sidebar {width: 240px;}

The above four are the most common. For more usage, please go to the Sass website for more information.

Css preprocessors allow front-end developers to greatly speed up css development, as well as less,Stylus, which is similar to the sass class.

Talk about some of the problems encountered in using sass

1. Based on Ruby, Ruby must be installed to use sass, which is internally compiled using Ruby.

two。 Need to install node-sass. At present, gulp,webpack is used in the front end, so if you use sass, webpack build must install sass-loader, and sass-loader depends on node-sass. You should know that node-sass installation is extremely slow, especially when using window system development, npm

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.