04.07.2019 Views

frontend-developer-1

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Use LESS/CSS to Customize the Magento Look and Feel<br />

@import directive:<br />

While Magento contains hundreds of .less files, it compiles those files back into<br />

a number of .css files. LESS provides an @import construct to import a file. All<br />

files can import other files. Eventually an entire tree is built of imported files. A LESS<br />

convention is that all files that are included by the @import construct starts with an<br />

underscore in its filename.<br />

The styles-l.less file contains this line:<br />

@import '_styles.less';<br />

This is including _styles.less, which includes other files.<br />

HELPFUL LINKS:<br />

• https://devdocs.magento.com/guides/v2.0/<strong>frontend</strong>-dev-guide/<br />

css-topics/css-preprocess.html#fedg_css-import<br />

• http://lesscss.org/features/#import-atrules-feature<br />

Mixins<br />

This is the equivalent to a method or a function in another programming language.<br />

Mixins return CSS instructions. The goal is that you write it once in a mixin and then<br />

reuse that throughout the application’s theme (DRY principle).<br />

The way it works is you write some LESS instructions (which, in this case, are<br />

verbatim CSS):<br />

Copyright © 2018, SwiftOtter, Inc.<br />

105

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!