超能力を持つCSS

この資料は、もともとCodicaブログに掲載されました.
CSSのプリプロセッサはずっと前に重要なフロントエンドの開発ツールになりました.高度な機能を搭載、プログラマは読み取り可能なコードを書くのに役立ちます.最も一般的なプリプロセッサはsass,less,stylusである.
Codicaでは、これらのツールは、コードを簡素化し、生産性を向上させることを信じています.私たちは私たちの練習からの例に基づいて自分の力を示したい.

Webアプリケーション開発におけるCSSプロセッサのパワー SASSとは

Sassの定義から始めましょう.このCSS拡張の でそれを見つけることができます.

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

オフィシャルウェブサイト Sass mixins、地図とループを使う方法

ここでループとマップ関数を見ます.これらの顕著で珍しいツールで、我々はCSSのすべてのパワーを受け入れることができます.
SCSSをCSS構文の拡張として知っています.CodicaではWebプロジェクトを開発するためによく使います.ネイティブCSSに近く、ブラウザからコードをコピーするときに余分な操作を必要としません.
下のコードスニペットでは、CSSでWebフォントがどのように宣言されているかを確認できます.この例では、スタイルシートのコード重複を示しています.

@font-face {
 font-family: 'OpenSans-Light';
 src: url('opensans-light.eot');
 src: url('opensans-light.eot?#iefix') format('embedded-opentype'),
      url('opensans-light.woff2') format('woff2'),
      url('opensans-light.woff') format('woff'),
      url('opensans-light.ttf') format('truetype'),
    url('opensans-light.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Regular';
 src: url('opensans-regular.eot');
 src: url('opensans-regular.eot?#iefix') format('embedded-opentype'),
      url('opensans-regular.woff2') format('woff2'),
      url('opensans-regular.woff') format('woff'),
      url('opensans-regular.ttf') format('truetype'),
    url('opensans-regular.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

@font-face {
 font-family: 'OpenSans-Bold';
 src: url('opensans-bold.eot');
 src: url('opensans-bold.eot?#iefix') format('embedded-opentype'),
      url('opensans-bold.woff2') format('woff2'),
      url('opensans-bold.woff') format('woff'),
      url('opensans-bold.ttf') format('truetype'),
    url('opensans-bold.svg') format('svg');
 font-weight: normal;
 font-style: normal;
}

このコードスニペットを見るとき、あなたはあなたが重複したコードを見ているように感じるかもしれません.

マトリックスのファンは、ネオが黒い猫によって歩いているのを見て、それから別のものが同じように振る舞う場面を覚えています.この瞬間はホテルの待ち伏せの間、D ' j ' Vu Vuの明確な説明でした.
幸いにも、簡単にマップ機能とmixinsと呼ばれるSASSコンポーネントの助けを借りて、重複するコードの問題を修正することができます.
どのように言及されたツールを使用するコードを簡素化することができますをご覧ください.
最初に、私たちは、地図フォントで我々のフォントを説明します.この処理は次のようになる.

/* Fonts map format
 $fonts: (
   $file-name: '$font-name'
 )
*/

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-bold: 'OpenSans-Bold',
);

次に、map get functionを使用して変数フォントを宣言します.

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_bold: map-get($fonts, opensans-bold);

機能@ mixin我々はコードの繰り返しを防ぐことができます:

@mixin font-face($font-name, $file-name) {
 /* '/assets/fonts/' - relative path to the fonts folder */
 $filepath: '../assets/fonts/' + $file-name;

 @font-face {
   font-family: #{$font-name};
   src: url($filepath+'.eot');
   src: url($filepath+'.eot?#iefix') format('embedded-opentype'),
        url($filepath+'.woff2') format('woff2'),
        url($filepath+'.woff') format('woff'),
        url($filepath+'.ttf') format('truetype'),
      url($filepath+'.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }
}

上記のイテレータ@各@ mixinの後に、各フォントのフォントフェイスを宣言するのに役立ちます

/* Font face declaring */
@each $file-name, $font-name in $fonts {
 @include font-face($font-name, $file-name);
}

今新しいフォントを追加または削除する場合は、フォントファイルをアップロードまたは削除する必要があります.イルnamingに従うことを忘れないでください.

$fonts: (
 opensans-light: 'OpenSans-Light',
 opensans-regular: 'OpenSans-Regular',
 opensans-semibold: 'OpenSans-Semibold',
 opensans-bold: 'OpenSans-Bold',
);

$ff_light: map-get($fonts, opensans-light);
$ff_regular: map-get($fonts, opensans-regular);
$ff_semibold: map-get($fonts, opensans-semibold);
$ff_bold: map-get($fonts, opensans-bold);

結論

このポストでは、私たちはあなたのプロジェクトのスタイルのコア部分CSSを作る機能とツールに焦点を当てた.
SSSを含むCSSプリプロセッサは、フロントエンドの開発者に、クリーンで効率的な書き込みを可能にします.大部分の複雑なウェブプロジェクトのために、簡単なメンテナンスは最も基本的な要件です.
調停して読む
または、我々の完全な記事を読んでください: