With the introduction of Bootstrap to Joomla 3.x, LESS has been introduced to the Joomla world. LESS presents the opportunity to make writing CSS, especially the new CSS3, easier. This session how LESS works, what you need to use it, how to write it, and how to incorporate it into your workflow.LESS
36. Debug Issues
Firebug gives CSS line # not LESS #
Search LESS files for multiple
selectors
Doesn't work when nested
JAB 2013: LESS, The CSS Preprocessor 36
49. Bootstrap.less
Contains @imports of other less
files.
Replace jui bootstrap.less with
template.less in your template.
JAB 2013: LESS, The CSS Preprocessor 49
51. variables.less
Sets up variables for your template
Copy file from media/jui/less and
change it in your template
JAB 2013: LESS, The CSS Preprocessor 51
53. template.less
@import less files from media/jui/
less
@import any less files in your
template
Add styles for your template
using less
JAB 2013: LESS, The CSS Preprocessor 53
54. Remember,
straight CSS is valid
LESS.
Add in LESS where it is helpful.
Ignore it where it would be
confusing.
JAB 2013: LESS, The CSS Preprocessor 54
56. template.less (con't)
After the main Bootstrap imports,
import the Joomla specific less file
to override as necessary.
@import "../../../media/jui/less/
bootstrap-extended.less";
JAB 2013: LESS, The CSS Preprocessor 56
57. template.less (con't)
After the imports, add your styles
.img_caption .right {
float: right;
margin-left: 1em;
}
JAB 2013: LESS, The CSS Preprocessor 57
58. Compile the template.less file
lessc ../less/template.less >
template.css
Call the template.css file in your
index.php file as usual.
JAB 2013: LESS, The CSS Preprocessor 58