* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2.3 KiB
2.3 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
587d7dbf367417b2b2512bbb | 使用 @while 循環創建樣式 | 0 | 301454 | apply-a-style-until-a-condition-is-met-with-while |
--description--
Sass 中的 @while
指令與 JavaScript 中的 while
類似。 只要滿足條件,它就會一直創建 CSS 代碼。
@for
挑戰提供了一個創建簡單網格系統的示例。 用 @while
也可以實現。
$x: 1;
@while $x < 13 {
.col-#{$x} { width: 100%/12 * $x;}
$x: $x + 1;
}
首先,定義變量 $x
並將其設置爲 1。 接下來,使用 @while
指令,while $x
小於 13 時創建網格系統 。 在設置 width
的 CSS 規則後,$x
增加 1 以避免無限循環。
--instructions--
使用 @while
創建一系列具有不同 font-sizes
的 class。
從 text-1
到 text-5
應該有 5 個不同的 class。 然後將 font-size
設置爲 15px
乘以當前索引號。 注意不要寫成死循環!
--hints--
代碼應使用 @while
指令。
assert(code.match(/@while /g));
代碼應將開始索引變量設置爲 1 。
assert(code.match(/\$.*:\s*?1;/gi));
代碼應該遞增計數器變量。
assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
.text-1
class 的 font-size
應爲 15px
。
assert($('.text-1').css('font-size') == '15px');
.text-2
class 的 font-size
應爲 30px
。
assert($('.text-2').css('font-size') == '30px');
.text-3
class 的 font-size
應爲 45px
。
assert($('.text-3').css('font-size') == '45px');
.text-4
class 的 font-size
應爲 60px
。
assert($('.text-4').css('font-size') == '60px');
.text-5
class 的 font-size
應爲 75px
。
assert($('.text-5').css('font-size') == '75px');
--seed--
--seed-contents--
<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--
<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>