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

Webデザイン

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


週間人気ページランキング / 12-5 → 12-11
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 61
2 鉄道会社毎のカラーコード | カラーコード(色) 6
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 4
3 Design 0 4
3 効果を打ち消すスタイルシート | CSS 4
3 ログイン 4
4 キャラクター無料作成ジェネレーター / FLASH以外 / オンラインサービス | イラスト参考(デザイン) 3
4 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 3
4 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 3
4 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 3
4 Adobe Camera Raw 4.0 | Photoshop 3
5 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 2
5 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
5 Inkscape | ソフトウェア 2
5 HLS / HSL 2
5 HSV / HSB 2
5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
5 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 2
5 RGB ⇔ Lab | 色変換(色) 2
2025/12/12 1:01 更新
指定期間人気ページランキング / 2020-5-30 → 2025-12-11
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8879
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4597
3 Design 0 3797
4 血の色 / #b30000 / #360800 / #ff0000 | 色 3782
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2762
6 RGBの種類 / ビットカラー | RGB(色) 2714
7 「bgcolor」「background-color」「background」の違い | CSS 2058
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1961
9 16進数カラーコード / 2進数 1871
10 コズミックブルーが何色か分からない | 色 1858
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1696
12 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1684
13 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1683
14 「属性」「プロパティ」「アトリビュート」の違い | CSS 1610
15 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1530
16 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1521
17 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1376
18 「東京都」のカラーコード取得は難しい | 色 1361
19 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 1214
20 「西武鉄道株式会社」のブランドカラーは、3色(#3366CC、#66CCFF、#33CC66) | 色 1190
2025/12/12 1:01 更新