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

What is the preprocessing framework of CSS stylus? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Stylus introduction

What the heck is it? For developers, the weakness of CSS is static. We need a tool that can really improve the efficiency of development, and LESS and SASS have all made some contributions in this regard.

Stylus is a CSS preprocessing framework, produced in 2010, from the Node.js community, mainly used to support CSS preprocessing for Node projects, so Stylus is a new language that can create robust, dynamic and expressive CSS. Relatively young, it essentially does things similar to SASS/LESS, etc., there should be a lot of reference, so similar to the script way to write CSS code.

Stylus defaults to .styl as the file extension and supports a variety of CSS syntax.

Stylus is functionally stronger and more closely related to js. So I chose Stylus,SASS for a while, mainly because it relied on ruby to run, so I gave up using it.

Stylus installation

Global installation, you need to install nodejs before you install this how to install search oh.

The code is as follows:

$npm install stylus-g

In this way, you can use Stylus normally even after you have installed Stylus.

The code is as follows:

Usage: stylus [options] [command] [

< in [>

Out]]

[file | dir.]

Commands:

Help Opens help info for in

Your default browser. (OS X only)

Options:

-u,-- use Utilize the stylus plugin at

-I-- interactive Start interactive REPL

-w,-- watch Watch file (s) for changes and re-compile

-o,-- out Output to when passing files

-C-- css [dest] Convert CSS input to Stylus

-I-- include Add to lookup paths

-c,-- compress Compress CSS output

-d,-- compare Display input along with output

-f,-- firebug Emits debug infos in the generated css that

Can be used by the FireStylus Firebug plugin

-l,-- line-numbers Emits comments in the generated CSS

Indicating the corresponding Stylus line

-V-- version Display the version of Stylus

-h,-- help Display help information

Generate CSS

On the command line

Create a stylusExample/, and then create a src directory in which to store stylus files, and create example.styl files in it. Then execute the following command under the stylusExample directory

The code is as follows:

$stylus-compress src/

Output compiled src/example.css, which indicates that you have successfully generated it, with the-compress parameter indicating that you have generated a compressed CSS file.

$stylus-- convert css css/example.css css/out.styl CSS to styl

Help for the $stylus help box-shadow CSS property

$stylus-- css test.css outputs .styl files with the same base name

Grunt generation

Grunt generation is quite cool, specific grunt how to play, I wrote a tutorial Grunt tutorial-front-end automation can learn the following.

Create two files under the stylusExample directory, which are prerequisites for grunt.

Package.json: used to save project metadata.

Gruntfile.js: used to configure or define tasks and load Grunt plug-ins.

Package.json content

JavaScript

{

"name": "test"

"version": "1.0.0"

"description": "examples of testing"

"repository": {

"type": "git"

"url":

}

}

Then install the prerequisite plug-ins, which allow the stylus file to be automatically generated to the corresponding file directory. If you report an error, you need to add sudo in front of the command line and give it maximum execution permission.

Npm install grunt-save-dev

Npm install grunt-contrib-watch-- save-dev: monitor file changes and take actions accordingly. Npm > >

Npm install grunt-contrib-stylus-- save-dev: stylus write styl output css npm > >

Npm WARN package.json test@1.0.0 No README data can ignore such a warning when installing. If you don't feel comfortable, you need to create a README.md file in the stylusExample directory and enter the contents. You can also command to execute echo "# stylus Learning" > > README.md

The package.json file looks like this after the plug-in is executed.

JavaScript

{

"name": "test"

"version": "1.0.0"

"description": "examples of testing"

"repository": {

"type": "git"

"url":

}

"devDependencies": {

"grunt": "^ 0.4.5"

"grunt-contrib-stylus": "^ 0.21.0"

"grunt-contrib-watch": "^ 0.6.1"

}

}

At this point, you need to use these plug-ins to complete your tasks. You need to write your execution tasks in Gruntfile.js.

JavaScript

/ / wrapper function

Module.exports = function (grunt) {

/ / Task configuration, configuration information of all plug-ins

Grunt.initConfig ({

Pkg: grunt.file.readJSON ('package.json')

Stylus: {

Build: {

Options: {

Linenos: false

Compress: true

}

Files: [{

'css/index.css': ['src/index.styl']

}]

}

}

/ / configuration information of the watch plug-in

Watch: {

Another: {

Files: ['css/*','src/*.styl']

Tasks: ['stylus']

Options: {

Livereload: 1337

}

}

}

});

/ / tell grunt that we will use the plug-in

Grunt.loadNpmTasks ('grunt-contrib-watch')

Grunt.loadNpmTasks ('grunt-contrib-stylus')

/ / tell grunt what to do when we enter grunt into the terminal

Grunt.registerTask ('default', [' watch'])

}

