DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS的預處理框架stylus學習教程
CSS的預處理框架stylus學習教程
編輯：CSS詳解     
這篇文章主要介紹了CSS的預處理框架stylus學習教程,stylus能夠在一定程度上減少CSS的代碼量,極力推進!需要的朋友可以參考下

stylus介紹

是個什麼鬼？對於開發來說，CSS的弱點在於靜態化。我們需要一個真正能提高開發效率的工具，LESS， SASS都在這方面做了一些貢獻。

Stylus 是一個CSS的預處理框架，2010年產生，來自Node.JS社區，主要用來給Node項目進行CSS預處理支持，所以 Stylus 是一種新型語言，可以創建健壯的、動態的、富有表現力的CSS。比較年輕，其本質上做的事情與 SASS/LESS 等類似，應該是有很多借鑒，所以近似腳本的方式去寫CSS代碼。

Stylus默認使用 .styl 的作為文件擴展名，支持多樣性的CSS語法。

Stylus功能上更為強壯，和JS聯系更加緊密。所以我選擇 Stylus，SASS 玩兒過一段時間，主要是這玩意依賴ruby運行，所以我放棄使用了。
Stylus安裝

全局安裝，安裝之前你需要你安裝 nodeJS 這個怎麼安裝搜去哦。


復制代碼代碼如下: $ npm install stylus -g

這樣就算是安裝完Stylus了，也可以正常使用Stylus。


復制代碼代碼如下: Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help <prop> Opens help info for <prop> in
your default browser. (OS X only)
Options:</p>< p> -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

生成CSS
命令行中

建立一個stylusExample/，再在裡面建立 src 目錄專門存放 stylus 文件，在裡面建立 example.styl 文件。然後在 stylusExample 目錄下面執行下面命令


復制代碼代碼如下: $ stylus --compress src/

輸出compiled src/example.css ，這個時候表示你生成成功了，帶上--compress參數表示你生成壓縮的CSS文件。

$ stylus --css css/example.css css/out.styl CSS轉換成styl
$ stylus help box-shadow CSS屬性的幫助
$ stylus --css test.CSS 輸出基本名一致的.styl文件
grunt生成

grunt生成 就比較爽歪歪了，具體grunt怎麼玩兒，俺寫了個教程Grunt教程-前端自動化 可以學習以下。

stylusExample 目錄下創建兩個文件，這兩個文件是grunt必備文件。

package.JSon：用於保存項目元數據。
Gruntfile.JS：用於配置或定義任務、加載 Grunt 插件。

package.JSon 內容

JavaScript Code復制內容到剪貼板
  1. {
  2. "name": "test",
  3. "version": "1.0.0",
  4. "description": "測試的例子",
  5. "repository": {
  6. "type": "git",
  7. "url": ""
  8. }
  9. }

然後安裝必備插件，這些插件讓stylus文件變更了自動生成，生成到相對應的文件目錄中。如果報錯你需要在命令行前面加上sudo，給它最大的執行權限。

npm install grunt --save-dev
npm install grunt-contrib-watch --save-dev ：監視文件變動，做出相應動作。npm>>
npm install grunt-contrib-stylus --save-dev ：stylus編寫styl輸出CSS npm>>

安裝出現這樣的警告 npm WARN package.JSon [email protected] No README data 可以不理會，如果你看著不舒服，你需要在stylusExample目錄下面建立一個 README.md 文件並輸入內容。也可命令執行 echo "#stylus 學習" >> README.md

插件執行完畢之後 package.JSon 文件變成了這樣樣子滴。

JavaScript Code復制內容到剪貼板
  1. {
  2. "name": "test",
  3. "version": "1.0.0",
  4. "description": "測試的例子",
  5. "repository": {
  6. "type": "git",
  7. "url": ""
  8. },
  9. "devDependencIEs": {
  10. "grunt": "^0.4.5",
  11. "grunt-contrib-stylus": "^0.21.0",
  12. "grunt-contrib-watch": "^0.6.1"
  13. }
  14. }

這個時候你需要使用這些插件兒完成你的任務需要在Gruntfile.JS裡面寫你的執行任務。

