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

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

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

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

Q&A

0回答

202閲覧

sassのwhile文とif文を使い一定の間隔ごとにプロパティを出し分ける

yuutop0425

総合スコア0

Sass

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

0グッド

0クリップ

投稿2022/06/26 10:51

編集2022/06/26 11:24

sassのwhile文とif文を使い
変数が一定の間隔で増やしていきif文でfloat:left;とrightを出し分けようと考えています。
@mixinで定義し@inculudeで呼び出せる関数を作ろうと思っています。
途中まで組み立てようとしましたが、少し思いつきません

@while文で1,4,7,10,13といった具合に増えて行く書き方をしています。

ifで変数$1の時leftで4になったらrightといった具合に増えて行き条件分岐できるのが理想なのですが、(繰り返し1回目、2回目で、floatのleftとrightが切り替わる)
別のやり方でないと厳しいでしょうか?

少し知恵をお借りできたると幸いです。

sass

1 @mixin float(){ 2 $i:1; 3 @while $i < 50 { 4 &:nth-child( n + #{$i}) { 5 6 } 7 } 8 $i: $i + 3; 9 } 10コード

追記
別の方法を考えこのように改変してみました。

sass

1 @include mq("pc") { 2 @mixin floatI() { 3 $left:1; 4 @while $left < 20 { 5 &:nth-child(n + #{$left}) { 6 float: left; 7 } 8 } 9 $left:$left + 6; 10 $right:4; 11 @while $right < 20 { 12 &:nth-child(n + #{$right}) { 13 float: right; 14 } 15 } 16 $right:$right + 6; 17 } 18 @include floatI(); 19 20 width: 32%; 21 // float: left; 22 // &:nth-child(n + 4) { 23 // float: right; 24 // } 25 } 26コード

クラスの中でこのように記述してますが、live sass compilerがエラーで止まってしまいます。

Compilation Error
Error: Mixins may not contain mixin declarations.

上記がエラー内容です。

すみませんがお力くださると幸いです!

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問