サバ

今日、私はSASSの使用に関するすべての参照を含むこのリファレンスシートを共有しています.
また、これはすべてのセットアップでは、任意のSASSのプロジェクトを始めるためにボイラープレートのセットアップが含まれています!(このシートの終わりを参照)

Markdown is available at my Github

目次

Sass

BEM

7-1 Folder Architecture

NPM Setup Boilerplate

再利用可能な値のための変数Usage $pink: #ff1493;

以下のコードのためにネストセレクタをネストするUsage

  //scss
  .parent{
    .child{}
  }

  // becomes in css
  .parent .child{}

CSSの演算子Usage font-size: (16px / 24px) // Uses parentheses, does division

パーティションとインポート(@ rule )ファイルを別のファイルに書き込み、マージします.Usage @import "sample";

ミックスして再利用可能なコードを書くUsage

  @mixin overlay() {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .modal-background{
    @include overlay();
    background: black;
    opacity: 0.9;
  }

ミックス&プレースホルダーcomparison

関数はmixedに似ていますが、値を生成します:Usage

  @function remy($pxsize) {
      @return ($pxsize/16)+rem;
  }

  h1 { font-size: remy(32);}

は別のセレクタで同じ宣言を継承します:Usage

  // scss
  .small-uppercase{
    color: lightslategrey;
    font-size: 10px;
  }

  .modal-background{
    @extend .small-uppercase;
  }

  // generated css
  .small-uppercase,
  .modal-background{
    color: lightslategrey;
    font-size: 10px;
  }

条件付とループ(@ content , @ if )を使用して複雑なコードを記述する制御ディレクティブUsage

  @mixin test($condition) {
      $color: if($condition, blue, red);
      color:$color
  }

境界線

境界線 — ブロック要素修飾子は、フロントエンド開発で再利用可能なコンポーネントとコード共有を作成するのに役立つ方法論です

例:

  <form class="form form--theme-xmas">
    <input
      class="form__submit form__submit--disabled"
      type="submit" />
  </form>

  .form { } //block
  .form--theme-xmas { } //block--modifier
  .form__submit { } //block__element
  .form__submit--disabled { } //block__element--modifier

例によるReference

ABEM - BEMを使うより良いアプローチExplanation

  /* classic + atomic prefix */
  .o-subscribe-form__field-item {}

  /* camelCase + atomic prefix */
  .o-subscribeForm__fieldItem {}

7 - 1フォルダアーキテクチャ

実際のフォルダ構造Reference

7 - 1パターンは一般的なSASSアーキテクチャであり、Sass Guidelines Project . 基本的な構造を示します.

  sass/
  |
  |– abstracts/             # HELPER FILES
  |   |– _variables.scss    # Sass Variables
  |   |– _mixins.scss       # Sass Mixins
  |
  |– vendors/               # THIRD-PARTY FILES
  |   |– _bootstrap.scss    # Bootstrap
  |
  |– base/                  # BOILERPLATE FILES
  |   |– _reset.scss        # Reset/normalize
  |   |– _typography.scss   # Typography rules
  |
  |– layout/                # STRUCTURE FILES
  |   |– _navigation.scss   # Navigation
  |   |– _grid.scss         # Grid system
  |   |– _header.scss       # Header
  |   |– _footer.scss       # Footer
  |   |– _sidebar.scss      # Sidebar
  |   |– _forms.scss        # Forms
  |
  |– components/            # SPECIFIC COMPONENTS FILES
  |   |– _buttons.scss      # Buttons
  |   |– _carousel.scss     # Carousel
  |   |– _cover.scss        # Cover
  |   |– _dropdown.scss     # Dropdown
  |
  |– pages/                 # PAGE SPECIFIC FILES
  |   |– _home.scss         # Home specific styles
  |   |– _contact.scss      # Contact specific styles
  |
  |– themes/                # MULTIPLE THEME FILES
  |   |– _theme.scss        # Default theme
  |   |– _admin.scss        # Admin theme
  |
   – main.scss              # Main Sass input file

NPMセットアップボイラープレート

私はSASS開発のための完全なNPMセットアップをしました、あなたは単にそれをクローニングすることによって、あなたのプロジェクトのためのボイラープレートとして使うことができます.

含まれます:

フォント素晴らしいとアニメーションCSSは組み込まれています!

7 - 1フォルダアーキテクチャ

グローバルリセット

gitignore含まれる

メディアクエリマネージャ

コンピレーション

開発スクリプト:コンパイル、サーブと時計

生産スクリプト:コンパイル、接頭語、および圧縮.

このボイラー板は私の中にありますGithub Repo

これが助ける望み、ありがとう!😊