プリプロセッサCSS：レビュー、選択、アプリケーション。テキストシールドへの代替案

CSSプリプロセッサ（CSSプリプロセッサ）- これはCSSの中で追加されたものです。これは、追加の構文構造を使用してCSSの新しい機能と機能を提供します。

プリプロセッサの目的：Web開発者に便利な構文デザインを提供し、プロジェクトのスタイルの開発とサポートを簡素化してスピードアップします。

CSSプリプロセッサは、プリプロセッサの言語を使用してコードを作成し、有効です。

プリプロセッサの助けを借りて、書かれたコードは次のようになります：人間、構造化された論理的、生産的です。

最も人気のあるプリプロセッサの中で割り当てられますより少ない、SASS（SCS）、スタイラス。また、この分野で多かれ少なかれ顕著なツールは閉鎖スタイルシート、CSS Crush、その現時点では人気が低くなりますが、同じものはすべて開発者を使用しています。 SASS（SCSS）、スタイラスの可能性と機能を理解しようとしましょう。

標準 cSSを使用する。かなり複雑です。ネスティングなしの構文は、視覚認識に直接複雑です。通常の変数と関数がないと、CSSコードは狭く、必要な詳細ではなく多くの余分なものになります。

利用可能なドキュメント - 過剰なコストなしに、短時間で選択されたプリプロセッサを習得できます。 2番目の利点は、プリプロセッサの使用を簡単にすることです。これを行うには、インストールするだけです特別プログラムプリプロセッサを対象としたファイルに従ってください。変更時に、これらのファイルの内容をクリーンCSSコードでコンパイルします。

より高度なユーザーのために、特別なプロジェクトコレクターがあります。

もっと少なく - 最も人気があり頻繁に使用されるプリプロセッサ。 JavaScriptに基づいて設計されており、プリプロセッサの基本的な可能性が含まれていますが、通常の理解に条件付き構造とサイクルを提供しません。その単純さと簡潔さのために、CSSのための標準的な構文と、プラグインの機能により機能を拡大する可能性があります。

より少ないCSS動的機能：変数、ミキシング（ミックス）、操作、および機能。ドキュメントは開発者にとって非常にフレンドリーであり、構文は純粋なCSSと非常によく似ています。 Twitterブートストラップなどの人気のあるフレームワークで、動的な機能が積極的に使用されています。ただし、スタイルシート内のどこにでもクラスを混合することができません。

もう一つの強力で人気のプリプロセッサー - SASS。。この道具の周りに開発者の巨大なコミュニティが形成されました。それは2007年にHAMLのモジュールとして設立され、Rubyで書かれています（C ++のポートを提供）。それは少ないと比較して、さまざまな機能を持っています。プリプロセッサはコンパスライブラリのためにその機能を拡大し、それはCSSフレームを超えてより大きく取り組むことを可能にする。 2種類の構文：SASS（Syntactive Awesomeスタイルシート）、アイドリングに基づくより単純なCSS構文。彼はより古くなった版と考えられています。 SCSS（SASKY CSS）は、CSS構文の標準に基づいています。

- かなり若い、すでにCSSプリプロセッサーを約束しています。 2010年に戻ってきました。多くはそれが快適で拡張可能なプリプロセッサー、そしてSASSよりも柔軟性があります。 JavaScript用に設計されています。そのようなCSSから簡単で簡単に多くの構文オプションをサポートしています。

開発者向けの便利なツール：

コードキット。：SASS、LESSおよびSTYLUSファイルをコンパイルしてから、ファイルを更新した後にWebブラウザを自動的にオーバーロードします。システム性能を向上させるためにプロジェクト画像を最適化することを含みます。技術が支払われますが、仕事のための試用版もあります。
リバローロード：ファイルの変更を確認してから、それらを処理して自動的にWebブラウザを再起動します。バージョンはMacとWindowsで動作します。
スカウト。：Ruby環境でのSASSとCompassで動作します。 MacとWindowsのために機能します。
シンプルな。：MacおよびWindows用の通常のCSSコンパイラと単純なCSSコンパイラ。

その作業にCureプリプロセッサを選択するには、いくつか使用してみてください。そしてテストの結果によると、あなたはあなたの選択をするのがはるかに簡単でしょう。また、プリプロセッサを開発するときには、学習していないことを忘れないでください。新しい言語しかし、新しい構文と機能のみを学習します。会社 ™ 世界のCSSであなたに快適な仕事を願っています！

