stylus 在静态页面上的使用经验

Posted 骇客公社

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了stylus 在静态页面上的使用经验相关的知识,希望对你有一定的参考价值。

前段时间做vue项目,用到了css的提升开发效率的工具stylus,感觉很好用。现在又开始写静态页面了,于是将强大的stylus拿过来继续用。于是就写了这篇使用经验,算是自己总结一下。

stylus的安装

使用前,我们需要在终端里面进行全局安装stylus,这样在项目中可以使用stylus将styl文件解析成css(当然也可以将css反编译成styl文件)。

$ npm install stylus -g

可以使用命令查看是否安装成功了(大写)

 

$ stylus -V

 

安装完成之后你可以看到下面一些常用的参数

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  

 -w、-o、-c是我们会常用到的

-w :监听文件,只要原文件改变,解析后的目标文件也会同时改变
-o :指定目标文件,不指定的话就是和源文件同名
-c :压缩文件,将源文件解析后并压缩

 stylus的命令行操作

安装完成后,我们进入项目的根目录(最好是style这级目录),假如我们有一个style目录,里面有一个example.styl文件(stylus文件的后缀名就是styl),对文件进行解析。

// 将style目录下面的styl文件都解析为相同文件名都css文件,并放在style目录里面
// 并且监听文件
$ stylus -w style/

// 将style目录下面的styl文件都解析为相同文件名都css文件,并放在style目录里面
// 并对css文件进行压缩
// 并且监听文件
$ stylus -w -c style/

// 将style目录下面的styl文件都解析为指定的文件名css,与style同级目录
// 并且监听文件
$ stylus -w  style/ -o main.css

 stylus的基本使用语法

所有的前期准备工作完成,现在开始对stylus进行基本使用,看看效果

stylus文件

stylus文件

  body
    ul
      color: red
      font-size: 20px
      li
        color: yellow
        font-size: 36px

css文件
body ul { color: #f00; font-size: 20px; } body ul li { color: #ff0; font-size: 36px; }

 就是这么简单,这么方便。这样就可以节省很多写选择器的时间了,这样也不容易出错了。

知道什么是stylus文件格式后,我们来看看一些在平时开发中常用到的一些技巧型的东西

&符号

&符号,表示同级元素,即和&同一列样式的所有者

// style文件

ul
  li
    color: red
    &:first-child
      font-size: 20px

// css文件

ul li {
  color: #f00;
}
ul li:first-child {
  font-size: 20px;
}

 @符号

@name,表示继承前面父级或自己已经定义过样式的name的样式

// stylus文件

.list
  background: red
  .part
    background: @background

// css文件

.list {
  background: #f00;
}
.list .part {
  background: #f00;
}

Variables(变量)

除了可以使用@来使用定义好的样式外,我们还可以给变量赋值样式,让好在后面调用

//stylus文件

font-size = 14px
body
    font font-size Arial, sans-seri


// css文件

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

 可以将变量放在属性中

// stylus文件

#prompt
    width: w = 200px
    margin-left: -(w / 2)

// css文件

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

 有条件的使用属性

// stylus:指定z-index值为1,但是,只有在z-index之前未指定的时候才这样:

// stylus文件

position()
  position: arguments
  z-index: 1 unless @z-index

#logo
  z-index: 20
  position: absolute

#logo2
  position: absolute

// css文件

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

 函数方法

我们可以在stylus文件里面定义函数,然后在后面调用(当没有参数的时候,可以直接使用arguments来代替)

// stylus文件

border-radius(val)
    -webkit-border-radius: val
    -moz-border-radius: val
    border-radius: val

button 
    border-radius(5px);

// css文件

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

 Interpolation(插值)

// stylus文件

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

// css文件

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

 @import

引入外来stylus文件,就可以使用里面定义的函数和变量来

@import(‘main.css‘) 当没有指定文件后缀的时候默认为stylus

@import(‘style/‘) 当文件名都没有指定时,默认为文件夹里面的main.styl或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);
  }
}

 

以上是关于stylus 在静态页面上的使用经验的主要内容,如果未能解决你的问题,请参考以下文章

Gulp 开发 HTML 静态页面和 Less 实时更新

WEB页面采集器编写经验之一:静态页面采集器

VUE -- stylus入门使用方法

stylus

片段中的 EditText 上的空指针异常 [重复]

支持动态或静态片段的不同屏幕尺寸?