JavaScript Code復制內容到剪貼板
  1. /// 包裝函數
  2. module.exports = function(grunt) {
  3. // 任務配置,所有插件的配置信息
  4. grunt.initConfig({
  5. pkg: grunt.file.readJSON('package.JSon'),
  6. stylus:{
  7. build: {
  8. options: {
  9. linenos: false,
  10. compress: true
  11. },
  12. files: [{
  13. 'css/index.CSS': ['src/index.styl']
  14. }]
  15. }
  16. },
  17. // watch插件的配置信息
  18. watch: {
  19. another: {
  20. files: ['CSS/*','src/*.styl'],
  21. tasks: ['stylus'],
  22. options: {
  23. livereload: 1337
  24. }
  25. }
  26. }
  27. });
  28. // 告訴grunt我們將使用插件
  29. grunt.loadNpmTasks('grunt-contrib-watch');
  30. grunt.loadNpmTasks('grunt-contrib-stylus');
  31. // 告訴grunt當我們在終端中輸入grunt時需要做些什麼
  32. grunt.registerTask('default', ['watch']);
  33. };

注意讀懂上面的哦，目錄高對哦，這些沒有必要提醒哦，這個時候你可以好好耍一下stylus
Stylus應用

這個時候真正的開始玩耍了哦。
Try Stylus!

stylus

CSS Code復制內容到剪貼板
  1. body,Html
  2. margin:0
  3. padding:0

編譯成

CSS Code復制內容到剪貼板
  1. body,
  2. Html {
  3. margin: 0;
  4. padding: 0;
  5. }

stylus : 強大的功能豐富的語言

CSS Code復制內容到剪貼板
  1. -pos(type, args)
  2. i = 0
  3. position: unquote(type)
  4. {args[i]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  5. {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] : 0
  7. absolute()
  8. -pos('absolute', arguments)
  10. fixed()
  11. -pos('fixed', arguments)
  13. #prompt
  14. absolute: top 150px left 5px
  15. width: 200px
  16. margin-left: -(@width / 2)
  18. #logo
  19. fixed: top left

編譯成

CSS Code復制內容到剪貼板
  1. #prompt {
  2. position: absolute;
  3. top: 150px;
  4. left: 5px;
  5. width: 200px;
  6. margin-left: -100px;
  7. }
  8. #logo {
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. }

nibStylus插件

stylus

CSS Code復制內容到剪貼板
  1. @import 'nib'
  2. body
  3. background: linear-gradIEnt(20px top, white, black)

編譯成

CSS Code復制內容到剪貼板
  1. body {
  2. background: -webkit-linear-gradIEnt(20px top, #fff, #000);
  3. background: -moz-linear-gradIEnt(20px top, #fff, #000);
  4. background: -o-linear-gradIEnt(20px top, #fff, #000);
  5. background: -ms-linear-gradIEnt(20px top, #fff, #000);
  6. background: linear-gradIEnt(20px top, #fff, #000);
  7. }

Nesting(嵌套)

stylus

CSS Code復制內容到剪貼板
  1. header
  2. #logo
  3. border:1px solid red

編譯成

header #logo {
border: 1px solid #f00;
}

Flexible syntax(靈活的用法)

stylus

CSS Code復制內容到剪貼板
  1. body
  2. font 14px/1.5 Helvetica, arial, sans-serif
  3. button
  4. button.button
  5. input[type='button']
  6. input[type='submit']
  7. border-radius 5px
  9. header
  10. #logo,div
  11. font-size:14px

編譯成

CSS Code復制內容到剪貼板
  1. body {
  2. font: 14px/1.5 Helvetica, arial, sans-serif;
  3. }
  4. body button,
  5. body button.button,
  6. body input[type='button'] {
  7. border-radius: 5px;
  8. }
  9. header #logo,
  10. header div {
  11. font-size: 14px;
  12. }

Flexible &(靈活&)

stylus

CSS Code復制內容到剪貼板
  1. ul
  2. li a
  3. display: block
  4. color: blue
  5. padding: 5px
  6. Html.IE &
  7. padding: 6px
  8. &:hover
  9. color: red

編譯成

CSS Code復制內容到剪貼板
  1. ul li a {
  2. display: block;
  3. color: #00f;
  4. padding: 5px;
  5. }
  6. Html.IE ul li a {
  7. padding: 6px;
  8. }
  9. ul li a:hover {
  10. color: #f00;
  11. }

Functions 方法
返回值

stylus

CSS Code復制內容到剪貼板
  1. border-radius(val)
  2. -webkit-border-radius: val
  3. -moz-border-radius: val
  4. border-radius: val
  6. button
  7. border-radius(5px);

編譯成

CSS Code復制內容到剪貼板
  1. button {
  2. -webkit-border-radius: 5px;
  3. -moz-border-radius: 5px;
  4. border-radius: 5px;
  5. }

Transparent mixins

不帶參數

stylus

CSS Code復制內容到剪貼板
  1. border-radius()
  2. -webkit-border-radius: arguments
  3. -moz-border-radius: arguments
  4. border-radius: arguments
  6. button
  7. border-radius: 5px 10px;

編譯成

CSS Code復制內容到剪貼板
  1. button {
  2. -webkit-border-radius: 5px 10px;
  3. -moz-border-radius: 5px 10px;
  4. border-radius: 5px 10px;
  5. }

默認參數

不帶參數

stylus

CSS Code復制內容到剪貼板
  1. add(a, b = a)
  2. a + b
  4. add(10, 5)
  5. // => 15
  7. add(10)
  8. // => 20

函數體

通過內置unit()把單位都變成px, 因為賦值在每個參數上，因此，我們可以無視單位換算。

CSS Code復制內容到剪貼板
  1. add(a, b = a)
  2. a = unit(a, px)
  3. b = unit(b, px)
  4. a + b
  6. add(15%, 10deg)
  7. // => 25

多個返回值

通過內置unit()把單位都變成px, 因為賦值在每個參數上，因此，我們可以無視單位換算。

CSS Code復制內容到剪貼板
  1. sizes()
  2. 15px 10px
  4. sizes()[0]
  5. // => 15px

Variables(變量)
常用方法

CSS Code復制內容到剪貼板
  1. stylus
  3. font-size = 14px
  5. body
  6. font font-size Arial, sans-seri

編譯成

CSS Code復制內容到剪貼板
  1. body {
  2. font: 14px Arial, sans-seri;
  3. }

變量放在屬性中

stylus

CSS Code復制內容到剪貼板
  1. #prompt
  2. position: absolute
  3. top: 150px
  4. left: 50%
  5. width: w = 200px
  6. margin-left: -(w / 2)

編譯成

CSS Code復制內容到剪貼板
  1. #prompt {
  2. position: absolute;
  3. top: 150px;
  4. left: 50%;
  5. width: 200px;
  6. margin-left: -100px;
  7. }

塊屬性訪問引用

stylus

CSS Code復制內容到剪貼板
  1. #prompt
  2. position: absolute
  3. width: 200px
  4. margin-left: -(@width / 2)

編譯成

CSS Code復制內容到剪貼板
  1. #prompt {
  2. position: absolute;
  3. width: 200px;
  4. margin-left: -100px;
  5. }

屬性有條件地定義屬性

stylus:指定z-index值為1，但是，只有在z-index之前未指定的時候才這樣：

CSS Code復制內容到剪貼板
  1. position()
  2. position: arguments
  3. z-index: 1 unless @z-index
  5. #logo
  6. z-index: 20
  7. position: absolute
  9. #logo2
  10. position: absolute

編譯成

CSS Code復制內容到剪貼板
  1. #logo {
  2. z-index: 20;
  3. position: absolute;
  4. }
  5. #logo2 {
  6. position: absolute;
  7. z-index: 1;
  8. }

向上冒泡

stylus:屬性會“向上冒泡”查找堆棧直到被發現，或者返回null（如果屬性搞不定）下面這個例子，@color被弄成了blue.

CSS Code復制內容到剪貼板
  1. body
  2. color: red
  3. ul
  4. li
  5. color: blue
  6. a
  7. background-color: @color

編譯成

CSS Code復制內容到剪貼板
  1. body {
  2. color: #f00;
  3. }
  4. body ul li {
  5. color: #00f;
  6. }
  7. body ul li a {
  8. background-color: #00f;
  9. }

Iteration(迭代)

stylus

CSS Code復制內容到剪貼板
  1. table
  2. for row in 1 2 3 4 5
  3. tr:nth-child({row})
  4. height: 10px * row

編譯成

C# Code復制內容到剪貼板
  1. table tr:nth-child(1) {
  2. height: 10px;
  3. }
  4. table tr:nth-child(2) {
  5. height: 20px;
  6. }
  7. table tr:nth-child(3) {
  8. height: 30px;
  9. }
  10. table tr:nth-child(4) {
  11. height: 40px;
  12. }
  13. table tr:nth-child(5) {
  14. height: 50px;
  15. }

Interpolation(插值)

stylus

CSS Code復制內容到剪貼板
  1. vendors = webkit moz o ms official
  2. border-radius()
  3. for vendor in vendors
  4. if vendor == official
  5. border-radius: arguments
  6. else
  7. -{vendor}-border-radius: arguments
  8. #content
  9. border-radius: 5px

編譯成

CSS Code復制內容到剪貼板
  1. #content {
  2. -webkit-border-radius: 5px;
  3. -moz-border-radius: 5px;
  4. -o-border-radius: 5px;
  5. -ms-border-radius: 5px;
  6. border-radius: 5px;
  7. }

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