2545回 1今日は一度見た（a）

絶対に経験豊富なVestovelsはプリプロセッサを使用しています。例外なく。この活動に成功したい場合は、これらのプログラムについて忘れないでください。一見すると、彼らは新人静かな恐怖を呼ぶことができます - それはすでにプログラミングに似ています！実際、あなたはその日についてのCSSプリプロセッサのすべての機能を扱うことができます、そしてあなたが試しているなら、それから数時間で。将来的には、彼らは人生を大幅に簡素化するでしょう。

プリプロセッサCSSがどのように現れたか

この技術の特殊性をよりよく理解するために、私たちはWebページの視覚的表示の開発の歴史に一時的に没頭します。

インターネットの大量使用のみが始まったとき、スタイルテーブルは存在しませんでした。ドキュメント設計はブラウザからのみ依存していました。それらのそれぞれは、特定のタグを処理するために使用された独自のスタイルを持っていました。したがって、ページはどのブラウザを開いたかによって異なります。結果はカオス、混乱、開発者の問題です。

1994年、ノルウェーのホコン・リーは登録に使用できるスタイルテーブルを開発しました外観 HTML文書とは別にページ。その考えはW3Cコンソーシアムの代表者に直面しており、すぐに洗練され始めました。数年後、CSS仕様の最初のバージョンが公開されました。彼女は常に改善された、洗練された...しかし、概念はすべて同じままであった：特定のプロパティは各スタイルに設定されています。

using テーブルCSS。常に引き起こされました特定の問題。たとえば、冒険者たちは、ソートとグループ化の難しされていることがよくあり、すべてが非常に明確ではありません。

そして今2千分の2歳が来ます。より多くの頻繁にマーキングがプロのフロントエンド開発者に従事し始め、スタイルを使った柔軟で動的な仕事が重要でした。その時点で存在するCSSは、新しいブラウザ機能のプレフィックスと追跡サポートの配置を要求しました。その後、JavaScriptとRuby Specialististは、CSS用の前提条件を作成し、新しい機会を追加して作業を行いました。

初心者のためのCSS：プリプロセッサの機能

それらはいくつかの機能を実行します。

ブラウザの接頭辞とカーキを統一する。

構文を単純化する。

エラーなしでネストされたセレクタを操作することを可能にします。

定型化の論理を改善します。

要するに、プリプロセッサはCSSにプログラミングロジックを追加します。今度は、スタイルの通常の危険性によって、そしていくつかの簡単な技術とアプローチの助けを借りて実行されます：変数、関数、ミックス、サイクル、条件。さらに、数学を使用することが可能でした。

そのようなアドオンの人気を見て、W3Cはそれらの機能をCSSコードに徐々に追加し始めました。たとえば、calc（）関数は仕様内に表示され、これは多くのブラウザでサポートされています。すぐに変数を設定してミックスを作成することが可能になることが予想されます。しかし、これは遠い将来に起こり、前処理はすでにここにあり、すでにうまくいっています。

SASS変数

変数は$記号を使用して宣言されています。それらはプロパティとキットを保存することができます。例えば、次のようにします。 "$ Bordersolid：1px Solid Red"。この例では、BornerSolidという変数を宣言し、1pxのソリッドレッドを保存しました。今、CSSでは1pxで赤い境界線幅を作成する必要がある場合は、プロパティ名の後にこの変数を表示します。発表後、変数を変更することはできません。利用可能な複数の組み込み機能。たとえば、$ redcolor変数を＃ff5050値で宣言します。 CSSコードでは、いくつかの要素のプロパティで、フォントの色を指定するために使用します.p（color：$ redcolor;）。色を実験したいですか？暗号または照明機能を使用してください。これはこのようにして行われます.p（カラー：暗く（$ redcolor、20％））。その結果、RedColorの色は20％軽量になります。

ネスティング

以前は、ネスティングを指定するために長く、不快な設計を使用する必要がありました。 PIVがあること、そしてその中にはPIVがあると想像してください。 DIVの場合は、P - 黄色、スパン - ピンクのために赤いフォントの色を設定する必要があります。通常のCSSでは、次のように行われます。

CSSプリプロセッサの助けを借りて、すべてが簡単でコンパクトになります。

要素は文字通り「投資」されています。

プリプロセッサディレクティブ