Pay attention to read the above, the catalogue is high, there is no need to remind you, you can play with stylus at this time.

Stylus application

This is the time to really start playing.

Try Stylus!

Stylus

CSS

Body,html

Margin:0

Padding:0

Compiled into

CSS

Body

Html {

Margin: 0

Padding: 0

}

Stylus: a powerful and feature-rich language

CSS

-pos (type, args)

I = 0

Position: unquote (type)

{args [I]}: args [I + 1] is a 'unit'? Args [I + = 1]: 0

{args [I + = 1]}: args [I + 1] is a 'unit'? Args [I + = 1]: 0

Absolute ()

-pos ('absolute', arguments)

Fixed ()

-pos ('fixed', arguments)

# prompt

Absolute: top 150px left 5px

Width: 200px

Margin-left:-(@ width / 2)

# logo

Fixed: top left

Compiled into

CSS

# prompt {

Position: absolute

Top: 150px

Left: 5px

Width: 200px

Margin-left:-100px

}

# logo {

Position: fixed

Top: 0

Left: 0

}

NibStylus plug-in

Stylus

CSS

@ import 'nib'

Body

Background: linear-gradient (20px top, white, black)

Compiled into

CSS

Body {

Background:-webkit-linear-gradient (20px top, # fff, # 000)

Background:-moz-linear-gradient (20px top, # fff, # 000)

Background:-o-linear-gradient (20px top, # fff, # 000)

Background:-ms-linear-gradient (20px top, # fff, # 000)

Background: linear-gradient (20px top, # fff, # 000)

}

Nesting (nested)

Stylus

CSS

Header

# logo

Border:1px solid red

Compiled into

Header # logo {

Border: 1px solid # f00

}

Flexible syntax (flexible usage)

Stylus

CSS

Body

Font 14px/1.5 Helvetica, arial, sans-serif

Button

Button.button

Input [type = 'button']

Input [type = 'submit']

Border-radius 5px

Header

# logo,div

Font-size:14px

Compiled into

CSS

Body {

Font: 14px/1.5 Helvetica, arial, sans-serif

}

Body button

Body button.button

Body input [type = 'button'] {

Border-radius: 5px

}

Header # logo

Header div {

Font-size: 14px

}

Flexible & (flexible &)

Stylus

CSS

Ul

Li a

Display: block

Color: blue

Padding: 5px

Html.ie &

Padding: 6px

&: hover

Color: red

Compiled into

CSS

Ul li a {

Display: block

Color: # 00f

Padding: 5px

}

Html.ie ul li a {

Padding: 6px

}

Ul li a:hover {

Color: # f00

}

Functions method

Return value

Stylus

CSS

Border-radius (val)

-webkit-border-radius: val

-moz-border-radius: val

Border-radius: val

Button

Border-radius (5px)

Compiled into

CSS

Button {

-webkit-border-radius: 5px

-moz-border-radius: 5px

Border-radius: 5px

}

Transparent mixins

Without parameters

Stylus

CSS

Border-radius ()

-webkit-border-radius: arguments

-moz-border-radius: arguments

Border-radius: arguments

Button

Border-radius: 5px 10px

Compiled into

CSS

Button {

-webkit-border-radius: 5px 10px

-moz-border-radius: 5px 10px

Border-radius: 5px 10px

}

Default parameter

Without parameters

Stylus

CSS

Add (a, b = a)

A + b

Add (10,5)

/ / = > 15

Add (10)

/ / = > 20

Function body

Units are changed to px through the built-in unit (), because the assignment is on each parameter, so we can ignore the unit conversion.

CSS Code copies content to the clipboard

Add (a, b = a)

A = unit (a, px)

B = unit (b, px)

A + b

Add (15%, 10deg)

/ / = > 25

Multiple return values

Units are changed to px through the built-in unit (), because the assignment is on each parameter, so we can ignore the unit conversion.

CSS

Sizes ()

15px 10px

Sizes () [0]

/ / = > 15px

Variables (variable)

Common methods

CSS

Stylus

Font-size = 14px

Body

Font font-size Arial, sans-seri

Compiled into

CSS

Body {

Font: 14px Arial, sans-seri

}

Variables are placed in properties

Stylus

CSS

# prompt

Position: absolute

Top: 150px

Left: 50%

Width: W = 200px

Margin-left: (W / 2)

Compiled into

CSS

# prompt {

Position: absolute

Top: 150px

Left: 50%

Width: 200px

Margin-left:-100px

}

Block attribute access reference

Stylus

CSS

# prompt

Position: absolute

Width: 200px

Margin-left:-(@ width / 2)

Compiled into

CSS

# prompt {

Position: absolute

Width: 200px

Margin-left:-100px

}

Attribute conditionally defines an attribute

Stylus: specify a z-index value of 1, but only if it was not specified before z-index:

CSS

Position ()

Position: arguments

Z-index: 1 unless @ z-index

# logo

Z-index: 20

Position: absolute

# logo2

Position: absolute

Compiled into

CSS

# logo {

Z-index: 20

Position: absolute

}

# logo2 {

Position: absolute

Z-index: 1

}

