Getting started with stylus_html/css_WEB-ITnose

Introduction to stylus

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

Stylus is a CSS preprocessing framework, produced in 2010 from the Node.js community. It is mainly used to provide CSS preprocessing support for Node projects, so Stylus is a new language that can create robust, Dynamic, expressive CSS. It is relatively young, and what it essentially does is similar to SASS/LESS, etc. It should have a lot to learn from, so it is similar to a script to write CSS code.

Stylus uses .styl as the file extension by default and supports diverse CSS syntax.

Stylus is more powerful in function and more closely related to js. So I chose Stylus and played with SASS for a while, mainly because this thing relied on ruby ​​to run, so I gave up using it.

Document Reference

Official Stylus API
Zhang Xinxu Chinese Translation
Try Stylus!

Stylus Installation

Global installation, you need to install it before How do you install nodejs?

$ npm install stylus -g

In this way, even after installing Stylus, you can still use Stylus normally.

Usage: stylus [options] [command] [< in [> out]]              [file|dir ...]Commands:  help <prop>     Opens help info for <prop> in                  your default browser. (OS X only)Options:  -u, --use <path>        Utilize the stylus plugin at <path>  -i, --interactive       Start interactive REPL  -w, --watch             Watch file(s) for changes and re-compile  -o, --out <dir>         Output to <dir> when passing files  -C, --css <src> [dest]  Convert CSS input to Stylus  -I, --include <path>    Add <path> 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

In the command line,

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

$ stylus --compress src/

to output compiled src/example.css. At this time, it means that you have successfully generated it. Bring the --compress parameter to indicate You generate compressed CSS files.

$ stylus --css css/example.css css/out.styl CSS converted to styl
$ stylus help box-shadow CSS property help
$ stylus --css test.css output Styl files with the same basic name

grunt generation

grunt generation is more comfortable. Specifically how to play grunt, I wrote a tutorial Grunt tutorial - front-end automation. You can learn the following.

Create two files in the stylusExample directory. These two files are essential files 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

json{  "name": "test",  "version": "1.0.0",  "description": "测试的例子",  "repository": {    "type": "git",    "url": ""  }}

Then install the necessary plug-ins. These plug-ins allow the stylus file to be automatically generated and generated into the corresponding files. in the directory. If an error is reported, you need to add sudo in front of the command line to give it maximum execution permissions.

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev: Monitor file changes and take corresponding actions. npm>>
npm install grunt-contrib-stylus --save-dev: stylus writes styl output css npm>>

Such a warning appears during installation npm WARN package.json test@1.0.0 No README data can be ignored. If it looks uncomfortable to you, you need to create a README.md file under the stylusExample directory and enter the content. You can also execute the command echo "#stylus learning" >> README.md

After the plug-in is executed, the package.json file will look like this.

json{  "name": "test",  "version": "1.0.0",  "description": "测试的例子",  "repository": {    "type": "git",    "url": ""  },  "devDependencies": {    "grunt": "^0.4.5",    "grunt-contrib-stylus": "^0.21.0",    "grunt-contrib-watch": "^0.6.1"  }}

At this time you need to use these plug-ins to complete your tasks and write your execution tasks in Gruntfile.js.

js/// 包装函数module.exports = function(grunt) {    // 任务配置,所有插件的配置信息    grunt.initConfig({        pkg: grunt.file.readJSON('package.json'),        stylus:{            build: {                options: {                    linenos: false,                    compress: true                },                files: [{                    'css/index.css': ['src/index.styl']                }]            }        },        // watch插件的配置信息        watch: {            another: {                files: ['css/*','src/*.styl'],                tasks: ['stylus'],                options: {                    livereload: 1337                }            }        }    });    // 告诉grunt我们将使用插件    grunt.loadNpmTasks('grunt-contrib-watch');    grunt.loadNpmTasks('grunt-contrib-stylus');    // 告诉grunt当我们在终端中输入grunt时需要做些什么    grunt.registerTask('default', ['watch']);};

Please read and understand the above. The directory is correct. There is no need to remind you of these. At this time, you can play with stylus

Stylus application

This is when the fun really starts.

Try Stylus!

stylus

body,html    margin:0    padding:0

is compiled into

cssbody,html {  margin: 0;  padding: 0;}

stylus: Powerful feature-rich language

-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] : 0absolute()  -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 plugin

stylus

@import 'nib'body  background: linear-gradient(20px top, white, black)

is compiled into

