SASSで始まる

23518 ワード
sass bem css beginners テキストリンク
あなたがブラジル人ポルトガル語話者であるならば、...
このテキストは、あなたの周りの誰もがあなたを除いて、sassを使用している感じている人のためです.
通常、sassを学びたい人は以下のような質問をする.

SASSとSCSSの違いは何ですか？


SASSは言語です、それは拡張CSSです、それはHTMLと同じようにインデントされたネスティングで書かれています.SCSSはCSSに非常によく似ているこの言語の構文です.両言語​​CSSの機能を拡張し、前処理され、ブラウザに行く前にCSSに変換されます.あなたがSASSについて耳にする回数の大半は、SSSについて話しているかもしれません.

前処理？


前処理はSSSコードをCSSにコンパイルするルーチンです.これは、ガット、grunt、webpack他の間で行うことができますが、これは、お尻を学びたいが、これらのautomatorsと難しさをいくつかの人々のための障壁にすることができます.我々は、このSASSコンパイラを使用してこの難しさを咀嚼します.

Live SASSコンパイラによるSASS処理


最初のダウンロードLive Sass Compiler from the VSCode Marketplace
拡張モジュールは、すべてのあなたのsassファイルを検索し、同じフォルダ内のそれらからの正規化と小型化されたCSSを作成します.あなたが最終的なファイルが保存されることを望むフォルダを構成したいならば、ちょっと拡張設定を行って、そのセッティングにアクセスしてください.JSON

次に、このチャンクコードをドキュメントに追加します(あるいは、既に持っている場合は編集します).このセクションでは、コードの形式を定義します-拡張またはミニ化されているかどうか-各拡張子の名前と保存する場所を示します.オプションを残すgenerateMap 私たちは通常マップを使用しないので、falseとして.
"liveSassCompile.settings.formats": [ 
    {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "app / css"
    },
    {
        "format": "compressed",
        "extensionName" : ".min.css",
        "savePath": "app / css"
    },
  ],
  "liveSassCompile.settings.generateMap": false,
複数のファイルがある場合は、設定を編集してファイルを無視することができます.
"liveSassCompile.settings.excludeList": [

    "** / node_modules / **",
    ".vscode / **",

    // add your folder here !!
    "** / example / **" 
  ], the
理想的には、スタイルシートをコンポーネントで分割する場合は、メインスタイルシートを作成し、その中にすべてのスタイルシートをインポートします.
インサイドメイン.SCSS
@import './components/button.scss';
@import './components/reset.scss';
@import './components/variables.scss';
それを手にしたいですか?私は、あなたがGASPでSassをコンパイルする方法を教えるこの記事を推薦しますI recommend this article that teaches you how to compile Sass with Gulp .

ファイル構造