Bubbling upward

Stylus: the property "bubbles up" to find the stack until it is found, or returns null (if the property doesn't work). In the following example, @ color is turned into blue.

CSS

Body

Color: red

Ul

Li

Color: blue

A

Background-color: @ color

Compiled into

CSS

Body {

Color: # f00

}

Body ul li {

Color: # 00f

}

Body ul li a {

Background-color: # 00f

}

Iteration (iterative)

Stylus

CSS

Table

For row in 1 2 3 4 5

Tr:nth-child ({row})

Height: 10px * row

Compile

C#

Table tr:nth-child (1) {

Height: 10px

}

Table tr:nth-child (2) {

Height: 20px

}

Table tr:nth-child (3) {

Height: 30px

}

Table tr:nth-child (4) {

Height: 40px

}

Table tr:nth-child (5) {

Height: 50px

}

Interpolation (interpolation)

Stylus

CSS

Vendors = webkit moz o ms official

Border-radius ()

For vendor in vendors

If vendor = = official

Border-radius: arguments

Else

-{vendor}-border-radius: arguments

# content

Border-radius: 5px

Compiled into

CSS

# content {

-webkit-border-radius: 5px

-moz-border-radius: 5px

-o-border-radius: 5px

-ms-border-radius: 5px

Border-radius: 5px

}

Operators (operator)

Operator precedence

The following table shows operator precedence, from highest to lowest:

.

[]

! ~ +-

Is defined

* /%

+-

.....

=

< >

In

= = is! = is not isnt

Is a

& & and | | or

?:

=: =? + =-= * /% =

Not

If unless

@ import

@ import "reset.css"

When using @ import without a .css extension, it is considered a Stylus fragment (e.g. @ import "mixins/border-radius").

@ import works by traversing the directory queue and checking for the file (node-like require.paths) in any directory. The queue defaults to a single path, derived from the dirname of the filename option. Therefore, if your file name is / tmp/testing/stylus/main.styl, the import will appear as / tmp/testing/stylus/.

@ import also supports indexed forms. This means that when you @ import blueprint, it will be understood as blueprint.styl or blueprint/index.styl. This is useful for libraries to show all features and functions while importing a subset of features.

@ font-face

Stylus

CSS

@ font-face

Font-family Geo

Font-style normal

Src url (fonts/geo_sans_light/GensansLight.ttf)

.ingeo

Font-family Geo

Compiled into

CSS

@ font-face {

Font-family: Geo

Font-style: normal

Src: url ("fonts/geo_sans_light/GensansLight.ttf")

}

.ingeo {

Font-family: Geo

}

@ media

Stylus

CSS

@ media print

# header

# footer

Display none

Compiled into

CSS

@ media print {

# header

# footer {

Display: none

}

}

@ keyframes

Stylus

CSS

@ keyframes pulse

0%

Background-color red

Transform scale (1. 0) rotate (0deg)

33%

Background-color blue

-webkit-transform scale (1.1) rotate (- 5deg)

Compiled into

CSS

@-moz-keyframes pulse {

0% {

Background-color: # f00

Transform: scale (1) rotate (0deg)

}

33% {

Background-color: # 00f

-webkit-transform: scale (1.1) rotate (- 5deg)

}

}

@-webkit-keyframes pulse {

0% {

Background-color: # f00

Transform: scale (1) rotate (0deg)

}

33% {

Background-color: # 00f

-webkit-transform: scale (1.1) rotate (- 5deg)

}

}

@-o-keyframes pulse {

0% {

Background-color: # f00

Transform: scale (1) rotate (0deg)

}

33% {

Background-color: # 00f

-webkit-transform: scale (1.1) rotate (- 5deg)

}

}

@ keyframes pulse {

0% {

Background-color: # f00

Transform: scale (1) rotate (0deg)

}

33% {

Background-color: # 00f

-webkit-transform: scale (1.1) rotate (- 5deg)

}

}

CSS literals (CSS Literal)

Stylus

CSS

@ css {

Body {

Font: 14px

}

}

Compiled into

CSS

Body {

Font: 14px

}

After reading the above, have you mastered the method of CSS's preprocessing framework stylus? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.