@importディレクティブを使用して、ファイルをインポートできます。たとえば、fonts.sassファイルがあります。これはフォント用のスタイルを宣言しました。メインファイルのスタイルのSASS：@import 'fonts'に接続します。準備ができて！スタイルを持つ大規模なファイルの代わりに、私たちには迅速かつ簡単なアクセスが希望のプロパティにアクセスできます。

ミックス

最も興味深いアイデアの1つ。 1行全体のプロパティを設定できます。次のように機能します。

@mixin largefont（

フォントファミリー：「Times New Roman」;

フォントサイズ：64px;

線高さ：80px;

フォントウェイト：太字;

ページ上のアイテムにミキシングを適用するには、@includeディレクティブを使用します。たとえば、H1ヘッダーに適用します。次のデザインが表示されます.H1（@include：Largefont;）

ミキシングのすべてのプロパティはh1要素に割り当てられます。

プリプロセッサ数

SASS構文はプログラミングについて思い出させます。初心者のためのCSS研究に合ったオプションを探している場合は、それほど注意してください。 2009年に作成されました。主な機能は、事業者へのプログラミングに不慣れなネイティブのサポートです。それはそれを習得しやすくなります。

変数は@記号を使用して宣言されています。例：@FontSize：14px;。ネスティングは、SASSと同じ原則に役立ちます。 MixInsは次のように宣言されています.LargeFont（）（Font-Face： 'Times New Roman'; font-size：64px; line-height：80px; font-wimme：bold;）。接続するには、Preprocessorsディレクティブを使用する必要はありません - 選択されたアイテムのプロパティに新たに指示されたミックスを追加するだけです。例えば、H1（.largeFont;）。

スタイラス。

別のプリプロセッサ 2011年に同じ著者によって、Jade、Express、その他の有用な製品を与えたのと同じ著者によって作成されました。

変数は、明示的または暗黙的に2つの方法で宣言できます。例：font \u003d 'times new roman'; - これは暗黙のオプションです。しかし$ font \u003d 'times new roman'は明らかです。ミックスインは宣言されて暗黙的に接続されています。構文：redcolor（）カラーレッド。これで、次のような項目を追加できます.h1 redcolor（）;

一見すると、スタイラスは理解できないようです。「親戚」の括弧とセミコロンはどこですか？しかし、それはプランジにそれを表すだけです、すべてがすべてが明確になるのか。ただし、このプリプロセッサによる長期的な開発は、古典的なCSS構文を使用することができます。必要に応じて、「クリーン」スタイルで動作するように問題が発生します。

選択するプリプロセッサー？

実際、それは問題ではありません。すべてのオプションはほぼ同じ機能を提供し、単に異なる構文構文を提供します。次のようにすることをお勧めします。

あなたがプログラマーであり、コードを使ってスタイルを使って仕事をしたい場合は、sassを使用してください。
あなたが予測であり、定期的なレイアウトのようにスタイルを扱いたいのなら、それに注意してください。
あなたがミニマリズムが好きなら、スタイラスを使ってください。

すべてのオプションについては、開発を簡単に簡単にすることができる膨大な数の興味深いライブラリがあります。 SASSユーザーはコンパスに注意を払うことをお勧めします - 強力なツール複数の組み込み機能を使用しています。たとえば、インストール後、ベンダーのプレフィックスを心配する必要はありません。グリッドでの作業を簡素化します。花、スプライトを扱うためのユーティリティがあります。すでに宣言されているMIXINSの数が利用可能です。これを数日間媒体に送ってください - それによって将来多くの努力と時間を節約します。

現代のCSS - 電源、およびプリプロセッサとの組み合わせ - ページ上のコンテンツの設計のための一般的な戦闘機。この記事では、例の拡張SASS / SCSSマニュアルを提供します。読んだ後、さらに大きなスタイルのためにミックスイン、変数、およびディレクティブの使い方を学びましょう。

（注）ブラウザがそれを理解して正しく表示できるように、SASS / SCSSコード全体はCSSでコンパイルされています。現在、ブラウザはSASS / SCSSの作業や他のCSSプリプロセッサを直接サポートしていません。標準のCSS仕様では、類似の機能は提供されません。

CSSの代わりにSASS / SCSSを使用するのはなぜですか？

