質問したけれども回答を得られなかったQ2

Webデザイン

カテゴリー: SCSS  閲覧数:650 配信日:2015-12-23 22:15


sass --style expanded hoge.scss:foo.css

Error: Import directives may not be used within control directives or mixins.on line ★★ of hoge.scss
▼hoge.scss
@include media-breakpoint-up(md) {
@import 'lib/move';
}



When I comment out as the below code, CSS file is generated without error. However, it would be different from the CSS content that I intended to because it is commented out
▼hoge.scss
@include media-breakpoint-up(md) {
//@import 'lib/move';
}



When I change the code like below, CSS file is generated without error. However, it would be different from the CSS content that I intended to.
▼hoge.scss
@import 'lib/move';
@include media-breakpoint-up(md) {}



environment
・Windows

sass -v

Sass 3.4.20 (Selective Steve)



関連リンク


Link1
You can not use import into include mixin. This is your error. You have to move the import line outside conditionals or directives.
Error when importing files within breakpoint-sass mixin

Link2
▼_partial.scss
@mixin partial {
   // 既存CSS
}

▼styles.scss
@import '_partial.scssまでのパス';
@include media-breakpoint-up(md) {
 @include partial;
}

@import in @if statement in SASS
とほほのSass入門
Allow optional @imports · Issue #779 · sass/sass · GitHub
Sass(SCSS)入門









D:\0-scss\scss>sass --new scss:.
OptionParser::InvalidOption: invalid option: --new
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded style.scss:style.css
Errno::ENOENT: No such file or directory @ rb_sysopen - style.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new1.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new2.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new3.css

D:\0-scss\scss>sass --style expanded landio.scss:new4.css

D:\0-scss\scss>sass --style expanded landio.scss:new5.css
Error: ".video-js" failed to @extend ".has-light-mask".
The selector ".has-light-mask" was not found.
Use "@extend .has-light-mask !optional" if the extend should be able to fail.
on line 350 of plugins/_videojs-landio-skin.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new6.css

D:\0-scss\scss>sass --style expanded landio.scss:new7.css

D:\0-scss\scss>sass --style expanded landio.scss:new8.css

D:\0-scss\scss>sass --style expanded landio.scss:new9.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new9.css

D:\0-scss\scss>../
'..' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

D:\0-scss\scss>cd ../

D:\0-scss>cd scss

D:\0-scss\scss>sass --style expanded landio.scss:new10.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new10.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style nested landio.scss:new10.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style nested landio.scss:new11.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style nested landio.scss:new12.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style nested landio.scss:new13.css
Error: Import directives may not be used within control directives or mixins.
on line 100 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style nested landio.scss:new14.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style watch landio.scss:new15.css
Error: Import directives may not be used within control directives or mixins.
on line 95 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new16.css
Error: Invalid CSS after ".../_animate.scss"": expected selector or at-rule, was "@include media-..."
on line 97 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new17.css

D:\0-scss\scss>sass --style expanded landio.scss:new18.css
Error: Invalid CSS after "...a-breakpoint-up": expected selector, was "(md)"
on line 94 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass -v
Sass 3.4.20 (Selective Steve)

D:\0-scss\scss>
D:\0-scss\scss>sass --style expanded landio.scss:new19.css
Error: Invalid CSS after "@import ": expected file to import (string or url()), was "media-breakpoin..."
on line 94 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new20.css
Error: @charset may only be used at the root of a document.
on line 6 of plugins/_animate.scss
from line 92 of landio.scss
Use --trace for backtrace.

D:\0-scss\scss>sass --style expanded landio.scss:new21.css

D:\0-scss\scss>


週間人気ページランキング / 7-20 → 7-26
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 10
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 10
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
3 RGB ⇔ Lab | 色変換(色) 8
3 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
3 色モデルイメージ図 | 色変換(色) 8
3 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 8
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
4 カラーコード / 色コード | カラーコード(色) 6
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 6
4 RGBの種類 / ビットカラー | RGB(色) 6
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 6
5 「bgcolor」「background-color」「background」の違い | CSS 5
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
5 utf-8ではなく、UTF-8 | HTML 5
5 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 5
6 効果を打ち消すスタイルシート | CSS 4
6 16進数カラーコード / 2進数 4
7 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 3
7 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 3
2025/7/27 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-7-26
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8657
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4565
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3740
4 Design 0 3704
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2713
6 RGBの種類 / ビットカラー | RGB(色) 2661
7 「bgcolor」「background-color」「background」の違い | CSS 1986
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1902
9 16進数カラーコード / 2進数 1843
10 コズミックブルーが何色か分からない | 色 1813
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1666
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1656
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1597
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1513
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1456
16 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1362
17 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1335
18 「東京都」のカラーコード取得は難しい | 色 1194
19 HSLとHSVの違い | 色変換(色) 1150
20 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1133
2025/7/27 1:01 更新