カテゴリー別アーカイブ: CSS

【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する

フロントエンジニア芸人【cssnextをすぐ触りたい】2016年夏。cssnextがgulpで動かしてざっくり理解する

【cssnextをすぐ触りたい】2016年夏。cssnextをgulpで動かしてざっくり理解する


cssnextとは」というのは他の良記事にお任せします。
とにかくよくわからないけど触っとこう、という説明書読まない派の為に動くものを外国の方のgithub見てこれを作りました。(gulpfile以外ほぼまま)

以下cssnextに対しての現時点での理解。(勉強つう)

PostCSS-cssnext(PostCSSのプラグイン群)っていうプラグインのパッケージ名がcssnextで、ブラウザ間で解釈が違うプロパティ(-webkit-などのプリプロセッサー)や、まだ未実装なプロパティをトランスパイルすることで次世代のCSSを先取りできる。ブラウザの実装を待たなくていい。(ECMAScript2015をbabelでトランスパイルしてレガシーなのにも対応できるように)、自分で定義したプロパティをSassのように変数にして使えたり、ネストも使えたりできる。

CSSにそれらの「nextの記法」を直接書いて、トランスパイルして、生成されたCSSを使う。

例1

したの様にrootに「カスタムプロパティ」をCSS内で定義(今のところの決まり事)して、

:root {
–fontSize: 1rem;
–mainColor: #12345678;
–highlightColor: hwb(190, 35%, 20%);
}

–[customePropertyName]と書く。

var()で値の箇所で呼び出す。calcは返された値を計算してくれるメソッド

body {
color: var(–mainColor);

font-size: var(–fontSize);
line-height: calc(var(–fontSize) * 1.5);
padding: calc((var(–fontSize) / 2) + 1px);
}

トランスパイルされた出力

body {
color: rgba(18, 52, 86, 0.47059);

font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
padding: calc(0.5rem + 1px);
}

例2
定義

/* custom selectors */
@custom-selector :–heading h1, h2, h3, h4, h5, h6;
:–heading { margin-top: 0 }

custom-selectorというプラグインで–headingというセレクタを定義、値をh1,h2、、としている

:で呼び出し、使っている。(custom selectorsは当然var()ではない。)

生成されるCSS

/* custom selectors */
h1,
h2,
h3,
h4,
h5,
h6 { margin-top: 0 }

と理解しました。

cssnextのplayground

http://cssnext.io/playground/

cssnextの記法

http://cssnext.io/features/

でわまたーー

他のフロントエンド記事

</p>

<p>&lt;style&gt; #wrap{ min-width:410px; text-align: center; height: 300px; background: #e2e2e2; } #wrap:before{ display: inline-block; vertical-align: middle; content: &quot;&quot;; height:100%; margin-right: -0.25em; } #inner{ display: inline-block; vertical-align: middle; width: 200px; padding: 10px 15px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;wrap&quot;&gt; &lt;div id=&quot;inner&quot;&gt; &lt;p&gt;ふぁふぁふぁふぁふぁ&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt;