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

This article will explain in detail the example analysis of preprocessor, post-processor and selector in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Css preprocessor

Css preprocessor: use a special programming language to add some programming features to CSS, generate files with CSS as the target, and then developers just use this language for coding work.

Problems with css:

The syntax is not strong enough, for example, the inability to nest writing leads to the need to write many repetitive selectors in modular development.

Without variables and reasonable style reuse mechanism, logically related attribute values must be output repeatedly in the form of literals, which makes it difficult to maintain.

Therefore, the preprocessor is required to provide the style layer reuse mechanism missing by CSS, reduce redundant code, and improve the maintainability of style code.

At present, the three mainstream processors are Less, Sass and Stylus.

Comparison of Sass, LESS and Stylus

Installation

Installation of 1.sass

First install ruby. It is recommended to install it on disk C, and select "Add Ruby executables to your PATH" during installation.

After the ruby installation is successful, launch the Command control panel of Ruby and enter the command

Gem install sass

Sass will be installed automatically when you enter.

Installation of 2.Less

There are two types: client-side and server-side installations.

a. Client

You only need to load a master "less.js" of the Javascript script file on the official website, and then add the following code to the HTML where we need to introduce the LESS source file:

b. Server

Install LESS using node's package manager (npm), and after successful installation, you can compile the LESS file in the Node environment.

First install node. After the installation is successful, launch the Command control panel of node and enter the command

$npm install less

Less will be installed automatically when you enter.

Installation of 3.Stylus

The installation of Stylus is very similar to the installation of LESS on the server side. Install Node first. Enter the command in the Command control panel of Node:

$npm install stylus

Stylus will be installed automatically when you enter.

Convert Sass, LESS, and Stylus to css files

1.sass

First create a Sass file in the project, which in this case is named "style.scss" and put it in the corresponding project style

Start the Command control panel of Ruby and find the Sass file that needs to be translated

Enter the following command in the corresponding directory:

Sass style.scss style.csssass-watch style.scss:style.css

An automatic "style.css" file is generated and the corresponding CSS style file is automatically updated.

2.Less (understand)

Translate through its own commands in the installed Node JS environment.

$lessc style.less

The above command passes the compiled CSS to stdout, which you can save to a file:

$lessc style.less > style.css

3.Stylus (understand)

Stylus is executable, so Stylus can convert itself into CSS. Stylus can be read from "stdin" to "stdout", so Stylus can translate the source file like this:

$stylus-compress some.css

Like Sass, Stylus accepts translation of a single file and an entire directory at the same time. For example, a directory named "css" will compile and output ".css" files in the same directory.

$stylus css

The following command will be output to ". / public/stylesheets":

$stylus css-out public/stylesheets

You can also translate multiple files at the same time:

$stylus one.styl two.styl

If your browser has Firebug installed, you can use the FireStylus extension.

$stylus-firebug

Processing of variables

Less: variable handling-lazy loading. All Less variables are calculated based on the last defined value of this variable.

Less

@ size: 10pxwit.box {width: @ size;} @ size: 20px.ball {width: @ size;}

Output:

.box {width: 20px;} .ball {width: 20px;}

Stylus

Size = 10px.box width: sizesize = 20px.ball width: size

Output:

.box {width: 10px;} .ball {width: 20px;}

Sass handles variables in the same way as Stylus, and the value of the variable is output based on the most recent definition. This actually represents two ideas: Less tends to be closer to the declarative form of CSS, and the computing process weakens the timing of invocation, while Sass and Stylus tend to be imperative.

If you introduce a third-party style library into Less, you can change the style by reconfiguring variables

Pros: processing such as stylus and sass is not easily affected by multiple third-party library variable name conflicts, because a variable cannot affect the output style before it is defined

Css post-processor

Reference link

Css post-processor processes css and finally generates css preprocessor, which belongs to css preprocessor in a broad sense.

For example: css Compression tool (clean-css), Autoprefixer (automatically handles compatibility issues based on browser support data on Can I Use)

Autoprefixer:

Standard css:

.container {display: flex;} .item {flex: 1;}

After compatibility processing

.container {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display: flex;}. Item {- webkit-box-flex: 1There's webkitMurflex: 1There's MsMuiflex: 1WTFlex: 1;}

Advantages: use CSS syntax, easy to modularize, and be close to the future standard of Css

Disadvantages: limited logical processing capacity

Frame example

PostCss: is a tool for transforming styles based on JS plug-ins. PostCSS plug-ins can be like preprocessors, which can optimize and Autoprefix code, add future syntax, add variables and logic, provide a complete grid system, provide shortcuts to coding, and so on.

Advantages:

A variety of functional plug-ins create an ecological plug-in system

Modularize according to the characteristics you need

Fast compilation

Create your own plug-ins with accessibility

You can use it like a normal CSS.

The ability to create a library without relying on any preprocessor

Seamless deployment can be built with many popular tools

Font-family

Font-family is used to specify the font family of elements.

Font-family can save multiple font names as a "fallback" system. If the browser does not support the first font, the next one will be tried. That is, the value of the font-family attribute is a priority table of the font family name or / and class family name used for an element. The browser uses the first value it can recognize.

