TeaCSS-スタイルを作成するための明らかなアプローチ

はじめに

CSSに似た言語はそれほど多くはありませんが、SassとLessはすべて耳に浮かんでいますが、「もう1つ必要なのはなぜですか」という質問の答えから始めましょう。



要するに、TeaCSSは新しいエンティティを生成しません。これは、JavaScriptが言語として追加されたのと同じCSSであるためです。



このアプローチには長所と短所があります。



長所-落とし穴はほとんどありません。 ティーファイルはJavaScriptに変換され、単純な出力コマンドが入力されます。 このJavaScriptはデバッグでき、FireBugで見ることができ、一般にその動作は予測されています。 これはアプローチの証拠であり、JSはすでにウェブ上で普及しているため、新しいことを学ぶ必要はありません。





短所-「ピクセル」、「パーセント」など、CSSドメインの一部のエンティティが失われます。 テキストと同じようにCSSを使用します。 幅を記述する必要があります：@ {100 + 200} pxではなく、 幅：100px + 200pxです。



TeaCSSは、学習する新しい言語ではなく、単なるCSSテンプレートエンジンまたはプリプロセッサです。 これが彼の長所と短所です。



複雑さを増していく中で、言語とそれが開発されたタスクについて語るいくつかの記事を書くつもりでした。



この（最初の）記事では、開発サイクルにTeaCSSを含める方法について説明し、SassとLessがどのように知らないが、今日の記事の主人公がするかを例で示します。

短いチュートリアル

Sass and Lessを使用している場合は、斜めに読むことができます。



TeaCSSで記述できる3つの簡単なものがあります。 これは：

1. 埋め込みJavascript
2. ネストされたルール
3. ミックスイン（オプションで、アイテム1に置き換えることができます）

埋め込みJavascript

CSS処理中に、任意のJSコードを実行できます。 記述されているとおりに実行されます。 これにより、変数、関数を宣言したり、同様のルールを宣言するループを実行したり、画像を生成したり、補助インターフェイスを描画したりできます。



コードの実行は簡単です：

/*   */ @ var baseColor = 'red';
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

または：

 /*   */ @{ var baseColor = 'red'; var borderColor = darken('red',20); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、CSSルール内でJS式を使用できます。



例：

 body { color: @baseColor; } //   ,  /*   @{}      */ body { color: @{lighten(baseColor,Math.sin(3.14)); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ネストされたルール

ラダーを使用して複合セレクターを作成できます。

 /* TeaCSS */ #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ミックスイン

LESSに似た構文糖。 パラメータを使用して、異なるコンテキストで使用する一連のルールを保存できます。

 .my_mixin(color) { // -     my_mixin = function (color) { color: @color; } body { .my_mixin('red'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

詳細な説明については、ウェブサイト-teacss.orgを参照してください

プロジェクトへの接続方法

teacssは本番環境でCSSの代替になるふりをしないことを理解することは非常に重要です。これは開発ソリューションであるため、TeaCSSを通常のCSSに変える方法、およびブラウザーで直接行われることを確認する方法が必要です。



すべてを表示するのは簡単です。

 <link tea="style.tea"> <script src="teacss.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして出来上がり、あなたはあなたのスタイルのプレビューを現在のページで見るでしょう。 私のプロジェクトでは、次のようなものを使用しています。

 <? if $applicationMode=='development' ?> <link tea="style.tea"> <script src="teacss.js"></script> <? else ?> <link type="text/css" rel="stylesheet" href="style.css"> <? endif ?>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

問題は残ります。* .teaを* .cssに変換する方法



以前のバージョンでは、このためのコンソールユーティリティがありましたが、 TeaCSSはCanvasのようなさまざまな純粋なブラウザチップのサポートを開始したため、この問題を開発者に任せることにしました。 ファイルを保存するためのシンプルなインターフェイスを表示し、結果のテキストをどう処理するかを決定できます。 一般に、これは「あなたのコードはあなたのIDE」という大きな概念の一部であり、これについては今後の記事で説明しますが、今のところは次のようなものを追加してください。

 <script> teacss.buildCallback(function(files){ $.post(location.href,{css:files['default.css']}); }); <? if (isset($_POST['css']) file_put_contents('your/location/style.css', $_POST['css']) ?> </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同様に、他のサーバー言語でも（ところで、プルリクエストは大歓迎です）。

その場で写真を作成

この記事の最初で唯一の焦点。



実際、組み込みのteacss Canvasはブラウザキャンバスのラッパーです。このようなラッパーを使用すると、WebGLと通常の2次元コンテキストを使用して画像を生成できます。



* .teaを* .cssに変換する場合、生成されたイメージをファイルに保存できます。 なぜこれが必要なのですか？



CSSの変数について話し、開発へのDRYアプローチの例を挙げれば、同じLESSの開発者は不誠実です。 すべてのデザインを純粋なCSSにできるわけではありません。これは少数で実現できるサイトです。 トリッキーなボーダー、背景、帽子などのほとんど これらの変数（基本色など）にも依存するため、値を簡単に変更した後は、Photoshopを開いて、サイトのグラフィックを再描画または変更する必要があります。



teacssを使用すると、グラフィックスもパラメトリックにできます（ドキュメントの例）：

 @ color1 = 'red'; @ color2 = 'blue'; body { @{ // pretty clear here, huh? var canvas = new Canvas("background.png"); canvas.replaceColors( { '#ffae00':color1, '#f7e7ba':lighten(color1,30), '#705551':color2 }); // display canvas.background('bg.png'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

原理をより完全に理解するために、0の背景の生成を示します。たとえば、縞模様の背景。 ちなみに、ミックスインとしてアレンジして、その後のプロジェクトで使用できます。

 .background_striped(size,width,color) { @{ (new Canvas(size,size)) .draw2D(function(ctx){ ctx.beginPath(); ctx.lineWidth = width; ctx.strokeStyle = color.toString(); ctx.moveTo(-size,-size); ctx.lineTo(size*2,size*2); ctx.moveTo(-size-size,-size); ctx.lineTo(size,size*2); ctx.moveTo(-size+size,-size); ctx.lineTo(size*3,size*2); ctx.stroke(); }) .background(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これは使用例です：

teacss.org/stripes.htm

おわりに

おそらく、前のセクションから明らかになったように、teacssはCSSテンプレートエンジンではありません。 たとえば、写真も提供します。 さらに、ユニバーサルテンプレートエンジンとして使用でき、モバイルインターフェイス、テンプレート、およびスクリプトを生成できます。



これとプロジェクト自体のアーキテクチャについては、次の記事で説明します。

PS

この記事を書くことにしました 実際、私は最新のAdobeプロジェクトであるBracketsとKickstarter Light-tableに非常によく似たことを同時に行っています。 しかし、いくつかの違いがあり、それらは重要であると思われます。それらについて話すには、プロジェクトの基礎となるライブラリーteacssから始める必要があります。 この大きなプロジェクトで志を同じくする人々やアシスタント/パートナーを見つけたいと思っています。