ネスティング - SCSSを使用すると、CSS規則をお互いに投資できます。ネストされた規則は、外部セレクタに対応する要素に対してのみ適用されます（そして私たちがSASSについて話している場合は、すべてが括弧なしでは美しく理解できない）。
変数 - 標準のCSSには変数の概念もありますが、SASSでは少し違って作業できます。たとえば、@forディレクティブを通して繰り返します。または動的にプロパティを生成します。詳細は、プロジェクトのロシア語を話すサイトを探索できます。
改善された数学的業務- CSS値を追加、差し引き、積算し、除算することができます。標準のCSSとは異なり、SASS / SCSSではCalc（）なしで行うことができます。
三角法 - SCSSを使用すると、JavaScriptのような他の言語でできるように、SASS / SCSSの構文のみを使用して、独自の（正弦波と余弦）機能を作成できます。
指令 @しばらく そして式 @ if-else - あなたは他の言語から身近な要素を使ってCSSコードを書くことができます。しかし、共有しない - 結果として、出力は通常のCSSになります。
ミキシン（不純物） - 一連のCSSプロパティを一度作成し、もう一度操作するか、または他の値と混在させることができます。 MIXININSを使用して個別の1つのレイアウトを作成できます。不純物は、SASS文書で許可されているCSS規則全体またはその他の許可されていてもよい。彼らは議論を受けることさえできます、それはあなたが少量のミックスを持つさまざまなスタイルを作成することを可能にします。
関数 - 繰り返し使用するための関数の形でCSS定義を作成できます。

プリプロセッサセラス

Sassは動的ではありません。 CSSプロパティとリアルタイム値を生成および/またはアニメート化することはできません。しかし、あなたはそれらをより多く作成することができます効果的な方法そして、標準のプロパティ（CSS上のアニメーションのような）をそこから借りることを許可します。

構文

SCSSは、新しい構文を除いて、新しい構文を除いて、特に新しいCSS機能を追加しません。これは、コードの書き込みの時間をカットします。

前提条件

5つのCSSプリプロセッサがあります：SASS、SCSS、LESS、スタイラス、POSTCS

ほとんどの部分についてはSCSSをカバーしています。これはSASSに似ています。これらのプリプロセッサについての詳細を読むことができます。オーバーフローやカルー（ロシア語への翻訳）を読むことができます。

sass - （.sass） syntactally。 A.ウェソーム。 sタイル。 sかかと。

SCSS - （.scss） SASS。y。 C.アスケード。 sタイル。 sかかと。

拡張子.sass i.scssは似ていますが、それでも同じではありません。ファンのためにコマンドライン変換方法を提示します。

SSSSのSASSからの変換$ SASS-Convert Style.Sast Style.css＃SCSSからのSCSSからの変換$ SASS-Convert.scss style.sass

Sassは、ファイルの拡張子を持つSCSSの最初の仕様です。その開発は2006年に始まりましたが、後で代替構文が拡大して開発されました。CSSS

注意機能を持つ他のプリプロセッサはSCSSに似ていますが、構文は異なる場合があります。また、CSSで動作するすべてのものも、SASSとSCSSでも完全に再生されます。

変数

SASS / SCSSを使用すると、変数を処理できます。 CSSでは、それらはダブルダッシュ（ - ）、およびプリプロセッサでドル記号（$）で表されます。

$数：1; $ color：＃ff0000; $テキスト： "永遠にtproger。"; $テキスト：「永遠に」！デフォルト; $ nothing：null;

値がまだない変数でデフォルト値を割り当てることができます。値の末尾にデフォルトで設定できます。この場合、変数が既に値に割り当てられている場合は、変更されません。変数が空の場合は、新しい指定値が割り当てられます。

#Container（コンテンツ：$ text;）

SASS変数は任意のプロパティに割り当てることができます。

入れ子のルール

スペースを使用した標準ネストCSS要素：

/ *ネストされた規則* / #a（色：赤;）#a #b（色：緑、）#a＃b＃c p（色：青;）

SCSSの同じネストされたアイテム：

/ *ネストされた規則* / #a（色：赤; #b（色：緑、#c p（color：blue;）））

見られるように、構文はクリーナーに見え、繰り返されます。

これは、過負荷レイアウトを制御するときに特に便利です。したがって、添付の特性がコード内に記録されている位置合わせは、アプリケーションレイアウトの実際の構造に完全に対応します。

プリプロセッサのシーンの背後には、それをブラウザに表示できるように標準のCSSコード（上に示す）にコンパイルします。私たちはCSSの書き方を変えるだけです。

アンパサンド

#p（カラー：ブラック; a（フォントウェイト：太字;＆：hover（color：red;）））

記号では、親セレクタを挿入する必要がある場所を明示的に示すことができます。

