The introduction of "front-end development" Optimization code, the advantages of CSS precompiled language, the use of stylus

Preface: I have to admit that at the very beginning of the day, I was very much against the pre-compilation of CSS, which was wrong. Generally in the process of page writing, I will need to reset the CSS in the RESET.CSS, will need to be reused to put into the public.css, for a few commonly used data, such as font font-10,font-12,font-24,font-36, for margin margin-top-10, Margin-bottom-10 and so on, it is very convenient to modify, but after watching (forgetting the title in a moment), reducing the introduction can optimize the page performance.

As we all know, the browser works, it sends a request to the server, the server returns the requested file, then obviously the fewer files the better. The sprite diagram is designed to reduce the client sending requests to the server.

It is very time-consuming and inconvenient to copy the common CSS file into the desired file in CSS, and the precompiled language can solve the problem, so it is only necessary to introduce the current page to the CSS file in the page reference.

Here's an introduction to the Stylus precompiled language.

First, environmental installation

The installation of stylus depends on the NODEJS environment, so it is necessary to install the NODEJS environment first, this is how to install in the previous article has written.

Simple to take, is to enter the Nodejs official website, download the latest version of the homepage display, installation, completed after the cmd command line, entered into the current directory folder.

Second, stylus installation

Enter the command in the Control Panel, NPM install Stylus-g

NPM Install Stylus--save-dev

Iii. Grunt build tools and gulp build tools

Grunt more complex, here is just a brief introduction to Gulp, in the previous Introduction Nodejs blog should have mentioned gulp automated building tools. Once the installation is complete, a gulpfile.js file is required, and entering gulp directly under the root directory launches the default task command. You can write another default to invoke, or you can enter the calling task name at the command line.

var gulp = require (' gulp ');
var stylus = require (' Gulp-stylus ');
Gulp.task (' stylus ', function () {  return gulp.src ('./assets/stylus/**/*.styl ')  . Pipe (Stylus ())  . PIPE ( Gulp.dest ('./assets/css ');});

Iv. Important grammar

Import: @import, (This is why I suddenly repent!!!!) ）

@import "Reset.css"

Can import CSS can import stylus, when there is no suffix, you will think that the import is stylus

@import "Reset"

More syntax can refer to http://www.zhangxinxu.com/jq/stylus/import.php

The introduction of "front-end development" Optimization code, the advantages of CSS precompiled language, the use of stylus