stylus_基礎文法(書く習慣/変数/CSS方式でコードを書く)

stylusとless sassは同じことをしていて、変数、計算の考えなど、共通のところがたくさんあります.

stylusの基礎知識をまとめる

書く習慣

エンベロープ、カッコ、カンマがなくても実行できます

封号オプション

かっこオプション

カンマオプション

かっこオプション

styl

* 
    margin 0
    padding 0 

コンパイル後のcss

* {
  margin: 0;
  padding: 0;
}

変数＃ヘンスウ＃

よく使われるパラメータを変数として定義し、必要な場所で直接変数を参照すればよい.例えばcolor、font-size、width、heightなど;これらのものを抽出してファイル、つまりテーマを形成することができます.

書く:font-sizeと書いてもよいし、@font-sizeと書いてもよい.

styl

font-size = 16px  //    
font = 12px/16px '    '  //     
$width = 16px    //      
a
    font font                 //        
    width $width            //         
    margin-left (@width/2)  //   @            

コンパイル後のcss

a {
  font: 0.75px '    ';
  width: 16px;
  margin-left: 8px;
}

CSSのような方式で開発する

Stylusは構造でcss階層関係を表現できる
styl

body
    color red
    ul
        line-height 20px
        height 20px
        font-size 16px
        li 
            display inline-block
            padding 10px
            border 1px solid #ccc
            text-align center
            a
                color red
                font-size 12px

コンパイル後のcss

body {
  color: #f00;
}
body ul {
  line-height: 20px;
  height: 20px;
  font-size: 16px;
}
body ul li {
  display: inline-block;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
}
body ul li a {
  color: #f00;
  font-size: 12px;
}