diff --git a/README.md b/README.md index f7e0607..5bd1bab 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ # CSS ## SCSSで値を変数化 -今回は共通の値をCSSに値を直書きせず、SCSSで変数定義した値を使って、スタイルを記述していきます。変数定義場所は +今回共通化したいスタイルの値をSCSSの変数定義の機能を用いて変数化します。変数定義場所は ``` ~/assets/stylesheets/variables.scss ``` @@ -58,22 +58,22 @@ **慣れている人**: * SCSSで各値の変数定義 * コードチェック +* 完成したら他の上回生にもコードチェックをお願いする。 **慣れていない人**: -* 役割部分のコーディング(スタイルの値はSCSSの変数を使う) +* 役割部分のコーディング * 質問があるときや分からい時は担当の人に聞くか、シモに聞くか、他の分かる人に聞く。 * 完成したら担当の人にコードをチェックしてもらう。 -## SCSSでの変数命名規則 -プロパティー名 + 大きさ(small, large,...)・色(red,blue,...) -例)フォントの色を定義する場合 +## SCSSの変数利用 +例)定義されたフォントサイズの利用 ``` -$color-red: #FF0; +font-size: $font-size-top-title; ``` -例)フォントのサイズを定義する場合 +例)定義された色の利用 ``` -$font-size-small: 15px; +color: $base-font-color; ``` # コンポーネント @@ -85,16 +85,16 @@ $font-size-small: 15px; ページ名 + コンポーネント名 例)トップページのトップコンポーネント ``` -topTop.vue +TopTop.vue ``` 例)ブログ一覧ページのカード一覧コンポーネント ``` -blogListCardList.vue +BlogListCardList.vue ``` 例)ブログ一覧ページのカードコンポーネント ``` -blogListCard.vue +BlogListCard.vue ``` ## コンポーネント制作注意点