CSS
scss
gulp

Scssのコーディングで先祖返りやバッティングせずにCSSを複数人で編集する方法

More than 1 year has passed since last update.

大量のHTMLコーディング作業があった場合、一人ではできないので複数人で作業していくと思います。

複数人で作業するには思っている以上に障害がでてきます。

HTMLのマークアップや命名規則についてはリンク先の方が丁寧に説明していただいています。
↓↓↓↓

複数人でCompass+Scssでコーディングする時に決めておくと良いこと+注意点をまとめてみた
https://qiita.com/lifeyuji/items/00f1961e1f8a821c6e63

今回はこのコンパイル部分についてこんな方法どうだろー。
と思いついた方法です。

Gitで管理して進める

Gitでcssを管理し、ミスのないように進めていく方法。
これもやったことがありますが複雑なプログラムでもないのでコミットするのがめんどくさい!

デザイナーさんには抵抗があるかもしれません。

テンプレートを作成後、コーディングルールを作り、コーディング会社に依頼

これはよくありました。各々のローカルで編集したファイルを頂き最終的にこちらでマージする作業です。

この方法でもいいのですがスタイルシートが多くなるのでめんどくさい。。と思う

できれば手直しを必要とせずそのまま公開したい。

└── css
     └── style.scss
            ├── name01.scss
            ├── name02.scss
            └── name03.scss
style.scss
  @import "/css/name01.scss";
  @import "/css/name02.scss";
  @import "/css/name03.scss";
name01.scss
 //担当者01さんが編集
.top{
   section{
    background: #f00;
   }
 }
name02.scss
 //担当者02さんが編集
.page2{
   section{
    background: #0f0;
   }
 }
name03.scss
 //担当者01さんが編集
.page3{
   section{
    background: #00f;
   }
 }
出力後style.scss
.top section{background:red}.page2 section{background:#0f0}.page3 section{background:#00f}

出力されたcss
https://nekodaisuki.cf/common/css/style.scss

こんな感じに担当者ごとにcssを分けていればバッティングする心配がないです。

イイウェブを使用していれば複数人でもサーバーが出力してくれるので、
各々がローカルで編集後にガッチャンコしなくてすみます。。

出力後のファイルはstyle.scss
のみとなり、「プロパティを整頓する」にチェックを入れておくことで
バラバラのコーディング記述も整頓して並べてくれます。

ですので細かいコーディングルールを作成する必要がなく、HTMLを大量生産することができます。
(誰がどこのページを編集するかは決めなくてはいけませんが)

もちろん設計や規約を設けることも大切です!!

イイウェブを使用するメリットとしてはビルドツールを使用するのか、GUIでコンパイルするのかという選択が解消されることなので複数人で作業する場合に向いているような気がします。

イイウェブ