chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbb
|
||||
title: '@while を使用して条件が満たされるまでスタイルを適用する'
|
||||
challengeType: 0
|
||||
forumTopicId: 301454
|
||||
dashedName: apply-a-style-until-a-condition-is-met-with-while
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`@while` ディレクティブは JavaScript の `while` ループと同様の機能を持つオプションで、 条件が満たされるまで CSS ルールを作成します。
|
||||
|
||||
`@for` のチャレンジではシンプルなグリッドシステムを作成する例を紹介しました。 この例は `@while` でも作成できます。
|
||||
|
||||
```scss
|
||||
$x: 1;
|
||||
@while $x < 13 {
|
||||
.col-#{$x} { width: 100%/12 * $x;}
|
||||
$x: $x + 1;
|
||||
}
|
||||
```
|
||||
|
||||
まず、変数 `$x` を定義して 1 に設定します。 次に、`@while` ディレクティブを使用して、`$x` が 13 未満である*間 (while) *、グリッドシステムを作成します。 `width` の CSS ルールを設定した後、無限ループを回避するために `$x` を 1 増やします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`@while` を使用して、`font-size` が異なる一連のクラスを作成してください。
|
||||
|
||||
`text-1` から `text-5` までの 5 つの異なるクラスを作成してください。 次に、`15px` に現在のインデックスを掛けた値を `font-size` に設定してください。 必ず無限ループを避けてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードで `@while` ディレクティブを使用します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@while /g));
|
||||
```
|
||||
|
||||
コードでインデックス変数を使用します。インデックス変数は 1 から始めます。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$.*:\s*?1;/gi));
|
||||
```
|
||||
|
||||
コードでカウンター変数を 1 増やします。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
|
||||
```
|
||||
|
||||
`.text-1` クラスの `font-size` を `15px` に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
`.text-2` クラスの `font-size` を `30px` に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
`.text-3` クラスの `font-size` を `45px` に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
`.text-4` クラスの `font-size` を `60px` に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
`.text-5` クラスの `font-size` を `75px` に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$x: 1;
|
||||
@while $x < 6 {
|
||||
.text-#{$x}{
|
||||
font-size: 15px * $x;
|
||||
}
|
||||
$x: $x + 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb6
|
||||
title: ミックスインを使用して再利用可能な CSS を作成する
|
||||
challengeType: 0
|
||||
forumTopicId: 301455
|
||||
dashedName: create-reusable-css-with-mixins
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass の<dfn>ミックスイン</dfn>は、スタイルシート全体で再利用できる CSS 宣言のグループです。
|
||||
|
||||
新しい CSS 機能ほど、完全に採用されてすべてのブラウザーで使用できるようになるまでに時間がかかります。 機能がブラウザーに追加されるまでの間、それらの機能を使用している CSS ルールではベンダープレフィックスが必要になる場合があります。 たとえば `box-shadow` を考えてみましょう。
|
||||
|
||||
```scss
|
||||
div {
|
||||
-webkit-box-shadow: 0px 0px 4px #fff;
|
||||
-moz-box-shadow: 0px 0px 4px #fff;
|
||||
-ms-box-shadow: 0px 0px 4px #fff;
|
||||
box-shadow: 0px 0px 4px #fff;
|
||||
}
|
||||
```
|
||||
|
||||
`box-shadow` のあるすべての要素でこのルールを書き直したり、それぞれの値を変えてさまざまな効果をテストしたりするには、たくさんの入力が必要になります。 ミックスインは CSS 版の関数のようなもので、 次のように記述します。
|
||||
|
||||
```scss
|
||||
@mixin box-shadow($x, $y, $blur, $c){
|
||||
-webkit-box-shadow: $x $y $blur $c;
|
||||
-moz-box-shadow: $x $y $blur $c;
|
||||
-ms-box-shadow: $x $y $blur $c;
|
||||
box-shadow: $x $y $blur $c;
|
||||
}
|
||||
```
|
||||
|
||||
定義は `@mixin` で始まり、その後にカスタム名を付けます。 パラメーター (前の例では `$x`、`$y`、`$blur`、`$c`) は任意です。 これで、`box-shadow` ルールが必要になったときはいつでも、ミックスインを呼び出す 1 行だけで済み、すべてのベンダープレフィックスを入力する必要がなくなります。 ミックスインは `@include` ディレクティブを使用して呼び出します。
|
||||
|
||||
```scss
|
||||
div {
|
||||
@include box-shadow(0px, 0px, 4px, #fff);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`border-radius` のミックスインを記述して、`$radius` パラメーターを設定してください。 前述の例にあるすべてのベンダープレフィックスを使用してください。 そして、`border-radius` ミックスインを使用して、`#awesome` 要素に `15px` の境界線半径を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`$radius` というパラメーターを持つ `border-radius` というミックスインをコードで宣言します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
`$radius` パラメーターを使用する `-webkit-border-radius` ベンダープレフィックスをコードに含めます。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`$radius` パラメーターを使用する `-moz-border-radius` ベンダープレフィックスをコードに含めます。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`$radius` パラメーターを使用する `-ms-border-radius` ベンダープレフィックスをコードに含めます。
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
|
||||
```
|
||||
|
||||
`$radius` パラメーターを使用する汎用の `border-radius` ルールをコードに含めます。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
|
||||
4
|
||||
);
|
||||
```
|
||||
|
||||
`@include` キーワードを使用して `border-radius mixin` を呼び出し、`15px` に設定します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
-ms-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
#awesome {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: green;
|
||||
@include border-radius(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="awesome"></div>
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 587d7fa5367417b2b2512bbd
|
||||
title: 1 組の CSS スタイルセットを別の要素に拡張する
|
||||
challengeType: 0
|
||||
forumTopicId: 301456
|
||||
dashedName: extend-one-set-of-css-styles-to-another-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass には `extend` という機能があり、ある要素から CSS ルールを借用して別の要素でそれらを基にしてスタイルを構築することが簡単できます。
|
||||
|
||||
たとえば、次の CSS ルールのブロックは `.panel` クラスのスタイルを設定しています。 このクラスには `background-color`、`height`、`border` があります。
|
||||
|
||||
```scss
|
||||
.panel{
|
||||
background-color: red;
|
||||
height: 70px;
|
||||
border: 2px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
ここで、`.big-panel` という別のパネルが必要になったとします。 このパネルは `.panel` と同じベースプロパティを持ちますが、`width` と `font-size` も必要です。 `.panel` から最初の CSS ルールをコピーして貼り付けることもできますが、パネルの種類を追加するたびにコードが繰り返されてしまいます。 `extend` ディレクティブを使用すると、ある要素で記述したルールを再利用し、別の要素でルールを追加することが簡単にできます。
|
||||
|
||||
```scss
|
||||
.big-panel{
|
||||
@extend .panel;
|
||||
width: 150px;
|
||||
font-size: 2em;
|
||||
}
|
||||
```
|
||||
|
||||
これで `.big-panel` は、`.panel` と同じプロパティに加えて、新しいスタイルを持ちます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`.info` を拡張し、さらにマゼンタに設定された `background-color` を持つ、`.info-important` を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`info-important` クラスで、`background-color` を `magenta` に設定します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`info-important` クラスで、`@extend` を使用して `info` クラスからスタイル設定を継承します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
h3{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
width: 200px;
|
||||
border: 1px solid black;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.info-important{
|
||||
@extend .info;
|
||||
background-color: magenta;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h3>Posts</h3>
|
||||
<div class="info-important">
|
||||
<p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<p>This is a simple post. It has basic styling and can be extended for other uses.</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb5
|
||||
title: Sass を使用して CSS をネストする
|
||||
challengeType: 0
|
||||
forumTopicId: 301457
|
||||
dashedName: nest-css-with-sass
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass では CSS ルールのネスト (入れ子) が可能であり、スタイルシートを整理するのに便利です。
|
||||
|
||||
通常、要素にスタイルを設定するには、次のように要素ごとに異なる行でターゲットを記述します。
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
```
|
||||
|
||||
大きなプロジェクトでは、CSS ファイルにたくさんの行やルールが記述されます。 次のようにネストしてそれぞれの親要素の中に子のスタイルルールを記述することで、コードが整理しやすくなります。
|
||||
|
||||
```scss
|
||||
nav {
|
||||
background-color: red;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
前述のネストの記法を使用して、`.blog-post` 要素の両方の子の CSS ルールを整理し直してください。 テストのため、`p` 要素の前に `h1` を記述してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードの CSS ルールを整理し直して、`h1` と `p` が `.blog-post` 親要素の中にネストされるようにします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
.blog-post {
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blog-post">
|
||||
<h1>Blog Title</h1>
|
||||
<p>This is a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bbc
|
||||
title: パーシャルを使用してスタイルを小分けする
|
||||
challengeType: 0
|
||||
forumTopicId: 301459
|
||||
dashedName: split-your-styles-into-smaller-chunks-with-partials
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass の<dfn>パーシャル</dfn>は、CSS コードの一部分を保持する別のファイルです。 これらのファイルは他の Sass ファイルにインポートして使用します。 この機能は、類似したコードをモジュールにまとめて整理するのにとても便利です。
|
||||
|
||||
パーシャルの名前はアンダースコア (`_`) 文字で始まります。これにより、パーシャルが CSS の小さなセグメントであり、CSS ファイルに変換しないよう Sass に指示します。 また、Sass ファイルは `.scss` ファイル拡張子で終わります。 パーシャル内のコードを別の Sass ファイルに含めるには `@import` ディレクティブを使用します。
|
||||
|
||||
たとえば、すべてのミックスインが "\_mixins.scss" という名前のパーシャルに保存されていて、"main.scss" ファイルで必要な場合は、次の方法でメインファイルで使用します。
|
||||
|
||||
```scss
|
||||
@import 'mixins'
|
||||
```
|
||||
|
||||
Sass はパーシャルであることを認識しているので、`import` ステートメントではアンダースコアとファイル拡張子は不要です。 パーシャルをファイルにインポートすると、すべての変数やミックスインやその他のコードを使用できるようになります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`_variables.scss` というパーシャルを main.scss ファイルにインポートする `@import` ステートメントを記述してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードで `@import` ディレクティブを使用します。ファイル名にはアンダースコアを付けません。
|
||||
|
||||
```js
|
||||
assert(code.match(/@import\s+?('|")variables\1/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!-- The main.scss file -->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
@import 'variables'
|
||||
```
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d7dbd367417b2b2512bb4
|
||||
title: Sass の変数を使用してデータを保存する
|
||||
challengeType: 0
|
||||
forumTopicId: 301460
|
||||
dashedName: store-data-with-sass-variables
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass が CSS と異なる機能の一つは、変数の使用です。 これらは JavaScript と同様に宣言し、設定してデータを保存します。
|
||||
|
||||
JavaScript では、変数は `let` キーワードと `const` キーワードを使用して定義します。 Sass では、変数は `$` で始まり、その後に変数名を付けます。
|
||||
|
||||
いくつかの例を次に示します。
|
||||
|
||||
```scss
|
||||
$main-fonts: Arial, sans-serif;
|
||||
$headings-color: green;
|
||||
```
|
||||
|
||||
変数を使用するには次のようにします。
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
font-family: $main-fonts;
|
||||
color: $headings-color;
|
||||
}
|
||||
```
|
||||
|
||||
たとえば、多数の要素の色を同じにする必要がある場合などで、変数が役に立ちます。 その色が変更されても、コードの変数値の部分を編集するだけで済みます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
変数 `$text-color` を作成し、`red` に設定してください。 次に、`.blog-post` と `h2` の `color` プロパティの値を `$text-color` 変数に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードで Sass 変数 `$text-color` を宣言し、値を `red` に設定します。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
|
||||
```
|
||||
|
||||
コードで `$text-color` 変数を使用して、`.blog-post` アイテムと `h2` アイテムの `color` を変更します。
|
||||
|
||||
```js
|
||||
assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
|
||||
```
|
||||
|
||||
`.blog-post` 要素の `color` を赤に設定します。
|
||||
|
||||
```js
|
||||
assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
`h2` 要素の `color` を赤に設定します。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
$text-color: red;
|
||||
|
||||
.header{
|
||||
text-align: center;
|
||||
}
|
||||
.blog-post, h2 {
|
||||
color: $text-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="header">Learn Sass</h1>
|
||||
<div class="blog-post">
|
||||
<h2>Some random title</h2>
|
||||
<p>This is a paragraph with some random text in it</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Header #2</h2>
|
||||
<p>Here is some more random text.</p>
|
||||
</div>
|
||||
<div class="blog-post">
|
||||
<h2>Here is another header</h2>
|
||||
<p>Even more random text within a paragraph</p>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d7dbf367417b2b2512bba
|
||||
title: '@each を使用してリスト内の各アイテムをマップする'
|
||||
challengeType: 0
|
||||
forumTopicId: 301461
|
||||
dashedName: use-each-to-map-over-items-in-a-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、 `@for` ディレクティブで開始値と終了値を使用して特定の回数を繰り返し処理する方法を紹介しました。 Sass には、リストやマップの各アイテムをループ処理する `@each` ディレクティブもあります。 それぞれの繰り返しで、リストまたはマップの現在の値が変数に割り当てられます。
|
||||
|
||||
```scss
|
||||
@each $color in blue, red, green {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
マップの構文は少し異なります。 例:
|
||||
|
||||
```scss
|
||||
$colors: (color1: blue, color2: red, color3: green);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-text {color: $color;}
|
||||
}
|
||||
```
|
||||
|
||||
マップのキーを参照するために `$key` 変数が必要です。 変数がない場合、コンパイル後の CSS には `color1`、 `color2`... が含まれます。 上記のコード例はどちらも次の CSS に変換されます。
|
||||
|
||||
```scss
|
||||
.blue-text {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
リスト `blue, black, red` をひととおり処理して各変数に `.color-bg` クラス (`color` の部分はアイテムごとに変化します) を割り当てる `@each` ディレクティブを記述してください。 各クラスの `background-color` にそれぞれの色を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードで `@each` ディレクティブを使用します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@each /g));
|
||||
```
|
||||
|
||||
`.blue-bg` クラスの `background-color` を青に設定します。
|
||||
|
||||
```js
|
||||
assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
`.black-bg` クラスの `background-color` を黒に設定します。
|
||||
|
||||
```js
|
||||
assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`.red-bg` クラスの `background-color` を赤に設定します。
|
||||
|
||||
```js
|
||||
assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@each $color in blue, black, red {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
$colors: (color1: blue, color2: black, color3: red);
|
||||
|
||||
@each $key, $color in $colors {
|
||||
.#{$color}-bg {background-color: $color;}
|
||||
}
|
||||
|
||||
div {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="blue-bg"></div>
|
||||
<div class="black-bg"></div>
|
||||
<div class="red-bg"></div>
|
||||
```
|
||||
@@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb9
|
||||
title: '@for を使用して Sass のループを作成する'
|
||||
challengeType: 0
|
||||
forumTopicId: 301462
|
||||
dashedName: use-for-to-create-a-sass-loop
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`@for` ディレクティブは、ループ内でスタイルを追加します。JavaScript の `for` ループと非常によく似ています。
|
||||
|
||||
`@for` は "start through end" と "start to end" の 2 つの記法で使用します。 両者の主な違いは、"start **to** end" ではカウントの一部として最後の数値が*含まれない*のに対し、"start **through** end" ではカウントの一部として最後の数値が*含まれる*ことです。
|
||||
|
||||
start **through** end の例を次に示します。
|
||||
|
||||
```scss
|
||||
@for $i from 1 through 12 {
|
||||
.col-#{$i} { width: 100%/12 * $i; }
|
||||
}
|
||||
```
|
||||
|
||||
`#{$i}` の部分は、変数 (`i`) とテキストを組み合わせて文字列を作るための構文です。 Sass ファイルが CSS に変換されると次のようになります。
|
||||
|
||||
```scss
|
||||
.col-1 {
|
||||
width: 8.33333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66667%;
|
||||
}
|
||||
|
||||
...
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
これはグリッドレイアウトを作成するのにとても便利な方法です。 これで、12 個の列幅のオプションを CSS クラスとして利用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
1 **to** 6 で変化する変数 `$j` を受け取る `@for` ディレクティブを記述してください。
|
||||
|
||||
`.text-1` から `.text-5` までの 5 つのクラスを作成し、各クラスの `font-size` を 15px のインデックス倍に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コードで `@for` ディレクティブを使用します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@for /g));
|
||||
```
|
||||
|
||||
`.text-1` クラスの `font-size` を 15px に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-1').css('font-size') == '15px');
|
||||
```
|
||||
|
||||
`.text-2` クラスの `font-size` を 30px に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-2').css('font-size') == '30px');
|
||||
```
|
||||
|
||||
`.text-3` クラスの `font-size` を 45px に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-3').css('font-size') == '45px');
|
||||
```
|
||||
|
||||
`.text-4` クラスの `font-size` を 60px に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-4').css('font-size') == '60px');
|
||||
```
|
||||
|
||||
`.text-5` クラスの `font-size` を 75px に設定します。
|
||||
|
||||
```js
|
||||
assert($('.text-5').css('font-size') == '75px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
@for $i from 1 to 6 {
|
||||
.text-#{$i} { font-size: 15px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 587d7dbe367417b2b2512bb8
|
||||
title: '@if と @else を使用してスタイルにロジックを追加する'
|
||||
challengeType: 0
|
||||
forumTopicId: 301463
|
||||
dashedName: use-if-and-else-to-add-logic-to-your-styles
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sass の `@if` ディレクティブは特定の case をテストするのに便利です。JavaScript の `if` ステートメントとまったく同じように動作します。
|
||||
|
||||
```scss
|
||||
@mixin make-bold($bool) {
|
||||
@if $bool == true {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
JavaScript と同様に、`@else if` と `@else` でテストする条件を増やします。
|
||||
|
||||
```scss
|
||||
@mixin text-effect($val) {
|
||||
@if $val == danger {
|
||||
color: red;
|
||||
}
|
||||
@else if $val == alert {
|
||||
color: yellow;
|
||||
}
|
||||
@else if $val == success {
|
||||
color: green;
|
||||
}
|
||||
@else {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
パラメーター `$val` を受け取る `border-stroke` というミックスインを作成してください。 ミックスインでは `@if`、`@else if`、`@else` を使用して次の条件をチェックしてください。
|
||||
|
||||
```scss
|
||||
light - 1px solid black
|
||||
medium - 3px solid black
|
||||
heavy - 6px solid black
|
||||
```
|
||||
|
||||
`$val` が `light` でも `medium` でも `heavy` でもない場合は、境界線を `none` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`$val` というパラメーターを持つ `border-stroke` というミックスインをコードで宣言します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
|
||||
```
|
||||
|
||||
ミックスインで `@if` ステートメントを使用して、`$val` が `light` かどうかをチェックし、`border` を `1px solid black` に設定します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
ミックスインで `@else if` ステートメントを使用して、`$val` が `medium` かどうかをチェックし、`border` を `3px solid black` に設定します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
ミックスインで `@else if` ステートメントを使用して、`$val` が `heavy` かどうかをチェックし、`border` を `6px solid black` に設定します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
ミックスインで `@else` ステートメントを使用して、`border` を `none` に設定します。
|
||||
|
||||
```js
|
||||
assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style type='text/scss'>
|
||||
@mixin border-stroke($val) {
|
||||
@if $val == light {
|
||||
border: 1px solid black;
|
||||
}
|
||||
@else if $val == medium {
|
||||
border: 3px solid black;
|
||||
}
|
||||
@else if $val == heavy {
|
||||
border: 6px solid black;
|
||||
}
|
||||
@else {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#box {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
@include border-stroke(medium);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
```
|
||||
Reference in New Issue
Block a user