Sass記法,FlexBox,Compassでよく使う書き方メモ

世の中SCSS記法がありふれてるのですが、小規模一人Web開発がおいので、より効率的なSASS記法+Compassをつかっています。あまりサンプルも落ちていなくよく忘れがちなので記法をメモ。

CSS(SASS記法)

@import compass
.row
    +flex-wrap(wrap)
    +flexbox((display: box,box-orient: horizontal), $version: 1)
    +flexbox((display: flexbox,flex-direction: row), $version: 2)
    +flexbox((display: flex,flex-direction: row))
.row.row-nowrap
    +flex-wrap(nowrap)

HTML

<!-- 折り返し有り -->
<ul class="row">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>
<!-- 折り返しなし -->
<ul class="row row-nowrap">
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
    <li>要素</li>
    <li>要素</li>
    <li>要素</li> 
</ul>