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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

Q&A

0回答

586閲覧

Sassで#{}を使うとCSS-combでエラーが出る

kihara

総合スコア40

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

gulp

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

0グッド

0クリップ

投稿2018/05/13 09:54

編集2018/05/16 10:24

前提・実現したいこと

Sassでcalcの()内で変数を使いたいときに、
そのままでは使用できないので#{}を使うと
Sassは問題なくコンパイルされるのですが、
gulp-css-combを使用するとエラーが出てしまいます。
何か解決方法はないのでしょうか?
詳しい方教えていただけると助かります。

発生している問題

scss

1@function calc-size($value,$value2) { 2 $value3:$value - $value2; 3 @if $bp==tb { 4 @return calc(#{$value2 + "px"} + #{$value3} /768*100vw); 5 } 6 @else if $bp==pc { 7 @return calc(#{$value2 + "px"} + #{$value3} /1920*100vw); 8 } 9 @else { 10 @return calc(#{$value2 + "px"} + #{$value3} /375*100vw); 11 } 12}

追記

エラーコードに出てくる行数が
実際のエラーの原因が60行目くらいなのにコマンドプロントには、
Parsing error: Please check the validity of the block starting from line #137
というふうに表示されます。
場合によっては存在しない行数が表示されるときもあります。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Takamoso

2018/05/13 10:25

gulpfile.jsのコードも一応載せた方がいいかもしれません。
kihara

2018/05/14 12:33

gulpはcss-combしか使っておらず、sassから#{}を抜くと問題なくcss-combは使えるので、おそらくgulpfile.jsは関係ないと思います。
Takamoso

2018/05/15 02:12

試して見ましたが、問題なくコンパイルできましたよ。sassの処理のあとにcsscomb処理をしていますか?
kihara

2018/05/16 09:24

すみません。先ほどのコードで試したところ私の環境でも出来ました。上記のコードだとエラーが起きました。
kihara

2018/05/16 10:13

すみませんやっぱり勘違いでした。先ほどのコードでも出来ませんでした。sassの処理とcss-combは別でやっています。
teruri

2018/06/05 03:54

@Takamoso さんの仰る通り、gulpの実行順の問題かなーと思うので、gulpfile.jsも載せたほうがいいんじゃないかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問