質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.32%

  • gulp

    289questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

csscombの設定について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,251

1000

score 194

現在、gulpでsassとcsscombを利用しています。
そこでどうしてもつまづいたので相談させてください。

a {
    &:link    { color: #000; text-decoration: underline; }
    &:visited { color: #000; text-decoration: none; }
    &:hover   { color: #000; text-decoration: none; }
    &:active  { color: #000; text-decoration: none; }
}


これをコンパイルすると

a:link { color:#000; text-decoration:underline;}

a:visited { color:#000; text-decoration:none;}

a:hover { color:#000; text-decoration:none;}

a:active { color:#000; text-decoration:none;}


このように、改行が入ってしまいます。
これを以下のように「改行なし」にするにはどのような設定が必要でしょうか?

a:link { color:#000; text-decoration:underline;}
a:visited { color:#000; text-decoration:none;}
a:hover { color:#000; text-decoration:none;}
a:active { color:#000; text-decoration:none;}

↓使用している.csscomb.jsonです

{
    "always-semicolon": true,
    "color-case": "lower",
    "block-indent": "\t",
    "color-shorthand": true,
    "element-case": "lower",
    "eof-newline": true,
    "leading-zero": true,
    "quotes": "single",
    "sort-order-fallback": "abc",
    "space-before-colon": "",
    "space-after-colon": "",
    "space-before-combinator": " ",
    "space-after-combinator": " ",
    "space-between-declarations": " ",
    "space-before-opening-brace": " ",
    "space-after-opening-brace": " ",
    "space-after-selector-delimiter": " ",
    "space-before-selector-delimiter": "",
    "space-before-closing-brace": "",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": true
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

うーん。
以前sass使ってたときこういうこと起こったことないのでほかに要因があるのかも知れませんが、いろいろ検証してみましょう。

1.
.csscomb.jsonの中の"eof-newline": truefalseにしてみましょう。

2.
1がダメならSCSSを見てみる。
これだとどうなります?
まるまるコピーして貼り付けてください。

a {
    color: #000;
    text-decoration: underline;
    &:hover, &:active, &:focus {
        text-decoration: none;
    }
}

3.
2ダメな場合、.csscomb.jsonの中を空にして影響を見てみましょう。
ファイルの中を{}だけにすればいい気がします。<無論あとで戻すのでBKはとっておく

とりあえずこの3つを試してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/10 13:50

    1,3についてはすでに試しましたがだめでした。3で明らかに変わるので、csscombが動いていないなどの基本的な問題はありません。
    2に関しては、あくまで上記CSSは例なのでそれぞれのcssが共通とは限らないため目的と異なってしまいます。
    いちばん関係ありそうな「eof-newline」ですが、trueでもfalseでも、記述ごと消しても表示に変わりはありませんでした。おかしいですね・・。

    キャンセル

  • 2017/02/10 14:05

    2に関しては書き方を変更したらどうなるかを例として見てみたかっただけですね。
    あとまるまるコピーというのは見えないところに全角スペースなどが入って悪さをしてたりする場合があるので、それ込みで。

    でも3で違ってくるということであれば2は関係ないのかな…
    全部消すと1行空くことはとりあえずなくなるんですかね?
    ならば、1つ1つ消して試してみるのが確実かなと思います。
    「\n」こういう値が入っているものがあればそれを優先的に。

    というか、質問のほうに「.csscomb.json」を追記していただいてもよいですか?

    キャンセル

  • 2017/02/10 15:28

    デフォルト状態では

    a:link {
    color: #000;
    text-decoration: underline; }

    a:visited {
    color: #000;
    text-decoration: none; }

    a:hover {
    color: #000;
    text-decoration: none; }

    a:active {
    color: #000;
    text-decoration: none; }

    となるので、やはり1行空いてるようです。

    .csscomb.jsonは追記します!

    キャンセル

  • 2017/02/10 15:59

    デフォルトで空いているとなると「csscomb」ではなさそうですね。
    「gulpfile.js」のsassの部分を見てみましょうか。
    「gulp.task('sass', function(){~});」この「~」の部分はどうなってますでしょ?

    キャンセル

  • 2017/02/13 14:22

    遅くなりました!

    gulp.task('sass', function () {
    return gulp.src(['resource/'+assetsDir+'sass/**/*.scss'])
    .pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>') // デスクトップに通知を出す
    }))
    .pipe(sass())
    // .pipe(autoprefixer({ browsers: ['last 3 versions', 'Android 3', 'ie 9'] }))
    .pipe(csscomb())
    .pipe(gulp.dest('resource/'+assetsDir+'css/'))
    });
    です。

    キャンセル

  • 2017/02/13 14:23

    あ、autoprefixerは今回不要なのでコメントアウトしてるので関係ないですね。

    キャンセル

  • 2017/02/13 16:21

    特に変わったところはないですね…
    んー、出力指定してみます?
    .pipe(sass())→.pipe(sass({style : 'expanded'}))

    「gulpfile.js」内で「newline」系で値が「true」になっているものがあれば「false」にしてみてください。
    何かしらの改行が影響しているかもしれないので、それを検証してみましょう。

    キャンセル

  • 2017/02/13 17:36

    >> .pipe(sass())→.pipe(sass({style : 'expanded'}))
    こちらためしてみました、結果変わらずのようです。

    >>「gulpfile.js」内で「newline」系で値が「true」になっているものがあれば「false」にしてみてください。
    newlineの記述は無いようでした。

    そもそも、eof-newlineが怪しいかと思ったのですが、実質動いていないような(結果が何も変わらない)感じなのですが、これって何なんでしょうね??

    キャンセル

  • 2017/02/13 19:11

    ほかにbeautifyなどの整形系を使用していてその影響が出てるかなーと思ったんですけど…うーん。
    「eof-newline」は言葉通りに解釈すると複数のファイルを連結したときにファイルとファイルの間に改行が入るんだと思います。

    で、ほかに手が思い浮かばないので環境を作って試してみました。
    なるほど。確かに空行ができますね。
    ですが、こうすると空行がなくなります。
    ---
    a {
    color: #000;
    &:link { color: #000; text-decoration: underline; }
    &:visited { color: #000; text-decoration: none; }
    &:hover { color: #000; text-decoration: none; }
    &:active { color: #000; text-decoration: none; }
    }
    ---
    結果から予想するに親に何も記述せず子だけだと1個1個独立しているものとして認識されて空行ができるのではないでしょうか。
    親に何かの記述があるとその子にも影響がでるので、そこでまとまる感じですかね。

    キャンセル

  • 2017/02/23 17:08

    すごい、盲点でした!
    助かりましたありがとうございます!

    キャンセル

同じタグがついた質問を見る

  • gulp

    289questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。