7. - Ever used Magento’s RWD theme? Then you met SASS
- SASS !== LESS
- Requires NodeJS, easy to install
- Use variables, nested styles, functions, etc.
- Watch usefull tutorials online on YouTube
Less
8. nav {
margin: 50px auto 0;
width: 750px;
ul {
padding: 0;
margin: 0;
li {
display: inline-block;
&:hover {
background-color: #5e5b56;
}
}
}
}
Less
9. nav { margin: 50px auto 0; width: 750px; height: 45px; }
nav ul { padding: 0; margin: 0; }
nav ul li { display: inline-block; }
nav ul li:hover { background-color: #5e5b56; }
Less
12. .lib-css(
@_property,
@_value,
@_prefix: 0
) when (@_prefix = 1)
and not (@_value = '')
and not (@_value = false)
and not (extract(@_value, 1) = false)
and not (extract(@_value, 2) = false)
and not (extract(@_value, 3) = false)
and not (extract(@_value, 4) = false)
and not (extract(@_value, 5) = false) {
-webkit-@{_property}: @_value;
-moz-@{_property}: @_value;
-ms-@{_property}: @_value;
}
Less
15. RequireJS
- Magento now uses AMD (Asynchronous Module Definitions)
- Easily manage JavaScript dependencies
- Asynchronous loading === faster page load
- JavaScripts are not initialized via layout XML files
Thanks to Filip Svetličić (Watch on YouTube)
17. RequireJS
require.config({
baseUrl: 'js/lib',
paths: {
// the left side is the module ID,
// the right side is the path to
// the jQuery file, relative to baseUrl.
// Also, the path should NOT include
// the '.js' file extension. This example
// is using jQuery 1.9.0 located at
// js/lib/jquery-1.9.0.js, relative to
// the HTML page.
jquery: 'jquery-1.9.0'
}
});