Font size
WorksheetsQuiz styles in Magento 2
Total questions: 15
Worksheet time: 8mins
What is the correct way to define a mixin in LESS?
.my-mixin(@arguments) {
...
}
@my-mixin($arguments) {
...
}
=my-mixin(@arguments) {
...
}
@mixin my-mixin($arguments) {
...
}
What does the special variable @arguments do in a LESS mixin?
Takes the arguments that were passed into the mixin an renders them in that order
Contains default arguments that are passed into the mixin an renders them in that order.
Defines additional arguments to be used in the mixin.
Contains default arguments that are passed to all mixins by the framework
Which of the main css files included in the default_head_blocks.xml file in a Magento theme? Select all that apply.
styles-m.css
styles-l.css
print.css
screen.css
Where should overrides of existing LESS variables be added?
<theme_dir>/web/css/source/_layout.less
<theme_dir>/web/css/source/_variables.less
<theme_dir>/web/css/source/lib/_variables.less
<theme_dir>/web/css/source/_theme.less
What command would you use to create symlinks to LESS files for the Magento/luma theme in the fr_FR locale?
bin/magento setup:static-content:deploy -f
bin/magento setup:static-content:deploy --area frontend --theme Magento/luma
bin/magento dev:source-theme:deploy --theme Magento/luma
bin/magento dev:source-theme:deploy --locale fr_FR --theme Magento/luma
What is the main difference between client-side and server-side compilation in Magento 2?
Client-side compilation is faster than server-side compilation
Server-side compilation is faster than client-side compilation
Client-side compilation is performed in the browser, while server-side compilation is performed on the server
Server-side compilation is performed in the browser, while client-side compilation is performed on the server
How would you create an override for the core Magento UI library dropdowns in your theme?
theme_dir>/web/css/source/_dropdowns.less
<theme_dir>/Magento_Ui/web/css/source/lib/_dropdowns.less
<theme_dir>/lib/web/css/source/_dropdowns.less
<theme_dir>/web/css/source/lib/_dropdowns.less
What command do you need to run when you create a new LESS file?
bin/magento setup:perf:generate-fixtures
bin/magento setup:static-content:deploy
bin/magento dev:source-theme:deploy
bin/magento setup:di:compile
Where are the CSS merging and minification options found?
In the Admin panel, in Stores > Configuration > Advanced > Developer > CSS Settings
In app/env.php
In dev/tools/grunt/configs/themes.js
In app/config.php
How are the Magento UI Library mixins imported in a LESS file?
@import '../../css/source/lib/[name_of_module]';
@import 'lib/[name_of_module]'
@import (reference) '../../css/source/lib/lib';
@magento_import 'lib/[name_of_module]'
What is the difference between overriding and extending Magento 2 LESS?
There is no difference between overriding and extending in Magento 2 LESS
Overriding and extending have the same meaning in Magento 2 LESS
Overriding adds new styles, while extending replaces existing styles
Overriding replaces existing styles, while extending adds new styles
Which file is used to extend or override Magento 2 LESS?
app/design/frontend/{Vendor}/{Theme}/web/css/styles.css
app/design/frontend/{Vendor}/{Theme}/web/css/_extend.less
app/code/{Vendor}/{Module}/view/frontend/web/css/styles.css
app/code/{Vendor}/{Module}/view/frontend/web/css/_module.less
What is the difference between a mixin and an extend in Magento 2?
Mixins and extends have the same meaning in Magento 2
There is no difference between mixins and extends in Magento 2
A mixin combines styles, while extending adds new styles
A mixin replaces styles, while an extend combines styles
What is the purpose of using mixins in Magento 2?
To reuse common styles across multiple CSS rules
To add new functionality to Magento 2
To optimize the performance of Magento 2
To override default styles in Magento 2
Which file is used to style emails in Magento 2? Sellect all that apply.
app/design/frontend/{Vendor}/{Theme}/web/css/styles.css
app/design/frontend/{Vendor}/{Theme}/web/css/source/_email-variables.less
app/design/frontend/{Vendor}/{Theme}/web/css/styles.css
app/design/frontend/{Vendor}/{Theme}/web/css/source/_email-extend.less
