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

Webデザイン

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


週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新
指定期間人気ページランキング / 2020-5-30 → 2025-2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 8489
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 4529
3 血の色 / #b30000 / #360800 / #ff0000 | 色 3670
4 Design 0 3638
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2660
6 RGBの種類 / ビットカラー | RGB(色) 2607
7 「bgcolor」「background-color」「background」の違い | CSS 1903
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 1787
9 コズミックブルーが何色か分からない | 色 1770
10 16進数カラーコード / 2進数 1664
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1630
12 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 1615
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 1576
14 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1500
15 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 1343
16 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Google Chrome(ブラウザ) 1283
17 HSLとHSVの違い | 色変換(色) 1141
18 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 1116
19 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 1042
20 「東京都」のカラーコード取得は難しい | 色 1037
2025/2/5 1:02 更新