下のCSSのSASSを（前の例から）コンパイルした結果。

#p（色：黒;）#p a（フォントウェイト：太字;）#p a：hover（色：赤;）

その結果、アンパサンドは親要素Aの名前（A：Hover）にコンパイルされました。

ミキシン（それらは不純物です）

ミキシンは、特性を含むセレクタも含み得る。そしてセレクタには、アンパサンド（＆）を介した親要素へのリンクを含めることができます、あなたはそれについて覚えていますか？

複数のブラウザを使用しているサンプル

CSSの中のいくつかのことは、特にCSS3で書くことが非常に面倒です。たくさんのベンダーのプレフィックス（-webkit-または-moz-）。

MixInsサイトで複数回使用する必要があるCSS宣言グループを作成できます。ベンダープレフィックスのためのMIXINSの使用が良い慣習になります。例：

@mixin境界線（$ RADIUS）（// FOREBIS）（-webkit-border-radius：$ RADIUS; // chrome; // safari -moz-border-radius：$ RADIUS; // Firefox -ms-border-radius： $ RADIUS; // Internet Explorer -o-border-RADIUS：$ RADIUS; // OPERA BORERD RADIUS：$ RADIUS; //標準CSS）//作成後の境界線ミキサーを使用する例。ボックス（@include境界半径（10px）;）

算術演算

実生活と同様に、互換性のないデータ型（たとえば、PXとEMの追加など）で動作することはできません。

加減

P（フォントサイズ：10px + 2em; //エラー！フォントサイズ：10px + 6px; // 16PXフォントサイズ：10px + 2; // 12px）

折り畳まれたデータの種類に常に注意を払ってください。つまり、ピクセル用のピクセル、象から象への象。同じように、減算は機能しますが、マイナス記号を使用しています。

実行例：

乗算

Calc（A * B）を使用して、CCS（A * B）を使用してCSSと同じ方法で実行されます。さらに、乗算の符号を数字からスペースで区切ることができます（5 * 6 \u003d\u003d 5 * 6）。

例外は、ピクセルを自分で乗算できません。つまり、10px * 10px！\u003d 100pxです。 10px * 10 \u003d\u003d 100px。

P（幅：10px * 10px; //;幅：10px * 10; // 100px * 10; // 100px * 10; // 10px幅：5 *（5px + 5px）; // 50px幅：5px +（ 10px / 2）* 3; // 20PX）

分割

物事の分割ではもう少し難しいですが、標準のCSSの斜線では短い形式の筆記特性によって使用するために予約されているため、それを理解することができます。以下の例

/ *財産記録の簡単な形* /フォント：イタリック体の大胆.8em / 1.2アリア、Sans-Serif。 / *標準フォーム記録フォーム* /フォントスタイル：イタリック; フォントウェイト：太字; フォントサイズ：.8em; 線高さ：1.2; フォントファミリー：アリア、Sans-Serif;

分割の可能性を述べた3つのアシスタントがあります。

値（またはITの任意の部分）は、関数によって変数に格納されます。
値は括弧内に囲まれています。
値は別の算術式の一部として使用されます。

$ var1：20; $ var2：4; P（上：16px / 24px; //標準のCSSの上に表示されていません：（20px / 5px）; //解散する（ただし、括弧を使用する場合にのみ）トップ：＃（$ var1）/＃（$ var2）; / /定期的なCSSコードとして表示されます。$ var1 / $ var2; // Decision Top：Random（4）/ 5; // deliveryが実行されます（関数を持つペアで使用されている場合）top： 2px / 4px + 3px; //分割は、もう1つの算術演算が追加された場合に実行されます）

CSSコンパイル結果

P（上：16px / 24px;上：4;上：20/4;上：5;上：0.6;上：3.5px;）

残基

残留物は分割動作の残りを計算します。以下は、HTMLリストの「ゼブラ」を作成する方法を調べます。

@mixin Zebra（）（@ for 1から7（@IF（$ I％2 \u003d\u003d 1）（.stripe - ＃（$ i）（$ i）（背景色：黒;色：白;））* （@include Zebra（）; text-align：center;）

ゼブラの混合を作成することは、上からコードの挿入に示されている。 Directive @FORと@IFについては、以下のセクションで説明します。

サンプルを作成するには、複数のHTML要素を作成する必要があります。

シマウマ。

ブラウザの結果：

シマウマはミクシンシマウマによって成功しました

オペレータの比較

