未来のプリプロセッサであるMythを始めよう

神話はCSSプリプロセッサであり、現在プロジェクトで新しい実験的なCSS機能を使用できます。

なぜ神話なのか？

Mythを使用すると、W3Cでまだ開発中であり、大部分のブラウザーでサポートされていないCSSプロパティを最大限に活用できます。 しかし、他のプリプロセッサと比較した場合の主な利点は、SASSやLESSの場合のように、新しいマークアップ言語を学ぶ必要がないことです。 神話は標準のCSSマークアップを使用します。 したがって、ブラウザに特定のプロパティのサポートが表示されたときに何も書き換える必要はありませんが、既存のスタイルを再コンパイルするだけで、通常は数秒で完了します。残りはMythが自動的に行います。



Mythで現在利用可能なCSS機能を次に示します。

• CSS変数
• カスタムメディアクエリ 。
• 関数の色（） ;
• calc（）関数は、実行時に動的計算なしで。
• ベンダープレフィックスを自動的に追加します。

例

Mythを使用した小さなCSSの例を次に示します。これには、ほとんどのブラウザーでまだサポートされていないプロパティが含まれています。

:root { --bgcolor: #0072bc; --textcolor: color(var(--bgcolor) lightness(85%)); } .button { display: block; width: 90%; max-width: 220px; padding: 10px; background: var(--bgcolor); color: var(--textcolor); border-radius: 6px; transition: background-color 0.4s ease-out, color 0.3s ease-out; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンパイル後、Mythはこの例を、ほとんどのブラウザーが正しく理解できるように変換します。

 .button { display: block; width: 90%; max-width: 220px; padding: 10px; background: #0072bc; color: rgb(179, 224, 255); border-radius: 6px; -webkit-transition: background-color 0.4s ease-out, color 0.3s ease-out; transition: background-color 0.4s ease-out, color 0.3s ease-out; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

神話のインストール

最初に、インストールウィザードを使用して node.js をインストールする必要があります 。 その後、Node.jsコマンドプロンプトを実行します。







Mythをインストールするには、npm（標準のNode.jsパッケージマネージャー）を使用します。 次のコマンドを実行します。

 npm install -g myth
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Mythのインストールが正常に完了すると、次のように表示されます。

神話を使用してレスポンシブデザインを作成する

Mythを使用して、シンプルなレスポンシブマークアップを作成しましょう。





デモ

ソースコード

解説

これは、このデモのフォルダー構造がどのようなものかを示しています。

 /demo/ |-- /css/ |-- dev.css |-- styles.css |-- styles.min.css |-- /images/ |-- index.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• フォルダー/ css /には、プロジェクトのスタイルのファイルが含まれています
  
  
  • dev.css-作業する入力スタイルファイル
  • styles.css-再コンパイルされたMyth。サイトがブラウザに渡す出力スタイルファイル
  • styles.min.css-styles.cssの縮小バージョン
  
  
  
• / images /-プロジェクトで使用されるグラフィック。
• index.html-そしてもちろん作業中のページ

入力ファイルと出力ファイルのリンク

次のNode.jsコマンドを使用して、スタイルが配置されている場所に移動します。

 cd /path/to/your/folder/css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

/ path / to / your / folder / cssは、ローカルマシンまたはサーバー上のスタイルファイルへの実際のパスです。 次のステップは、dev.cssが作業するファイルであり、styles.cssが、Mythがスタイルを変更するたびに自動的にコンパイルする最終ファイルであることをMythに伝えることです。

 myth --watch dev.css styles.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

自分でコンパイルしたい場合は、--watchを取り除きます：

 myth dev.css styles.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

styles.cssが見つからない場合は自動的に作成されますが、dev.cssはすでに存在している必要があります。 当然、この例で検討した名前だけでなく、ファイルに任意の名前を使用できます。

CSS神話の追加

この例のマークアップを見るために、ソースを見ることができます。 以下はdev.cssの内容です。 ご覧のとおり、変数、カスタムメディアクエリ、color（）関数などの実験的な関数を使用しています。

 :root { --max-width: 960px; --gutter: 2%; --base-size: 17px; --small-size: 14px; --base-lineheight: 1.4; --default-color: #464646; --default-bgcolor: #fff; --link-color: #0072bc; --dark-bgcolor: #759ea1; --dark-bgcolor-text-color: color(var(--dark-bgcolor) lightness(85%)); --highlight-color: firebrick; } @custom-media --small-devices (max-width: 400px); @custom-media --medium-devices (min-width: 401px) and (max-width: 750px); * { margin: 0; padding: 0; } body { background: var(--default-bgcolor); color: var(--default-color); font: normal var(--base-size)/var(--base-lineheight) "Roboto", sans-serif; text-align: center; } img { width: 100%; height: auto; } /* Typography */ h1, h2, h3, p { margin: 5px auto 20px auto; } h1 { font-size: calc(var(--base-size) * 3); line-height: calc((var(--base-size) * 3) * var(--base-lineheight)); } h2 { font-size: calc(var(--base-size) * 2); font-weight: 400; line-height: calc((var(--base-size) * 2) * var(--base-lineheight)); color: color(var(--highlight-color) saturation(-20%)); } h3 { font-size: calc(var(--base-size) * 1.2); font-weight: 400; line-height: calc((var(--base-size) * 1.2) * var(--base-lineheight)); color: color(var(--highlight-color) saturation(+50%)); } a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease-in; } a:hover { color: color(var(--link-color) lightness(-10%)); transition: color 0.4s ease-out; } /* Layout */ header { display: block; width: 100%; min-height: 500px; padding-top: 100px; background: var(--dark-bgcolor) url(header-bg.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; color: var(--dark-bgcolor-text-color); } .container { position: relative; width: 96%; max-width: var(--max-width); margin: 0 auto; } .fullcol, .halfcol, .fourthcol { float: left; box-sizing: border-box; margin-left: var(--gutter); } .container .fullcol, .container .halfcol:first-child, .container .fourthcol:first-child { margin-left: 0; } .fullcol { width: 100%; text-align: center; } .halfcol { width: calc((100% - var(--gutter)) / 2); } .fourthcol { width: calc(((100% - (var(--gutter) * 3)) / 4)); } section { float: left; width: 100%; padding-top: 80px; padding-bottom: 80px; } /* Special */ .logo { margin-top: 0; font-family: "Montserrat", sans-serif; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 2px; } .tagline { text-transform: uppercase; } .button { display: block; width: 90%; max-width: 220px; margin: 30px auto 50px auto; background: var(--link-color); color: var(--dark-bgcolor-text-color); border-radius: 6px; padding: 10px; transition: background-color 0.4s ease-out, color 0.3s ease-out; } .button:hover { background: color(var(--link-color) tint(50%)); color: color(var(--dark-bgcolor-text-color) whiteness(100%)); transition: background-color 0.3s ease-in, color 0.2s ease-in; } .credits { margin: 80px auto 20px auto; font-size: calc(var(--base-size) * 0.75); color: color(var(--dark-bgcolor-text-color) hue(+120%)); } #work { background: color(var(--dark-bgcolor) lightness(+30%)); } #contact { background: color(var(--highlight-color) saturation(-30%)); color: var(--dark-bgcolor-text-color); } #contact h2 { color: color(var(--dark-bgcolor-text-color) saturation(+20%)); } /* Media Queries */ @media (--small-devices) { .fullcol, .halfcol, .fourthcol { width: 100%; margin-left: 0; text-align: center; } .button, .tagline { font-size: var(--small-size); } .logo { margin-top: 0; font-size: calc(var(--base-size) * 1.8); line-height: calc((var(--base-size) * 1.8) * var(--base-lineheight)); } } @media (--medium-devices) { .fourthcol { width: calc((100% - var(--gutter)) / 2); margin-left: var(--gutter); margin-bottom: 20px; } .container .fourthcol:nth-child(odd) { margin-left: 0; clear: left; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デバッグ

Mythを使用すると、エラーが発生した場合、Node.jsコマンドラインにエラーに関する情報が表示されるため、デバッグツールと見なすことができます。 たとえば、カスタムメディアクエリがアドバタイズされていない場合、次の図が表示されます。







また、何か問題が発生した場合、Mythデバッガーは次の情報を提供します。

• 正確に何が起こった;
• これはどの行で発生しましたか。
• ミスに対応して神話がしたこと。
• 問題に対する提案された解決策。

パフォーマンス向上のためのCSS最適化

Webサーバーでサイトをホストする前にパフォーマンスを改善するためにできることは、スタイルシートを縮小することです（1行で記述します）。 神話では、このプロセスは自動化され、-compress関数を使用して実装されます。

 myth --compress dev.css styles.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、ファイルサイズが20％削減されました。

神話のコマンドの詳細

チームは短縮形で記述することもできます。 たとえば、次のように自由に記述できます。

 myth -c -w dev.css styles.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

代わりに：

 myth --compress --watch dev.css styles.css
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

詳細については、公式Webサイトのチームのリストを参照してください。

結論

神話は優れたプリプロセッサであり、実験的なすべてのCSS機能の使用を開始したい開発者に最適です。 さらに、Mythを使用するために追加のマークアップ言語を学ぶ必要はありません。これはもちろん大きなプラスです。 そして最後に、この記事の例として、プロジェクトのデモとソースコードへのリンクを複製します。



デモ

ソースコード



翻訳のソース： www.sitepoint.com/getting-started-myth-preprocessor-future/