摘要:默認使用的作為文件擴展名,支持多樣性的語法。功能上更為強壯,和聯(lián)系更加緊密。所以我選擇,玩兒過一段時間,主要是這玩意依賴運行,所以我放棄使用了。這樣就算是安裝完了,也可以正常使用。用于保存項目元數(shù)據(jù)。
stylus介紹
是個什么鬼?對于開發(fā)來說,CSS的弱點在于靜態(tài)化。我們需要一個真正能提高開發(fā)效率的工具,LESS, SASS都在這方面做了一些貢獻。
Stylus 是一個CSS的預處理框架,2010年產(chǎn)生,來自Node.js社區(qū),主要用來給Node項目進行CSS預處理支持,所以 Stylus 是一種新型語言,可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的CSS。比較年輕,其本質上做的事情與 SASS/LESS 等類似,應該是有很多借鑒,所以近似腳本的方式去寫CSS代碼。
Stylus默認使用 .styl 的作為文件擴展名,支持多樣性的CSS語法。
Stylus功能上更為強壯,和js聯(lián)系更加緊密。所以我選擇 Stylus,SASS 玩兒過一段時間,主要是這玩意依賴ruby運行,所以我放棄使用了。
Stylus安裝全局安裝,安裝之前你需要你安裝 nodejs 這個怎么安裝搜去哦。
$ npm install stylus -g
這樣就算是安裝完Stylus了,也可以正常使用Stylus。
Usage: stylus [options] [command] [< in [> out]] [file|dir ...] Commands: help生成CSS 命令行中Opens help info for in your default browser. (OS X only) Options: -u, --use Utilize the stylus plugin at -i, --interactive Start interactive REPL -w, --watch Watch file(s) for changes and re-compile -o, --out Output to when passing files -C, --css [dest] Convert CSS input to Stylus -I, --include Add 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
建立一個stylusExample/,再在里面建立 src 目錄專門存放 stylus 文件,在里面建立 example.styl 文件。然后在 stylusExample 目錄下面執(zhí)行下面命令
$ stylus --compress src/
輸出compiled src/example.css ,這個時候表示你生成成功了,帶上--compress參數(shù)表示你生成壓縮的CSS文件。
$ stylus --css css/example.css css/out.styl CSS轉換成styl
$ stylus help box-shadow CSS屬性的幫助
$ stylus --css test.css 輸出基本名一致的.styl文件
grunt生成 就比較爽歪歪了,具體grunt怎么玩兒,俺寫了個教程Grunt教程-前端自動化 可以學習以下。
stylusExample 目錄下創(chuàng)建兩個文件,這兩個文件是grunt必備文件。
package.json:用于保存項目元數(shù)據(jù)。
Gruntfile.js:用于配置或定義任務、加載 Grunt 插件。
package.json 內(nèi)容
{ "name": "test", "version": "1.0.0", "description": "測試的例子", "repository": { "type": "git", "url": "" } }
然后安裝必備插件,這些插件讓stylus文件變更了自動生成,生成到相對應的文件目錄中。如果報錯你需要在命令行前面加上sudo,給它最大的執(zhí)行權限。
npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev :監(jiān)視文件變動,做出相應動作。npm>>
npm install grunt-contrib-stylus --save-dev :stylus編寫styl輸出css npm>>
安裝出現(xiàn)這樣的警告 npm WARN package.json test@1.0.0 No README data 可以不理會,如果你看著不舒服,你需要在stylusExample目錄下面建立一個 README.md 文件并輸入內(nèi)容。也可命令執(zhí)行 echo "#stylus 學習" >> README.md
插件執(zhí)行完畢之后 package.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" } }
這個時候你需要使用這些插件兒完成你的任務需要在Gruntfile.js里面寫你的執(zhí)行任務。
/// 包裝函數(shù) 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"]); };
注意讀懂上面的哦,目錄高對哦,這些沒有必要提醒哦,這個時候你可以好好耍一下stylus
Stylus應用這個時候真正的開始玩耍了哦。
Try Stylus!stylus
body,html margin:0 padding:0
編譯成
body, html { margin: 0; padding: 0; }
stylus : 強大的功能豐富的語言
-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] : 0 absolute() -pos("absolute", arguments) fixed() -pos("fixed", arguments) #prompt absolute: top 150px left 5px width: 200px margin-left: -(@width / 2) #logo fixed: top left
編譯成
#prompt { position: absolute; top: 150px; left: 5px; width: 200px; margin-left: -100px; } #logo { position: fixed; top: 0; left: 0; }nibStylus插件
stylus
@import "nib" body background: linear-gradient(20px top, white, black)
編譯成
body { 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(嵌套)
stylus
header #logo border:1px solid red
編譯成
header #logo { border: 1px solid #f00; }Flexible syntax(靈活的用法)
stylus
body font 14px/1.5 Helvetica, arial, sans-serif button button.button input[type="button"] input[type="submit"] border-radius 5px header #logo,div font-size:14px
編譯成
body { 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 &(靈活&)
stylus
ul li a display: block color: blue padding: 5px html.ie & padding: 6px &:hover color: red
編譯成
ul li a { display: block; color: #00f; padding: 5px; } html.ie ul li a { padding: 6px; } ul li a:hover { color: #f00; }Functions 方法 返回值
stylus
border-radius(val) -webkit-border-radius: val -moz-border-radius: val border-radius: val button border-radius(5px);
編譯成
button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }Transparent mixins
不帶參數(shù)
stylus
border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments button border-radius: 5px 10px;
編譯成
button { -webkit-border-radius: 5px 10px; -moz-border-radius: 5px 10px; border-radius: 5px 10px; }默認參數(shù)
不帶參數(shù)
stylus
add(a, b = a) a + b add(10, 5) // => 15 add(10) // => 20函數(shù)體
通過內(nèi)置unit()把單位都變成px, 因為賦值在每個參數(shù)上,因此,我們可以無視單位換算。
add(a, b = a) a = unit(a, px) b = unit(b, px) a + b add(15%, 10deg) // => 25多個返回值
通過內(nèi)置unit()把單位都變成px, 因為賦值在每個參數(shù)上,因此,我們可以無視單位換算。
sizes() 15px 10px sizes()[0] // => 15pxVariables(變量) 常用方法
stylus
font-size = 14px body font font-size Arial, sans-seri
編譯成
body { font: 14px Arial, sans-seri; }變量放在屬性中
stylus
#prompt position: absolute top: 150px left: 50% width: w = 200px margin-left: -(w / 2)
編譯成
#prompt { position: absolute; top: 150px; left: 50%; width: 200px; margin-left: -100px; }塊屬性訪問引用
stylus
#prompt position: absolute width: 200px margin-left: -(@width / 2)
編譯成
#prompt { position: absolute; width: 200px; margin-left: -100px; }屬性有條件地定義屬性
stylus:指定z-index值為1,但是,只有在z-index之前未指定的時候才這樣:
position() position: arguments z-index: 1 unless @z-index #logo z-index: 20 position: absolute #logo2 position: absolute
編譯成
#logo { z-index: 20; position: absolute; } #logo2 { position: absolute; z-index: 1; }向上冒泡
stylus:屬性會“向上冒泡”查找堆棧直到被發(fā)現(xiàn),或者返回null(如果屬性搞不定)下面這個例子,@color被弄成了blue.
body color: red ul li color: blue a background-color: @color
編譯成
body { 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
編譯成
table 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 official border-radius() for vendor in vendors if vendor == official border-radius: arguments else -{vendor}-border-radius: arguments #content border-radius: 5px
編譯成
#content { -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }Operators(運算符)
運算符優(yōu)先級
下表運算符優(yōu)先級,從最高到最低:
. [] ! ~ + - 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,導入將顯現(xiàn)為/tmp/testing/stylus/。
@import也支持索引形式。這意味著當你@import blueprint, 則會理解成blueprint.styl或blueprint/index.styl. 對于庫而言,這很有用,既可以展示所有特征與功能,同時又能導入特征子集。
@font-facestylus
@font-face font-family Geo font-style normal src url(fonts/geo_sans_light/GensansLight.ttf) .ingeo font-family Geo
編譯成
@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
編譯成
@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)
編譯成
@-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; } }
編譯成
body { font: 14px; }工具
sublime 插件 Stylus Clean Completions 代碼提示
Stylus
文檔參考官方Stylus API
張鑫旭中文翻譯
Try Stylus!
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111054.html
摘要:介紹是一個的預處理框架,年產(chǎn)生,來自社區(qū),主要用來給項目進行預處理支持,所以是一種新型語言,可以創(chuàng)建健壯的動態(tài)的富有表現(xiàn)力的。 stylus介紹 Stylus 是一個CSS的預處理框架,2010年產(chǎn)生,來自Node.js社區(qū),主要用來給Node項目進行CSS預處理支持,所以 Stylus 是一種新型語言,可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的CSS。比較年輕,其本質上做的事情與 SASS...
摘要:介紹是一個的預處理框架,年產(chǎn)生,來自社區(qū),主要用來給項目進行預處理支持,所以是一種新型語言,可以創(chuàng)建健壯的動態(tài)的富有表現(xiàn)力的。 stylus介紹 Stylus 是一個CSS的預處理框架,2010年產(chǎn)生,來自Node.js社區(qū),主要用來給Node項目進行CSS預處理支持,所以 Stylus 是一種新型語言,可以創(chuàng)建健壯的、動態(tài)的、富有表現(xiàn)力的CSS。比較年輕,其本質上做的事情與 SASS...
摘要:四配置配置規(guī)則放在的數(shù)組里,每個是一個對象,是正則匹配,匹配文件后綴名,是要用是數(shù)組是所需要的是要加載哪些文件,是忽略掉哪些文件。實現(xiàn)解析,用會在寫入在文件頂端導入中加入插件。 最近研究webpack略有小成,特此寫篇博客。雖然webpack有官網(wǎng)api,但是個人認為webpack api一點都不人性化, 不自己研究研究,根本看不懂。今天先從寫webpack-dev-server開始。...
平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉換...
平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉換...
閱讀 3278·2023-04-26 00:57
閱讀 600·2021-10-08 10:05
閱讀 1345·2021-09-08 09:36
閱讀 4147·2021-08-12 13:31
閱讀 2542·2019-08-30 15:55
閱讀 2237·2019-08-30 15:55
閱讀 1013·2019-08-30 15:55
閱讀 2684·2019-08-29 13:17