@IFディレクティブはSASSScriptを受け入れ、式がfalseまたはnull以外の値を返す場合にネストされたスタイルを使用します。

以下は、@IFと@ELSEディレクティブがどのように混合に投資されているかを示しています。

@Mixin Spaction（$ PADDING、$ MARGIN）（@IF（$ PADDING\u003e $ MARGIN）（パディング：$ PADDING;）@ELSE（パディング：$マージン;）。コンテイナー（@Include Spacing（10px、20px）;）

行動の比較 Mixin Spactionはパディングのサイズを選択し、1つがマージンより大きい場合は。

CSSをコンパイルした後

コンテナ（パディング：20px;）

論理演算子

論理演算子の説明

SASS論理演算子を使用して、その幅に応じてバックグラウンドを変更するボタンを作成します。

@mixin button-color（$ height、$ width）（@IF（$高さ）< $width) and ($width >\u003d 35px））（背景色：青;）@ELSE（背景色：緑;）.button（@include button-color（20px、30px））

弦

CSSでは、2種類の文字列が定義されています。引用符付きおよびなしで。 Sassは両方を認識します。その結果、SASSで使用されている文字列の種類がCSSで受け取ります。

場合によっては、INの行を追加できます有効な値引用符なしでは、追加された文字列が最終的な要素の場合に限ります。

P（フォント：50px ARI + "Al"; // 50px arialでコンパイルされた）

以下の例では、必要な方法を示しています。

P（フォント： "50px" + arial; //エラー！）

あなたは折り目を折りたたむことができます他の種類スペースがない場合。以下の例はコンパイルされません。

P：後（内容：「Linus」+ TORVALDS！//エラー！）

P：後（コンテンツ： "Return Linus" + "Torvalds！"; // torvaldsに注意を払う！」

複数行の追加例：

P：後（コンテンツ：「ロット」+「人間性」+「 - 」+「繰り返し」。」

行と数字の追加

P：後（内容：「再帰」+ 2013 +「消費者溶接機」;）

注意 Contentプロパティは、PSeudoセレクタのみでのみ機能します。 CSS文書内のコンテンツを使用しないことをお勧めしますが、HTML内のタグ間で直接使用します。

フロー制御演算子

SCSSには機能（Cucaction（））と指令（@ dilective）があります。上のすぐ上に、私たちはすでにミックス内の引数の伝送を検討したときの関数の一例を検討しました。

関数は通常、その名前のすぐに次のような括弧内で構成されています。そして指令は記号@で始まります。

JavaScriptのように、SCSSでは、標準のフロー制御演算子のセットを使用することができます。

if（）

if（）は関数（そして時には人工知能の基礎）です。

その使用はかなりプリミティブに見えます：オペレータは条件で指定された2つの値のうちの1つを返します。

/ *関数if（）* / if（true、1px、2px）\u003d\u003e 1pxを使用します。 if（false、1px、2px）\u003d\u003e 2px。

@IF。

@IFは条件に基づく分岐に使用されるディレクティブです。

/ * Directive @IF * / P（@IF 1 + 1 \u003d\u003d 2（境界線：1PXソリッド;）@IF 7の使用< 5 { border: 2px dotted; } @if null { border: 3px double; } }

完了結果

P（ボーダー：1ピクセル;）

以下は@ELSE指令を追加したコンボ分岐です。

/ *変数$ type * / $ typeを作成：river; / *青のコンテナX型可変の値 - 川* / div（@IF $ TYPE \u003d\u003d川（色：青;））/ *タグ内のテキストの条件付き色

* / P（@IF $ TYPE \u003d\u003dツリー（色：緑;）@elseの場合$ type \u003d\u003d river（color：blue;）@else $ type \u003d\u003d dart（color：brown;））

親要素の存在を確認してください

アンパサンドが存在する場合は親要素を選択します。この場合、NULLは戻ります。したがって、@IF指令と組み合わせて使用\u200b\u200bすることができます。

次の例では、親要素の存在に応じて条件付きCSSスタイルの作成を検討してください。

/ *親要素の存在を確認します* / @mixin do-parent-exist（@if＆（/ *存在する場合は、青い色を存在する場合は、青色; /＆：all;））@else（ / *要素が存在しない、参照する青の使用* / A（色：青;）））

ディレクティブ@フォワー

Directive @FORは一連のスタイルを設定回数表示します。繰り返しごとに、メーター変数を使用して出力を変更します。

指令@forは5回適しています。

