csscombでからのCSSが大きな隙間になる


http://q.hatena.ne.jp/1487810869#comment
の続き

空のCSSのセレクタとプロパティを削除してくれるのはうまくいているのですが、
その隙間がそのまま残ってしまい異常な隙間になってしまう問題が起きました。
恐らくこれは解決できないのでしょうね。
始めから削除しておくか、削除をしないようにするしかないですよね。


また、POSTCSSには対応していないようですね。
下記のエラーが出ますがこれは気にしないでいいんでしょうね。
Parsing error: Please check the validity of the block starting from line #17

15 | color: var(--color-primary);
16 | }
18 | .logo {
19 | color: var(--brand-color);

Gonzales PE version: 3.0.0-28
Syntax: css

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2017/03/04 11:17:46
  • 終了:2017/03/11 11:20:03

回答(0件)

回答はまだありません

  • id:rouge_2008
    空行について、正規表現で一括削除すればいいです。
    SublimeText3は正規表現に対応しているので、以下の記述で一括削除可能だと思います。

    正規表現有効な状態で「Find」欄に以下を入力」
    ^\n

    ※削除なので「Replace」欄は空欄にします。

    ・Search and Replace
    https://docs.sublimetext.info/en/latest/search_and_replace/search_and_replace_overview.html

    ・Search and Replace — Multiple Files
    https://docs.sublimetext.info/en/latest/search_and_replace/search_and_replace_files.html


    PostCSSについては分かりません。
    csscombが依存しているGonzales PEで対応しているのが、SCSS, Sass, LESSのようですから、おそらくPostCSSには対応していないと思います。
    ただし、エラーが出ている周辺の記述だけでは、PostCSS未対応が原因なのかは判断できません。
    17行目がありませんが、何が記述されていたのでしょうか?
  • id:webhate
    17行目はスペースです。何もありません。

    postcssは未対応なのでエラーは無視でよさそうですね。

    空のcss削除によるスペースは、結局自分で削除しておくしかないですかね?
    この機能は無意味ですね。
  • id:rouge_2008
    空のルールセット削除については不完全な部分があるようですが、必要になった時にセレクタを記述するようにすればいいので特に問題ないと思います。
    後で一括削除する事も可能ですし、CSSファイル完成後に実行すれば1回で済みます・・・(完成前でも編集終了後にその都度実行でも問題ありません)
    JavaScriptに詳しい人なら修正できるかもしれませんし、探せばプラグインもあるかもしれませんが、私は検索・置換で十分だと思います。

    何もないのでしたら、PostCSS未対応が原因のエラーではないと思います。
    提示された箇所にPostCSS特有の記述はありません。
  • id:rouge_2008
    「Parsing error: Please check the validity of the block starting from line #**」は、「**」行目で始まっているブロックに何らかのエラーが含まれるので確認してくださいというメッセージのようです。
    ブロックの終了宣言があるか等、簡単なものから確認してください。

    .logo {/* この中をブロックの終了まで確認してください */ }

    15 | color: var(--color-primary);
    16 | }
    18 | .logo {
    19 | color: var(--brand-color);

    Gonzales PE version: 3.0.0-28
    Syntax: css
  • id:webhate
    恐らく本当にエラーがあるのではなくPOSTCSSの記述に対応していないのでは中と思っています。
    color: var(--brand-color);
    という変数はCSS3まで存在しないので。


    また、空のセレクタと波かっこを削除してくれるが、そこの隙間を削除してくれずに、そこが大きな隙間になってしまう件は、やはりこの機能は使わずに自分で削除するか、
    削除後のcssを全部見て隙間が空いていないか自分で確認するしかないですかね?

    それだとあまりこの機能自体に意味がないですね。

    削除だけでなく隙間も削除してくれるように変えられるといいですが、
    難しくてわからないので諦めます。
  • id:rouge_2008
    .logo {}の中にPostCSS特有で、かつCSSとしては正しくない記述をしているいう事ですか?
    CSS変数(カスタムプロパティ記法)を追加しただけでは、こちらではエラーは発生していません。

    ・CSSの変数を使う
    https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables


    ※空行については上でコメントした通りです。
    目視確認しなくても、空行削除の正規表現による置換を実行するだけで済みます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません