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

Webデザイン

カテゴリー: SCSS  閲覧数:785 配信日: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>


週間人気ページランキング / 3-21 → 3-27
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 8
2 RGBの種類 / ビットカラー | RGB(色) 7
3 ログイン 6
4 Design 0 5
4 RGB ⇔ Lab | 色変換(色) 5
5 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
5 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
5 画像縦横比の問題 | 画像 4
5 HSV / HSB 4
5 「bgcolor」「background-color」「background」の違い | CSS 4
6 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 3
6 「position:absolute;」指定する際は、必ず(親要素を含む)祖先要素の何れかで「position」を明示的に指定 | position(CSS) 3
6 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
6 Firefox(ブラウザ) カテゴリー 3
6 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
6 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない | Fireworks 8(Fireworks) 3
6 bootstrap3で意図せず横スクロールバーが表示される場合は、containerクラスの入れ子を疑う | 3系(Bootstrap) 3
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 3
6 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 3
7 デザイン変更 | Webデザイン(デザイン) 2
2026/3/28 5:05 更新
指定期間人気ページランキング / 2020-5-30 → 2026-3-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8922
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4616
3 Design 0 4051
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3794
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2783
6 RGBの種類 / ビットカラー | RGB(色) 2765
7 「bgcolor」「background-color」「background」の違い | CSS 2096
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 2075
9 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1980
10 16進数カラーコード / 2進数 1884
11 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1882
12 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1713
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1701
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1638
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能(ブラウザ) 1560
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1533
17 「東京都」のカラーコード取得は難しい | カラーコード(色) 1428
18 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1392
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1245
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1225
2026/3/28 5:05 更新