@から5（.definition - ＃（$ i）（幅：10px * $ I;））

CSSコンパイル結果

定義-1（幅：10px;）.definition-2（幅：20px;）.definition-3（幅：30px;）.definition-4（幅：40px;）.definition-5（幅：50px;）

ディレクトリブ@

@Eachディレクティブは、リストまたは辞書の各値に$ VARを設定し、対応する$ varの値を使用してそれに含まれるスタイルを表示します。

@AThch $動物、ライオン、羊、鳩（＃（$動物）--ICON（バックグラウンド画像：URL（ "/画像/＃（$動物）.png"）））））））））））））））））

CSSコンパイル結果

Platypus-icon（backgance-image：URL（ "/ images / platypus.png"）;）.lion-icon（background-image：URL（ "/ images / lion.png"）;）.sheep-icon（バックグラウンド - 画像：URL（ "/ images / sheep.png"）。）.dove-icon（background-image：URL（ "/ images / dove.png"）;）

指令@while。

@Whileディレクティブは、SASSScriptの表現を受け入れ、表現がTRUEとして計算されるまでそれに投資されたスタイルを周期的に表示します。それは@forが適しているよりも複雑なサイクルを作成するために使用することができますが、それはかなりめったに必要です。例えば：

$インデックス：5; @While $ INDEX\u003e 0（.Element - ＃（$ index）（幅：10px * $ INDEX;）$ INDEX：$ INDEX - 1;）

完了結果

要素-5（幅：50px;）.lement-4（幅：40px;）.lement-3（幅：30px;）.lement-2（幅：20px;）.lement-1（幅：10px;）

SASS / SCSSの機能

SASS / SCSを使用すると、他の言語と同様に機能を使用できます。

300pxを返す300px（）関数を作成します。

@function 3-px（）（@ Return 300px;）.Name（幅：300 px（）;境界：1pxソリッドグレー;表示：ブロック;位置：絶対;）

要素のclass.name幅を適用した後、300ピクセルになります。

こんにちは。

SASSの関数は正しいCSS値を返すことができ、任意のプロパティに割り当てることができます。送信された引数に基づいて計算することもできます。

@Function Double（$ width）（@ Return $ Width * 2;）

三角法

三角関数sin（）およびcos（）は、例えばJavaScriptなどの多くの言語で埋め込みクラスの形でよく見られます。

あなたがユーザーインターフェースアニメーションの開発に費やされた時間を短縮する必要がある場合、たとえばトロビーリアを作成する必要がある場合は、仕事を検討する必要があります。ところで、私たちはすでに記事の一つにいます。しかしB. この場合 HTML文書に挿入されたGIFピクチャはコードになります。

コード数が最小限に抑えられるSIN（）関数を使用して興味深いアニメーション効果を作成するための例をいくつか見てください。次に、この知識を拡大縮小できて、対話型のユーザーインターフェイス要素（円の移動、波状アニメーション）を作成できます。

CSSと組み合わせて三角法を使用する利点は、GIF画像で起こっているように、追加のHTTP要求がない場合に表されます。

あなたは書ける三角関数 SASSで。それについてもっと読む。

あなた自身の機能を書く

三角法では、多くの操作が機能に基づいています。各機能は別の機能に基づいています。たとえば、RAD（）関数はPI（）を使用する必要があります。 cos（）およびsin（）関数はRAD（）の使用を必要とします。

@Function PI（）（@ Return 3.14159265359;）

SASS / SCS上の機能の書き方は、他の言語の機能の書き方と非常によく似ています。

POW（）関数を使用する

@Function Pow（$ NUMBER、$ EXP）（$ value：1; @IF $ EXP\u003e 0（@ for 1から$ i）（$ iから$ i（$ value：$ value * $ number;））@else< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

RAD（）関数を使用する：

@Function RAD（$ angle）（$ ange：単位：単位（$ angle）; $単位なし：$ angle /（$ angle * 0 + 1）; //角度（角度）値が度数（ "deg"）で指定されている場合@IF $ unit \u003d\u003d deg（$単位なし/ 180 * pi（）;）@ Return $ USTRESS;）

接線を計算するには、TAN（）関数は関数sin（）とcos（）を適用する必要があります。

26.07.2017

5つのCSSプリプロセッサ2017、ワークフローをスピードアップします。

CSSプリプロセッサは、CSSプログラマーの作業をよりエキサイティングにするために特別に設計されています。それらはあなたが繰り返し使用する可能性を持つ簡単に編集可能で信頼できるコードを書くことを可能にします。