Principles defined by font-family:

Usually, the declaration of the English font will be made first, and the best English font will be selected, which will not affect the choice of the Chinese font, followed by the Chinese font declaration.

Taking into account multiple operating systems, fonts under different systems indicate:

When using some very new fonts, consider backward compatibility, taking into account some very old operating systems, you can use the font family series serif and sans-serif ending. Provide fallback solution for low-level system

Css selector

Reference link

Selector

Classification: base selector, combination selector, attribute selector, pseudo-class selector, pseudo-element, etc.

Base selector:

The id selector (# footer) matches all elements whose id attribute is equal to footer. Class selector (.info) that matches all elements that contain info in the class attribute. A universal selector (*) that matches any element. The tag selector (E) matches all elements that use the E tag. Sibling element selector (CSS3 F), which matches any sibling F element after E element (sibling F).

Attribute selector: (e for element, attr for attribute, and val for attribute value.)

The E [attr] selector, which matches all E elements with the attr attribute, regardless of its value. E [attr=val] matches all E elements whose attr attribute value is val. E [attr~=val] matches a list of characters that have an attr attribute and whose values are separated by spaces. E [attr | = val] matches an E element that has an attr attribute whose value is separated by a connector (-) and begins with val. E [attr^ = "val"], the element whose value of the attribute attr begins with "val" (CSS3). E [attr$= "val"], the element whose value of the attribute attr ends in "val" (CSS3). E [attr*= "val"], the value of the attribute attr contains the element of the "val" string (CSS3).

Combination selector

Multi-element selector (E, F), which matches many E elements or F elements. The descendant selector (E F) matches all F elements that belong to the descendants of E elements, and E and F are separated by spaces. The child element selector (E > F) matches the child element F of all E elements. The adjacent selector (E + F) matches all sibling elements F immediately after the E element.

Pseudo-class selector:

E:link, matching all unclicked links. E:visited, matching all the links that have been clicked. E:active, which matches the E element that has been pressed down by the mouse and has not been released. E:hover, which matches the E element over which the mouse hovers. E:focus, which matches the E element that gets the current focus.

Structural pseudo-class: E:nth-child (n), matching the nth child element of its parent element, the first one is numbered 1.

! Important attribute

1. It is used to solve the situation that IE has deviation from some CSS specifications.

For example, the effect in IE is always different from that of other browsers such as firefox,opera, resulting in page layout dislocation, which is caused by the bug of IE's interpretation of the distance between boxes. In this case, we can use! important to help solve the problem.

.myclass {margin LeftVue 20pximportant; margin-left:40px;}

This can only be used when two styles with the same name appear at the same time, when the IE browser is recognized

2. If you define a style A, such as font-size, you don't want to overwrite the font-size with style A later, you can also use! important. And if the new style is also used! important will still be forced to overwrite.

.A {font-size:12px! important;} .A {font-size:14px; / / will not take effect} .A {font-size:14px! important; / / effective}

Priority

! Important > id selector > class, attribute, pseudo-class selector > tag selector

The higher the weight, the higher the priority, the same weight, and the higher the priority defined later.

The browser looks for elements from right to left, and the advantage is to quickly filter out some unimportant style rules and elements.

For example: p#pBox p span.red {color:red;}, the search order of the browser is as follows: first look for all the span elements of class='red' in html, then find out whether there is a p element in the parent element of p, and then determine whether there is a p element whose id is pBox in the parent element of p, and match if they all exist.

Attribute inheritance

CSS attribute inheritance: the style of the outer element, which is inherited by the inner element. The styles of multiple outer elements will eventually be "superimposed" on the inner elements.

Not inheritable: display, margin, border, padding, background, height, min-height, max-height, width, min-width, max-width, overflow, position, left, right, top, bottom, z-index, float, clear, table-layout, vertical-align, page-break-after, page-bread-before and unicode-bidi.

All CSS text properties are inherited:

Color 、 font-size 、 font-family 、 font-style 、 font-weight

Text-align 、 text-decoration 、 text-indent 、 letter-spacing 、 line-height

Tip: the CSS attribute in will be inherited by all child elements.

According to the principle of proximity of priority, in the case of the same weight, the nearest style definition is the standard, and the loading style is subject to the last loaded location.

The difference between ID selector and Class selector

ID selector: there can be only one ID per element, and only one element per page can use this ID.

Class selector: multiple elements can share the same class, and an element can have multiple classes

Sprite diagram principle

Principle: synthesize a small icon into a large image, set background-image to the element's public css as the composite image, so that each element will take the composite image as the background, and the page loads only one composite image, and then fine-tune its background-position for each element individually. Merge multiple requests into one.

Background-position

Sets the starting position of the background image.

The background-position property sets the location of the original background image (defined by background-image), which means that the premise of using this property is that the background original image background-image must be set.

Attribute values of background-position:

Direction: X-axis: left | right | center; y-axis: top | bottom | center

Use the percentage to set the property value, and determine the starting position of the picture by the value obtained by multiplying the length and width of its own container minus the length and width of the picture by the percentage.

Value: X axis direction: X px; Y axis direction: X px

This is the end of this article on "sample analysis of preprocessors, postprocessors and selectors in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.