cssbody {  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

header    #logo        border:1px solid red

is compiled into

cssheader #logo {  border: 1px solid #f00;}

Flexible syntax (flexible usage)

stylus

body    font 14px/1.5 Helvetica, arial, sans-serif    button    button.button    input[type='button']    input[type='submit']        border-radius 5pxheader     #logo,div        font-size:14px

Compile to

cssbody {  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

ul    li a        display: block        color: blue        padding: 5px        html.ie &            padding: 6px        &:hover            color: red

Compile to

cssul 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

border-radius(val)    -webkit-border-radius: val    -moz-border-radius: val    border-radius: valbutton     border-radius(5px);

is compiled into

cssbutton {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;}

Transparent mixins

without parameters

stylus

border-radius()    -webkit-border-radius: arguments    -moz-border-radius: arguments    border-radius: argumentsbutton     border-radius: 5px 10px;

compiles to

cssbutton {  -webkit-border-radius: 5px 10px;  -moz-border-radius: 5px 10px;  border-radius: 5px 10px;}

Default parameters

No parameters

stylus

add(a, b = a)  a + badd(10, 5)// => 15add(10)// => 20

Function body

Convert the units to px through the built-in unit(), because the value is assigned to each parameter, so we can ignore the unit conversion.

add(a, b = a)  a = unit(a, px)  b = unit(b, px)  a + badd(15%, 10deg)// => 25

Multiple return values

Use the built-in unit() to change the unit into px, because the value is assigned to each parameter, so we can ignore it Unit conversion.

sizes() 15px 10pxsizes()[0]// => 15px

Variables(variables)

Common methods

stylus

font-size = 14pxbody    font font-size Arial, sans-seri

Compile into

cssbody {  font: 14px Arial, sans-seri;}

variables are placed in attributes

stylus

#prompt    position: absolute    top: 150px    left: 50%    width: w = 200px    margin-left: -(w / 2)

is compiled into

css#prompt {  position: absolute;  top: 150px;  left: 50%;  width: 200px;  margin-left: -100px;}

Block attribute access reference

stylus

#prompt    position: absolute    width: 200px    margin-left: -(@width / 2)

is compiled into

css#prompt {  position: absolute;  width: 200px;  margin-left: -100px;}

Attributes conditionally define attributes

stylus: Specify a z-index value of 1, but only if z-index was not previously specified:

position()  position: arguments  z-index: 1 unless @z-index#logo  z-index: 20  position: absolute#logo2  position: absolute

is compiled into

css#logo {  z-index: 20;  position: absolute;}#logo2 {  position: absolute;  z-index: 1;}

向上冒泡

stylus:属性会“向上冒泡”查找堆栈直到被发现，或者返回null（如果属性搞不定）下面这个例子，@color被弄成了blue.

body  color: red  ul    li      color: blue      a        background-color: @color

编译成

cssbody {  color: #f00;}body ul li {  color: #00f;}body ul li a {  background-color: #00f;}

Iteration(迭代)

stylus

table    for row in 1 2 3 4 5        tr:nth-child({row})            height: 10px * row

编译成

csstable 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(插值)

stylus

vendors = webkit moz o ms officialborder-radius()    for vendor in vendors        if vendor == official            border-radius: arguments        else            -{vendor}-border-radius: arguments#content    border-radius: 5px

编译成

css#content {  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -o-border-radius: 5px;  -ms-border-radius: 5px;  border-radius: 5px;}

Operators(运算符)

运算符优先级
下表运算符优先级，从最高到最低：

. [] ! ~ + - is defined ** * / % + - ... .. <= >= < > in == is != is not isnt is a && and || or ?: = := ?= += -= *= /= %= not if unless

@import

@import "reset.css"

当使用@import没有.css扩展，会被认为是Stylus片段（如：@import "mixins/border-radius"）。

@import工作原理为：遍历目录队列，并检查任意目录中是否有该文件（类似node的require.paths）。该队列默认为单一路径，从filename选项的dirname衍生而来。 因此，如果你的文件名是/tmp/testing/stylus/main.styl，导入将显现为/tmp/testing/stylus/。

@import也支持索引形式。这意味着当你@import blueprint, 则会理解成blueprint.styl或blueprint/index.styl. 对于库而言，这很有用，既可以展示所有特征与功能，同时又能导入特征子集。

@font-face

stylus

@font-face  font-family Geo  font-style normal  src url(fonts/geo_sans_light/GensansLight.ttf).ingeo  font-family Geo

编译成

css@font-face {  font-family: Geo;  font-style: normal;  src: url("fonts/geo_sans_light/GensansLight.ttf");}.ingeo {  font-family: Geo;}

@media

stylus

@media print  #header  #footer    display none

编译成

css@media print {  #header,  #footer {    display: none;  }}

@keyframes

stylus

@keyframes pulse    0%      background-color red      transform scale(1.0) rotate(0deg)    33%      background-color blue      -webkit-transform scale(1.1) rotate(-5deg)

编译成

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字面量(CSS Literal)

stylus

@css {  body {    font: 14px;  }}

编译成

cssbody {  font: 14px;}