検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS SASSスタイルプログラミングガイド_HTML/Xhtml_Webページ制作

CSS SASSスタイルプログラミングガイド_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:36:241577ブラウズ

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意を払う必要があります。 CSS (カスケード スタイル シート) の構文から始めて、SASS 構文の特殊な機能のいくつかを説明します。結局のところ、CSS スタイル ガイドは非常に一般的です。

この記事では主に私が個人的に興味のあるいくつかの機能を紹介します。これらの機能から恩恵を受けて、独自の SASS 使用ガイドを作成できるかもしれません。
通常の CSS 書式設定ルールとスタイル ガイドを引き続き維持してください

この記事は SASS のいくつかの側面に焦点を当てていますが、これに基づいて、開発者は既存の適切な書式設定ルールを維持する必要があります。独自の書式設定ルールをまだ作成していない場合は、独自の CSS 記述習慣を身に付けるのに役立ついくつかのスタイル ガイドを確認してください。以下に含まれるもののほんの一部を示します:

1. 行のインデントを一貫して保ちます
2. コロン/中括弧の前後のスペースの数を一貫して保ちます
3. 1 行に 1 つのセレクターと 1 行に 1 つのルールを維持します
4.関連する属性を Together に書き込む
5. クラス名の命名規則を計画する
6. CSS ID セレクターの使用を避ける
7. 待つ

次に、.weather クラスのプロパティの記述を例として、美しい SASS コードの記述方法を学びましょう:
最初のリスト @extend(s)

CSS コードコンテンツをクリップボードにコピーします
  1. .weather {
  2. @extends %module
  3. ...
  4. }

これにより、開発者は明確なアイデアを維持し、このクラスとその属性、および他のクラスとその属性の間の関係をすぐに知ることができ、属性の一貫性と属性の再利用についての明確なアイデアを維持することができます。
通常スタイル

CSS コードコンテンツをクリップボードにコピーします
  1. .weather {
  2. @extends %module
  3. 背景: ライトシアン
  4. ..
  5. }
  6. @include(s)
  8. .weather {
  9. @extends %module
  10. 背景: ライトシアン
  11. @include 遷移(すべて 0.3 秒イーズアウト);
    12. ...
    13. }
これにより、開発者は @extend(s) と @include(s) のデプロイメントを一目で確認できるため、自分自身や他の開発者がコードを解釈しやすくなります。場合によっては、カスタム @include とパブリック ソース @include を区別するかどうかを決定することもできます (特にコードの再利用性と適時性を考慮して)

セレクターのネスト

CSS コード
コンテンツをクリップボードにコピーします
  1. .weather {
  2. @extends %module
  3. 背景: ライトシアン
  4. @include 遷移(すべて 0.3 秒の容易さ);
    5. > h3 {
  6. ボーダーボトム: 1px solid 白;
    7. @includetransform(rotate(90deg));
    8. }
    9. ｝
ネストされたセクション内では、引き続き上記のスタイル ルールを使用します。ネストされた部分は常に最後に来る必要があります。

すべてのベンダー プレフィックスは @mixins を使用します
ベンダー プレフィックス (CSS プレフィックス) は時間に非常に敏感です。 最新のブラウザの更新により、これらのプレフィックスはますます使用されなくなります。ミックスインの内容を更新することで、これらの変更に適応できます (または、ミックスインで使用される一部のライブラリが自動的に更新されます)。 mixin が 1 行であっても問題ありません。

しかし、一部のベンダー プレフィックスの私有化が非常に深刻な場合、これらのプレフィックスを標準化することは非常に困難になり、他のプレフィックスやプレフィックスのないバージョンを適用する価値はなくなり、これらのベンダー プレフィックスの @mixin を放棄することを選択します。たとえば、-webkit-line-clamp、-mscontent-zoom-chaining、または同様の状況です。


3 レベルを超えてネストしないでください


CSS コード
コンテンツをクリップボードにコピーします
3 回以上ネストすると、不正な (悪い?) セレクターを作成する可能性があります。不正行為の理由としては、このセレクターがHTMLの構造に依存しすぎている（不安定）、詳細すぎる（機能が強力すぎて柔軟性がない）、再利用性が低すぎる（あまり使いにくい）などが考えられます。同時に、ネストレベルが多すぎると、コードが難解で理解しにくくなる可能性が高くなります。

場合によっては、クラスに関連するコードが多すぎるため、タグ セレクターを使用する必要があります。不必要なカスケードを避けるために、クラスを厳密に指定する必要がある場合があります。 可能な場合でも、CSS の再利用機能の一部を活用するには、extend を使用してください。



CSS コード
コンテンツをクリップボードにコピーします
  1. .天気
  2. > h3 {
  3. @extend %line-under
  4. }
  5. }

ネストされたコードは 50 行を超えてはなりません

SASS に 50 行を超えるネストがある場合、コンパイラーの 1 ページに完全に表示されない可能性があり、コードが読みにくく、理解しにくくなります。ネストは本来、思考とコードの編成を容易にし、簡素化することを目的としています。可読性を損なう場合は、ネストしないでください。
グローバルおよびリージョナル SASS ファイル シーケンスはテーブル コンテンツと同等です

つまり、決まったスタイルがないのです。開発者は、すべての部分のスタイルを一貫性と秩序を保つように心がける必要があります。

最初にベンダー/グローバル ライブラリをリストし、次にカスタム ライブラリ、次にモード、最後に各部門で使用されるライブラリをリストします。

このようにすると、「ディレクトリ」は次の例のようになります。これは一目瞭然です:

CSS コードコンテンツをクリップボードにコピーします
  1. /* ベンダーの依存関係 */
  2. @import "コンパス";
  4. /* 作成された依存関係 */
    5. @import
  5. "width: auto; 🎜>高さ: 自動; フロート: なし;" id="10_nwp">: なし;" mpid="10" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app =0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc& =u1922429&u=http://www.admin10000.com/document/2137。 html&urlid =0" id="10_nwl">:#0000ff;フォントサイズ:14px;幅:自動;高さ:自動; float:なし;">global; @import
  6. "グローバル/ミックスイン";
  7. /* パターン */
  8. @import "グローバル/タブ"
  9. ; @import "グローバル/モーダル";
  10. /* セクション */
  12. @import "グローバル/ヘッダー"; @import
  13. "グローバル/フッター";

    これらのファイルはコンパスのようなもので、カラーとミックスインはコンパイルされた CSS コードを生成せず、純粋にスタンドアロン ライブラリです。その後、特異性の競合なしに書き換えをより安全にするためのパターンが導入されました。
    SASS を複数の小さなファイルに合理的に分割

    これを行うことに何も問題はありません。状況が許せば、小さくて正確な複数のファイルを使用するようにしてください。これにより、開発者は、長いコードを含むいくつかの大きなファイルの干し草の山から針を探すのではなく、特定のファイルを見つけることができます。

    ...

    CSS コードコンテンツをクリップボードにコピーします
    1. @import "幅: 自動; 高さ: 自動; 浮動小数点: none;" id="9_nwp">text-decoration: なし;" mpid="9" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid =0& t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 2137.html&urlid=0" id="9_nwl">カラー :#0000ff;フォントサイズ:14px;幅:自動;高さ:自動>float:なし;">global< ;/span>/header/header/";
    2. @import "global/header/logo/";
      3. @import
    3. "global/header/dropdowns/"; @import
      4. "global/header/nav/"
    4. ; @import "global/header/really- specific-thingy/"
      5. ;

    5. 私がよく行うのは、_header.scss ファイルを参照する代わりに、グローバル scss ファイルでこれらのファイルを 1 つずつ参照し、_header.scss ファイルで 1 つずつ参照することです。そうすることで、インデックス作成時間が短縮され、読み取り効率が向上します。

      ファイルが多すぎてインポートシーケンスが長すぎる場合は、グロビングを使用できます。
      パーシャルに _partial.scss という名前を付けてください

      これは、単独ではコンパイルできないファイルの一般的な名前です。このようなファイルは他のファイルにある程度依存するため、単独でコンパイルを完了することができなくなります。個人的には、_dropdown-menu.scss
      ローカルでコンパイルするときに行マッピング

      のようにファイル名の前にアンダースコアを追加するのが好きです。

      ここを参照してください。これは、インポートされた部分ファイルであっても、開発ツールがすべてのルールのソースを通知できることを意味します。
      デプロイするときは、合理化されたファイルをコンパイルすることを忘れないでください

      実行中の Web ページでは、常に最小限の CSS を使用する必要があります。
      .css ファイルを送信する必要はありません

      時間はかかるかもしれませんが、リポジトリに .css ファイルが存在しないことは、デプロイメント時に行われるため、非常に便利です。 したがって、あなたが見ることができるのは、合理化され、美しくフォーマットされた Sass ファイルだけです。 これにより、ファイルの説明が非常に便利になります。ファイルの説明は、バージョン発行者によって加えられた変更を比較するために使用されます。すでに合理化された .css ファイルの場合、基本的にファイルの説明は不要です。
      豊富な使用上の注意事項

      コードにコメントを残したことを後悔する人はほとんどいません。有用なコメントであっても、目立たないコメントであっても、合理化された CSS ファイルにコンパイルされるときに最終的には削除されます。開発者には追加コストはかかりません。

      .overlay {
      /* モーダルは 6000、保存メッセージは 5500、ヘッダーは 2000 */
      z-index:
      }

      注釈について言えば、標準化のための調整も必要になる場合があります。 SASS では、「//」はコメントを追加するのに最適で、「//」を使用するとコメントとコメント解除が非常に便利になります。
      よく使われる値や特別な意味を持つ値を変数に変換します

      値を再利用していることに気付いた場合 (フロントエンド設計ではよくあることです)、それを変数に変換することをお勧めします。こうすることで、値に名前を付けることでその意味を思い出すことができ、コードを記述するときに一貫性を保つことができます。この値を変更するときに 1 行ずつ調整する必要はありません。

      数値に明らかな意味がある場合、それを変数に変換することが不可欠です。

      CSS コードコンテンツをクリップボードにコピーします
      1. $zヘッダー:
      2. $zOverlay: 5000;
        3. $zメッセージ:
        5. .header {
      6. z-index: $zHeader; }
      7. .overlay {
        9. z-index
      9. : $zOverlay; }
        10. .message {
      11. z-index
        12. : $zMessage;
      12. }
        13. これらの番号は単一のファイルに保存され、@imported としてインポートされる場合があります。この方法では、すべての Z-index やその他の変数
      13. を一元管理し、色を変数
        14. に変換することができます。
      黒と白を除く。多くの色は、二度と使わないと思っていても、一度だけ使用するものではありません。ただし、変数に変換すると、他の場所で使用される可能性があります。カラー変数の場合、Sass には、lighten() や darkn() など、カラー変数を処理できるカラー関数があります。これにより、全体的なカラー コントロールが簡単になります (一度変更すれば、あとは忘れます)
      メディア ライブラリをネストして名前を付けます


      Sass のメディア ライブラリをネストする機能は、1. 他の場所でセレクターを書き換える必要がなく、不要なエラーを引き起こす必要がありません。2. 書き換えるルールが明確になり、これらが非常に混乱する可能性があります。コードが CSS コードの末尾または他のファイルにある場合。


      CSS コード

      コンテンツをクリップボードにコピーします

      1. .sidebar {
      2. float: 右右;
      3. 幅: 33.33%;
        4. @include bp(mama-bear) {
      5. 幅: 25%;
        6. }
        7. }
      ここに詳しい説明があります: http://css-tricks.com/naming-media-queries/
    最後に Shame を入れます


    グローバル スタイル シートの最後に _shame.scss ファイルを導入します。



    CSS コード
    コンテンツをクリップボードにコピーします
    1. @import 「コンパス」
      3. ...
      5. @import
    5. 「恥ずかしい」
    簡単な変更が必要な場合は、ここで変更できます。将来的に適切な時間とエネルギーがあれば、
    _shame.scss で行われたアーキテクチャ全体への変更をより適切に整理して構造化することができます。詳細については、http://csswizardry.com/2013/04/shame-css/


    あなたがすべてを決めるリーダーです
    Sass は、ユーザーが指示しない限り何も実行しません。そのため、sass ファイルの最終出力は人によって異なります。 sass を使用して css ファイルを記述することは、sass を使用しないのと同じであり、コードのリーダーはあなたです。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Nofollowタグの書き方とnofollow_HTML/Xhtml_Webページ制作の使い方の紹介次の記事：Nofollowタグの書き方とnofollow_HTML/Xhtml_Webページ制作の使い方の紹介

関連記事

続きを見る