言い換えれば、CSSプリプロセッサは、新しい機能を持つCSSへの追加です。変数、拡張子、インポートなど。

その記事では、2017年の最高の5 CSSプリプロセッサについて話します。

01. Sass.

Sassは、巨大なコミュニティと強力な機能を持つ最も人気のあるプリプロセッサです。それはRubyと集約されているだけで、学習が非常に簡単です。 Bootstrap、Foundation、Materializeなどのほとんどのフロントエンドのフレームワークは、SASSを使用して構築されています。

SASSには2つの構文があります。

.sassの
.scss

02.スタイラス。

スタイラスは、ダイナミックCSS世代のためのもう1つの素晴らしいプリプロセッサです。カーリーブラケット、コンマ、ポイントをカンマで下げたい場合は、それがあなたのためになることができます最善の選択。 StylusはNode.jsで動作し、インストールと使用が非常に簡単です。彩度（）などのカスタム機能がたくさんあります。他の最先端のコンパイラによって提供されるすべての機能を使用することもできます。

03.少ない。

それ以外のCSSとも知られているのは、もう1つの主要なCSSプリプロセッサです。変数、埋め込みスタイルなど、そのような標準機能が必要な場合は、これは優れた選択です。このJavaScriptライブラリはもともとRubyに書かれていました。

参照：

04.スタイリコウ。

StyleCowは、NPMを使用してインストールすることができるノードに書き込まれたプリプロセッサです。彼は強力なAPIを持っています、あなたは簡単にプラグインを作成することができます。

05. CSSクラッシュ

PHP上に構築されたプリプロセッサは、PHPプログラマのための優れたオプションとなるでしょう。なぜなら、多くのプラットフォームで動作します。 CSS-Cruschには、プリプロセッサ（変数、埋め込みスタイルなど）の通常の機能がすべてあります。

結論

最良のCSSプリプロセッサを探している場合は、ネットワーク上でさまざまなオプションが大変されます。私の考えでは、最高のオプション初心者のためにSASSとスタイラスです。

そして最後に、これらの開発者は新人を嘲笑して停止します！？私は終わりに対処する時間がありませんでした CSS「すべての実際の詩は前足前のものに切り替えました。まあ、純粋なもの CSS 2020年の前夜に！ "何をすべきか？

まず、開発者は新しい技術を発明することを止めません。そしてプロフェッショナルな詩 - それのために感謝しています。スタイルテーブル言語言語 CSS、サイトが原始的である時点で発明された。しかし、長年が行きました、サイトはより困難で大規模になりましたが、レイアウト方法は同じままでした。 Nippersを封印してコードの類似部分を書き込む。サイトの色をすばやく変更することは不可能でした。より大きなレイアウトの自動化が必要とされて現れた プリプロセッサCSS。 コード。そして今日私たちはそれらのうちの1人について話します、 プリプロセッサ数.

より少ないおよび対のコードのコンパイル

コンパイルするために必要とされるすべて もっと少なく コードはコードエディタです vsコード。 そして拡大 簡単なのは簡単です。。使い方？

展開でスタイルファイルを作成します 。もっと少なく
保存後、自動的に生成されます .css. 同じフォルダ内のファイル。

変更を節約するたびに もっと少なく ファイルはBによってコンパイルされます。 CSS ファイルブラウザはまだ理解することを学びました もっと少なく、彼らが必要とする CSS コード。

変数の少ない。

私たちが変数で終わる最も頻繁に使用されるプロパティ。このサイトは通常、繰り返し色やフォントファミリを使用しています。すべての色を変数に入力してから、ルールをカラーコードではなく変数に置き換えます。あなたは尋ねます。「冗談は何ですか？何かを登録する必要がありませんか？

主な機能は高速な色の交換です。色は変数に1回だけ変わります。 1つの変数内の色を置き換えると、サイトのすべてのページに色が置き換えられます。このチップの1つだけがすでに使用するのに十分です。 もっと少なく。宣言する 変数が少ないです。 そして、私たちが必要とする価値を彼らに保ちなさい、私達は意味のある変数の名前を与えます。

@primary：＃194EB4;
@secondary：＃F2B834;
@SUCCESS：＃4CB514;
@Black：＃000;
@white：#fff;

今私たちはしたように通常のコードを書いています CSSしかし、私たちが変数を置き換える値の代わりに。