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

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

新規登録して質問してみよう
ただいま回答率
87.20%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

受付中

ScssをGulp4(gulp-dart-sass)でコンパイルすると属性値を囲むクオート(' ")が消えてしまう現象の解決法

fed
Louie

総合スコア6

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

0回答

0評価

1クリップ

776閲覧

投稿2022/01/26 06:43

編集2022/01/26 16:55

gulp4.0(gulp-dart-sass)を使ってscssをコンパイル。属性値を囲むクオートがシングル・ダブルともに消える。

gulp4.0を使ってscssをコンパイルしているのですが、input[type="text"]など属性値を囲むクオートがシングル・ダブル(' ")ともに消えてしまいます。

scss

input[type="text"]{ display: block; } [class^="btn_"]{ display: block; }

これをgulp-dart-sassでコンパイルするとこうなります↓

css

input[type=text]{ display: block; } [class^=btn_]{ display: block; }

試したこと

ちなみに以下のパターンは大丈夫できちんとクオートが残ってコンパイルされます。

background: url(""); content: "";

[]内のクオートがどうも消えている模様。。。。

また、
scss記法からのコンパイルが上記の現象が起きていて、
sass記法からのコンパイルだときちんとクオート付きでコンパイルされます。

その他

最悪、SassMeisterでsass記法に変換して、コンパイルしなおせばよいのですが。なんかそれもなと。
またVSCode Live sass compiler利用は今回は対象外です。

このGulpでscssをコンパイルってかなりメジャーな方法だと思うので、この現象皆さんがどう対応しているのかが知りたいです。
よろしくお願いします。

良い質問の評価を上げる

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

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

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

気になる質問をクリップする

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

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

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

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

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

hoshi-takanori

2022/01/26 07:55

それで何かお困りでしょうか? css の仕様では、空文字列でなく、かつスペースや記号を含まないものは引用符を省略できるのだと思います。(未確認ですが。) 人間が直接読み書きする「ソースコード」では引用符を付けた方が (というか、付けるなら付けるで統一した方が) 読みやすかったりしますが、sass や scss から生成される css はソースコードではなく「生成されたコード」であり、通常人間が直接編集するものではなく、ブラウザが正しく解釈できれば充分なので、省略できるものは省略される場合があるということかと。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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