CSS Code復制內容到剪貼板
  1. @font-face
  2. font-family Geo
  3. font-style normal
  4. src url(fonts/geo_sans_light/GensansLight.ttf)
  6. .ingeo
  7. font-family Geo

編譯成

CSS Code復制內容到剪貼板
  1. @font-face {
  2. font-family: Geo;
  3. font-style: normal;
  4. src: url("fonts/geo_sans_light/GensansLight.ttf");
  5. }
  6. .ingeo {
  7. font-family: Geo;
  8. }

@media

stylus

CSS Code復制內容到剪貼板
  1. @media print
  2. #header
  3. #footer
  4. display none

編譯成

CSS Code復制內容到剪貼板
  1. @media print {
  2. #header,
  3. #footer {
  4. display: none;
  5. }
  6. }
  8. @keyframes

stylus

CSS Code復制內容到剪貼板
  1. @keyframes pulse
  2. 0%
  3. background-color red
  4. transform scale(1.0) rotate(0deg)
  5. 33%
  6. background-color blue
  7. -webkit-transform scale(1.1) rotate(-5deg)

編譯成

CSS Code復制內容到剪貼板
  1. @-moz-keyframes pulse {
  2. 0% {
  3. background-color: #f00;
  4. transform: scale(1) rotate(0deg);
  5. }
  6. 33% {
  7. background-color: #00f;
  8. -webkit-transform: scale(1.1) rotate(-5deg);
  9. }
  10. }
  11. @-webkit-keyframes pulse {
  12. 0% {
  13. background-color: #f00;
  14. transform: scale(1) rotate(0deg);
  15. }
  16. 33% {
  17. background-color: #00f;
  18. -webkit-transform: scale(1.1) rotate(-5deg);
  19. }
  20. }
  21. @-o-keyframes pulse {
  22. 0% {
  23. background-color: #f00;
  24. transform: scale(1) rotate(0deg);
  25. }
  26. 33% {
  27. background-color: #00f;
  28. -webkit-transform: scale(1.1) rotate(-5deg);
  29. }
  30. }
  31. @keyframes pulse {
  32. 0% {
  33. background-color: #f00;
  34. transform: scale(1) rotate(0deg);
  35. }
  36. 33% {
  37. background-color: #00f;
  38. -webkit-transform: scale(1.1) rotate(-5deg);
  39. }
  40. }

CSS字面量(CSS Literal)

stylus

CSS Code復制內容到剪貼板
  1. @CSS {
  2. body {
  3. font: 14px;
  4. }
  5. }

編譯成

CSS Code復制內容到剪貼板
  1. body {
  2. font: 14px;
  3. }
CSS詳解
CSS制作網頁編寫的提醒及小技巧整理
 1、ul標簽在Mozilla中默認是有padding值的，而在IE中只有margin有
匯總DIVCSS網頁布局及網站設計常犯錯誤
CSS網頁布局開始及網站常犯的幾種錯誤，無論是策劃、設計、開發，這些錯誤都要避免！1、導航菜單使用
如何實現FireFox文本自動換行
FireFox文本自動換行處理，如何實現Firefox文本自動換行文本自動換行IE中解決方法：wo

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
重新認識一下網頁標准 css圓角效果-網頁特效 css reset樣式初始化 CSS的優化寫法與手寫技巧 CSS網頁制作：各式各樣的按鈕制作方式 按鈕完成復制和剪切功能 CSS簡單實現網頁懸浮效果（對聯廣告） CSS偽類選擇器nth-child() xhtml+css網頁制作中問題解決的方式 DIV＋CSS設計IE6、IE7、Firefox兼容性(1)
熱門推薦
PDF、ZIP、DOC鏈接的標注(CSS技巧) 隱藏狀態欄上的超級連接信息的網頁特效代碼 div+css原理解剖 學習筆記 CSS clip屬性用法指導 使用Div CSS構架的三大好處 網頁變黑白代碼（讓FLASH也變黑） CSS中padding-bottom和padding-right屬性的區別(2) Flash，Silverlight與HTML 5三方論劍 用CSS控制浏覽器的滾動條
大家都在看
了解XSL的選擇模式 Javascript 復制數組實現代碼 需要掌握的八個CSS布局技巧 談談對offsetleft兼容性的理解 html5開發之viewport使用 jQuery寫的日歷(包括日歷的樣式及功能) jQuery中prevAll()方法用法實例教程 jQuery$命名沖突怎麼辦如何解決
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved