學習Stylus

cncoder 發布于2019-08-29 16:57 / 2192人閱讀

摘要：函數這段代碼聲明了函數，并且接收了參數在使用時只需要像上面的代碼那樣輸入函數名稱和參數就可以設置屬性。選擇器這段代碼被編譯成在元素里面寫樣式的時候是使用一個鍵縮進來體現是屬于該元素的樣式。

關于stylus

stylus是css的預處理框架，是以.styl為后綴的文件，可以創建健壯的，動態的富有表現的css。它用來為css增加一些編程的特性，比如在css中可以使用變量，函數等編程語言的特性，從而是css更加的簡潔，適應性更強，代碼也更加的直觀易懂。

在寫代碼的時候發現stylus有個特點，代碼風格有點像python，特別簡潔不需要大括號，分號什么的并且也是用空格來規范格式。

安裝

使用stylus首先需要安裝，當然這也是一個比較簡單的事情，安裝stylus只需要一個簡單的命令nmp install -g stylus（這是在你安裝好了nodejs并且配置好了環境變量情況下，安裝和配置nodejs可以去網上查找一下，很簡單這里就不多講）。安裝好了后使用stylus --version查看是否安裝成功。

簡單的使用stylus

首先創建style.styl文件編寫一段簡單的stylus的代碼

bgc = red
$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
*
    margin 0
    padding 0

.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green

使用命令stylus -w style.styl -o style.css將文件style.styl文件編譯成并輸出成css文件，編譯后生成的css代碼如下

* {
  margin: 0;
  padding: 0;
}
.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

是不是感覺寫css簡單了許多，寫一個styl文件再編譯生成的css文件效率高多了。
下面我們在來分析一下這段代碼

變量

bgc = red
background-color bgc

這段代碼聲明了變量bgc，并且為變量賦值為red。在需要用到相同顏色的地方可以
直接使用這個變量.
前面有兩處背景顏色為red，直接使用變量，當需要改變顏色時不需要一個個的改，
只需要改變變量的值就可以了。

函數

$border-radius(arg)
    -webkit-border-radius: arg
    -moz-border-radius: arg
    border-radius: arg
 $border-radiius(2px)

這段代碼聲明了函數，并且接收了參數arg.在使用時只需要像上面的代碼那樣輸入函數名稱
和參數就可以設置css屬性。參數不一定要傳入的，根據代碼的情況跟其他語言都差不多。

選擇器

.box
    height 100
    width 100
    background-color bgc
    border-radius(2px)
    .content
        background-color bgc
        h1
            color white
            &:hover
                color green

這段代碼被編譯成

.box {
  height: 100;
  width: 100;
  background-color: #f00;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.box .content {
  background-color: #f00;
}
.box .content h1 {
  color: #fff;
}
.box .content h1:hover {
  color: #008000;
}

在元素里面寫樣式的時候是使用一個tab鍵縮進來體現是屬于該元素的樣式。寫.box 的子元素.content的樣式不需要在像寫css那樣重新去寫，只需要在.box下使用縮進來體現元素.content是.box的子元素然后在寫.content的樣式就可以。是不是感覺喜歡上了stylus了。

在上面的這段stylus的代碼使用了一個&符號，這個&符號根據編譯出來的代碼可以很容易理解，它會指向最近的父級元素并且與他連接。

@規則

@import導入文件.styl，任何.css擴展文件將作為字面量,stylus樣式作為動態導入的。

@import "reset.css"

@css{} {}里面的不會被編譯
@block{} 作為一個塊賦值給一個變量
@media 和在css使用的方法相同
@keyframe 編譯的時候轉換成@-webkit-keyframes,可以通變量來添加前綴

雖然文章寫得沒有那么詳細，涉及的一些細節并沒有講到可以去看一些相關文檔，這些主要的會了去學習一些細節還是很快的，很多東西跟編程語言還是差不多的，畢竟stylus就是來方便我們的。

GPU云服務器云服務器 stylus 學習機器學習學習機器學習學習深度學習學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114010.html

stylus入門使用方法

摘要：默認使用的作為文件擴展名，支持多樣性的語法。功能上更為強壯，和聯系更加緊密。所以我選擇，玩兒過一段時間，主要是這玩意依賴運行，所以我放棄使用了。這樣就算是安裝完了，也可以正常使用。用于保存項目元數據。 stylus介紹是個什么鬼？對于開發來說，CSS的弱點在于靜態化。我們需要一個真正能提高開發效率的工具，LESS， SASS都在這方面做了一些貢獻。 Stylus 是一個CSS的預...

LiuZh 2019-08-28 18:09 評論0 收藏0
大話css預編譯處理（一）通讀介紹篇

摘要：使用預編譯處理的優勢使用預處理器，可以提供缺失的樣式層復用機制減少冗余代碼，提高樣式代碼的可維護性。所以我們在實際項目中衡量預編譯方案時，還是得想想，比起帶來的額外維護開銷，預處理器有沒有解決更大的麻煩。一、什么是css預編譯處理？ CSS 預編譯處理，從字面上理解，就是預先編譯處理CSS。它擴展了 CSS 語言，增加了變量、Mixin、函數等編程的特性，使 CSS 更易維護和擴展。...

Backache 2019-08-30 15:55 評論0 收藏0
react學習日記第一記-webpack配置

摘要：對于前端開發者來說，無論使用還是還是，打包工具的配置永遠都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。所以自己就動手嘗試配置一下。對于前端開發者來說，無論使用vue 還是react還是angular，打包工具的配置永遠都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。由于之前的項目一直都是在使用vue，對于vue的webpa...

Shonim 2019-08-02 16:11 評論0 收藏0
react學習日記第一記-webpack配置

摘要：對于前端開發者來說，無論使用還是還是，打包工具的配置永遠都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。所以自己就動手嘗試配置一下。對于前端開發者來說，無論使用vue 還是react還是angular，打包工具的配置永遠都是一個必須的過程，因為這決定了打包出來項目的大小，資源占用，以及運行速度。由于之前的項目一直都是在使用vue，對于vue的webpa...

zhkai 2019-08-23 16:47 評論0 收藏0