コードのサイズがそれを正当化するならば、コードが維持して、整流するのがより簡単であるように、スタイルシートの中で責任の分離をつくることは重要です.
7 x 1というプロジェクトでは、ベースファイルにインポートされた7つの異なるフォルダに要素を分離するという標準的な構造があります.
sass /
|
| - abstracts /
| | - _variables.scss # Sass Variables
| | - _functions.scss # Sass Functions
| | - _mixins.scss # Sass Mixins
| | - _placeholders.scss # Sass Placeholders
|
| - base /
| | - _reset.scss # Reset / normalize
| | - _typography.scss # Typography rules
| … # Etc.
|
| - components /
| | - _buttons.scss # Buttons
| | - _carousel.scss # Carousel
| | - _cover.scss # Cover
| | - _dropdown.scss # Dropdown
| … # Etc.
|
| - layout /
| | - _navigation.scss # Navigation
| | - _grid.scss # Grid system
| | - _header.scss # Header
| | - _footer.scss # Footer
| | - _sidebar.scss # Sidebar
| | - _forms.scss # Forms
| … # Etc.
|
| - pages /
| | - _home.scss # Home specific styles
| | - _contact.scss # Contact specific styles
| … # Etc.
|
| - themes /
| | - _theme.scss # Default theme
| | - _admin.scss # Admin theme
| … # Etc.
|
| - vendors /
| | - _bootstrap.scss # Bootstrap
| | - _jquery-ui.scss # jQuery UI
| … # Etc.
|
`- main.scss # Main Sass file
このパターンがどのように機能するかをよりよく理解するためにyou can read this documentation ..

SASS変数


sass変数とcss変数の間にはいくつかの違いがあります.

SASS変数は静的です


コンパイル後のSASS変数は静的な値になりますが、CSS変数は変数であり、ブラウザの開発ツールを使用してWeb上で編集することもできますし、JavaScriptを使用してアクセスできます.

CSS変数はメディアクエリのパラメータとして動作しません


@media screen and (max-width: var (- small-screen)) {
  / * Won’t work* /
}

@media screen and (max-width: $small-screen ) {
  / * Will work :) * /
}
@ media queryの中でCSS変数を使用することはできませんが、sass変数を使用できます.これは、ブレークポイントにプリセット変数を設定したり、動的な値を配置するときに便利です​​を参照してください.

sass変数はDOM要素によってエスケープされません


: root {
 --font-size: 3em;
}

@media screen and (max-width: 432px) {
/ * In the 432px wide viewport the font-size will be 2em * /
  --font-size: 2em;
}
CSSにおいて、変数はセレクタの範囲内でスコープされて、子セレクタによって受け継がれます、しかし、彼らがブラウザーに着く前に前に処理されて、彼らはDOMにアクセスしません.二つの構文と使い方は似ています.
// CSS
--btn-color: #CD4445;

// Sass
$btn-color: #CD4445;
これらのスコープの興味深い実装は、色のテーマを作成し、異なるセレクタ内でそれらを実装することです
:: root {
  --primary: #34CED1;
  --secondary: #FCFAF7;
  - success: #505155; 
}

.dark-theme {
  --primary: #FCFAF7;
  --secondary: #505155;
  --success: #34CED1; 
}
実装するには、クラスを挿入するだけです.dark-theme ドキュメントの本文では、クラスセレクタが:root セレクタは、テーマのスタイルがベースのスタイルをオーバーラップされます
<body class="dark-theme" >
  <! - Variables within this class will be inherited
  by all elements of the body! ->
</body>

ネストされたCSSを書くよりもSASSを使うことができます


私は多くの人々がSSSを使ってファンシーCSSを書くのを見ます、そして、私は判事を判断しません、しかし、私は判事をします、しかし、それよりはるかによくすることが可能です、特に、あなたがBeMまたはSMACSSのようないくつかのCSSパターンを使って書くならば、それは非常に直観的な方法で彼らのそれぞれのブロックの中で要素を巣で作ることが可能です.SASS X生成CSSで作られたボタンの例を見てください.
👉 サバ
.btn {
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;
  &-red {
    background-color: #F02947;
    &:hover {
      background-color: #D63C53;
    }
  }
}
👉 CSS
.btn {
  all: unset;
  color: #FAFAFA;
  background-color: # 1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;
}

.btn-red {
  background-color: #F02947;
}

.btn-red:hover {
  background-color: #D63C53;
}
sassの中では、我々はセレクタの名前を連結するためにアンパサンド(& )を使うことができます.理想的には、ブロックごとにコードを分離し、各ブロック内にネストを作成することもできます.
body {
  nests/*...*/
  nav {
    /*...*/
    ul {
      / * ... * /
      li {
        /*...*/
        a {
          / * Please avoid the fuck out of this * /
        }
      }
    }
  }
}
理想的には、入れ子には3つのレベルの最大値を持つ必要があります@at-root . これにより、セレクタはドキュメントのルートでコンパイルされ、コードの入れ子になっていません.CSSを読みやすくします.あなたはもっと読むことができます@at-root in its documentation .
BEMについてもっと知りたい人は誰でも.I recommend this documentation .

マップ、リスト、およびループの使用


もちろん、あなたは.btn 修飾子--red, --blue, --green , それぞれがそれぞれ:hover , しかし、これを行うにはずっと実用的な方法があります.あなたはハッシュまたはオブジェクトとしてマップを知っているかもしれません、地図はキーとそれ自体の価値を受け取ります.また、リスト表記を使用してより多くの要素を保存することも可能です.
👉 マップ
$font-weights: (
 "regular": 400,
 "medium": 500,
 "bold": 700,
);
👉 リスト
$buttons: (
 "regular" $primary $white,
 "danger" $danger $white,
 "success" $success $white,
 "secondary" $white $darkgrey
);
中$buttons リスト、我々はボタンの名前、背景色とフォントの色の文字列を持っているので、我々は@each ループは、いくつかのプログラミング言語のための、またはそれぞれのための非常に同様の方法で動作します.
以下のこの関数は、$buttons リスト、それは特定のアクションを行います.この場合、リストには3つのコンマ区切りの要素があります.中@each リスト内のグループの各要素に対して変数を定義します@each グループでは、これらの変数は異なる値を仮定します.それを覚えておいてください.btn 我々は、独自の色で修飾子を入れ子にしましたか?それぞれの内部で同じことをすることができますが、変数を持つセレクタを連結するとき、この表記を使用します#{} 変数名を渡します$name .
$buttons: (
 "regular" $primary $white,
 "danger" $danger $white,
 "success" $success $white,
 "secondary" $white $darkgrey
);

.btn {
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;

  @each $name, $bg, $color in $buttons {
    & __ #{$name} {
       / * ... code * /
    }
  }
}
このセレクタの中で変数を置くことができます$bg ASbackground-color and $color AScolor . また、擬似クラスでネストすることもできます:hover そして、暗い色をSCSSカラー関数を使ってdarkenと呼びます.Darkenは2つのパラメタを受け取ります-色変数または値と色が暗くされるべきパーセンテージ.
$buttons: (
 "regular" $primary $white,
 "danger" $danger $white,
 "success" $success $white,
 "secondary" $white $darkgrey
);

.btn {
  all: unset;
  color: #FAFAFA;
  background-color: #1A1A1A;
  height: 40px;
  padding: 5px 10px;
  transition: background .6s ease-in;
  width: fit-content;

  @each $name, $bg, $color in $buttons {
    & __ #{$name} {
      background-color: $bg;
      color: $color;
      &:hover {
        background-color: darken ($bg, 10%);
      }
    }
  }
}
ときに手動であなたの標準的な色の明るさのレベルを宣言する必要はありません.色機能について学ぶにはthis documentation .
あなたは私のcodepenでこの完全なコードを見ることができます、パターンは非常にbootstrap(それは、SASSで構築された)に類似しています.
同様に、コンポーネントのデザイントークンを動的に使用して、コンポーネントの修飾子を作成できます.
このポストは、私がオンラインで会った最も素敵な人の1人によって翻訳されました🤙🏽
次の記事では、関数、mixins、ブロック、および計算についてもっと話します.これがあなたに役に立つならば、あなたがこれが助けると思うそれらを共有してください.疑問、提案?コメントやメッセージを私のTwitterに送信します.
Typescript Generic
homestead up したけどnginxの404画面が出るのでnginxのログを見ました