前段時間做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> inyour 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 thatcan be used by the FireStylus Firebug plugin-l, --line-numbers Emits comments in the generated CSSindicating 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文件bodyulcolor: redfont-size: 20pxlicolor: yellowfont-size: 36pxcss文件
body ul {color: #f00;font-size: 20px; } body ul li {color: #ff0;font-size: 36px; }

?就是這么簡單，這么方便。這樣就可以節省很多寫選擇器的時間了，這樣也不容易出錯了。

知道什么是stylus文件格式后，我們來看看一些在平時開發中常用到的一些技巧型的東西

&符號

&符號，表示同級元素，即和&同一列樣式的所有者

// style文件ullicolor: red&:first-childfont-size: 20px// css文件ul li {color: #f00; } ul li:first-child {font-size: 20px; }

?@符號

@name，表示繼承前面父級或自己已經定義過樣式的name的樣式

// stylus文件.listbackground: red.partbackground: @background// css文件.list {background: #f00; } .list .part {background: #f00; }

Variables(變量)

除了可以使用@來使用定義好的樣式外，我們還可以給變量賦值樣式，讓好在后面調用

//stylus文件font-size = 14px bodyfont font-size Arial, sans-seri// css文件body {font: 14px Arial, sans-seri; }

?可以將變量放在屬性中

// stylus文件#promptwidth: w = 200pxmargin-left: -(w / 2)// css文件#prompt {width: 200px;margin-left: -100px; }

?有條件的使用屬性

// stylus:指定z-index值為1，但是，只有在z-index之前未指定的時候才這樣：// stylus文件position()position: argumentsz-index: 1 unless @z-index#logoz-index: 20position: absolute#logo2position: 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: valborder-radius: valbutton 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 vendorsif vendor == officialborder-radius: argumentselse-{vendor}-border-radius: arguments #contentborder-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-facefont-family Geofont-style normalsrc url(fonts/geo_sans_light/GensansLight.ttf).ingeofont-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#footerdisplay none// css文件@media print {#header,#footer {display: none;} }

@keyframes

// stylus文件@keyframes pulse0%background-color redtransform 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);} }

?

轉載于:https://www.cnblogs.com/HarkPark/p/8684894.html

總結

以上是生活随笔為你收集整理的stylus 在静态页面上的使用经验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。