正文 

当前位置： 首页 > 程序 > java教程

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

骇客公社 骇客公社     2022-10-30     587

关键词：

前段时间做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);

 

vue--stylus入门使用方法

sizes()15px10pxsizes()[0]//=>15px stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自... 查看详情

在使用自定义中间件时，快速 js 上的静态服务无法正常工作

】在使用自定义中间件时，快速js上的静态服务无法正常工作【英文标题】：Staticservingonexpressjsnotworkingwhenalsousingcustommiddleware【发布时间】：2021-12-3018:19:09【问题描述】：我正在尝试为我的expressjs网站编写一个中间件，以便我可... 查看详情

如何在经典模式下保护 IIS7 上的静态内容？

】如何在经典模式下保护IIS7上的静态内容？【英文标题】：HowtoprotectstaticcontentonIIS7inClassicMode?【发布时间】：2009-10-2915:29:23【问题描述】：我知道如何在IIS6中保护我的静态(HTML)页面，以及如何使用IIS7集成管道来保护我的HTML页... 查看详情

关于线上静态页面资源更新的一些经验分享(代码片段)

目录关于线上静态页面资源更新的一些经验分享关于Linux的Patch关于git关于Idea关于线上静态页面资源更新的一些经验分享最近在负责公司的后台项目，包括了后端和前端。后端直接编译完打成jar包直接上线运行没什么问题。但是... 查看详情

多个页面上的 html 静态部分

】多个页面上的html静态部分【英文标题】：staticsectionsofhtmlovermultiplepages【发布时间】：2014-07-1815:42:47【问题描述】：我有一个内置音频媒体播放器的网站。目前，当我访问我网站中的另一个页面时，媒体播放器会出于明显的原... 查看详情

如何在 calc 中使用 Stylus 变量？

】如何在calc中使用Stylus变量？【英文标题】：HowtouseaStylusvariableincalc?【发布时间】：2015-11-2304:20:14【问题描述】：在Stylus中，如何在calc表达式中使用variable？例如，以下内容不起作用（arrow-size是一个变量）：arrow-size=5pxleftcalc(50... 查看详情

如何在 calc() 中使用多个变量 Stylus？

】如何在calc()中使用多个变量Stylus？【英文标题】：HowtousemultiplevariablesStylusincalc()?【发布时间】：2016-02-1520:17:15【问题描述】：一切都在标题中。我无法在函数CSScalc()中合并多个Stylus变量。我创建了一个代码Sass，我会在Stylus下... 查看详情

静态网页与动态网页的区别

静态页面（纯粹的HTML格式的网页）：    1.静态页面是写在服务器上的不能随时改动，静态是一次性写好放在服务器上进行浏览的，如果想改动，则必须在页面上修改，然后再上传服务起覆盖原来的页面，页面不能... 查看详情

在vue中使用stylus

概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器... 查看详情

在vue中使用stylus

概述什么是StylusStylus是一个CSS预处理器。什么是CSS预处理器关于CSS预处理器，推荐先行阅读这篇文章：为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus现在你应该对CSS预处理器有个大概的认识了，总的来说，CSS预处理器... 查看详情

我可以将 React 应用程序用作静态 HTML 页面上的组件吗

】我可以将React应用程序用作静态HTML页面上的组件吗【英文标题】：CanIuseaReactappasacomponentonastaticHTMLpage【发布时间】：2020-03-2504:56:49【问题描述】：我是React和JS的新手，正在使用react-csv-viewer。它按预期工作，我可以在本地服务... 查看详情

stylus

stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS，SASS都在这方面做了一些贡献。Stylus是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预... 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写cssvue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包://安装jade包npminst... 查看详情

vue使用stylus

在package.json中添加 stylus-loader"css-loader":"^0.28.0","stylus-loader":"^2.1.1","eventsource-polyfill":"^0.9.6", 再重建创建依赖包cnpminstall 查看详情

vue使用jade模板写html，stylus写css

vue使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包//安装jade包npminstalljadejade-loader--save-dev//如果使用... 查看详情

您如何在 Vercel 上的 Next JS 中提供静态站点（例如来自 Webflow 或登录页面生成器）？

】您如何在Vercel上的NextJS中提供静态站点（例如来自Webflow或登录页面生成器）？【英文标题】：Howdoyouserveastaticsite(likefromWebfloworalandingpagegenerator)inNextJSonVercel?【发布时间】：2021-06-0306:27:17【问题描述】：我们在Webflow和exportedtheco... 查看详情

css预处理器（框架）初探：sassless和stylus

...在最为普遍的三款CSS预处理器框架，分别是Sass、LessCSS、Stylus。拿less来说，可以在页面上直接使用less文件，但要引用less.js进行解析；同时也可以直接将less输出为css文件。推荐使用后者。最常用的less编译输出css工具：与node.js关... 查看详情

如何使按钮静态并固定在底部

】如何使按钮静态并固定在底部【英文标题】：Howtomakebuttonstaticandfixedatbottom【发布时间】：2021-07-2119:50:29【问题描述】：我正在使用tailwindCSS并制作一个页面，它使用Next和Back按钮在页面之间导航。但问题是当页面上的内容较少... 查看详情