Home > Article > Web Front-end > Getting started with stylus_html/css_WEB-ITnose
Getting started with stylus_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:271505browse
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;}