Sass and Less 486 KB

@dotcms
Network: Hiltonmtg
Password: 05061988
SASS & LESS
2
CSS Preprocessors
Extends the CSS language, adding
features that allow variables, mixins,
functions and many other techniques.
Source: http://lesscss.org/ , http://sass-lang.com/
3
“
We are one of the first CMS’s, if not
the first, to allow editing and
compiling of SASS & LESS files on the
fly.
4
Why SASS And LESS?
• Awesome documentation
• Great community
• Essential in any modern front-end
workflow
5
Ready To Go
• Don’t worry about ruby or javascript
• Nothing else to download, install or
setup
• Nothing to do in the terminal
6
Advantages of uploading SASS &
LESS files to dotCMS
• Server side editing & instant compiling
• Files are served minified to the user
• Revertible change/user history kept on
every Sass/Less file
• Cache rebuilds each time files are edited
7
Sass/Less files cache
8
DotCMS File Versions
9
PARTIALS
10
In LESS Files You Can Do:
File: main.less
@import "path/to/file.less";
@import "path/to/vars.less";
@import "path/to/widgets.less”;
11
In SASS Files You Can Do:
File: main.scss
@import "path/to/_file";
@import "path/to/_vars";
@import "path/to/_widgets”;
• The compiler will treat all files prefixed with an "_" as partial and will
not compile those files on their own.
• Note: The .sass (or .scss), file extension is not needed.
12
“
Even when you change code in your partial,
the dotCMS compiler is smart enough to
recompile the project/main file.
13
How to reference
SASS & LESS files in a
dotCMS template
14
Regular Reference To CSS
<link rel="stylesheet"
href="/css/main.css”>
15
Reference the SASS Compiler
<link rel="stylesheet"
href="/DOTSASS/sass/main.css”
>
16
Reference the LESS Compiler
<link rel="stylesheet"
href="/DOTLESS/less/main.css”
>
17
How to reference
SASS & LESS files in a
dotCMS Themes
18
Proper Path of Less Files in Themes
<link rel="stylesheet"
href="/DOTLESS${dotTheme.path
}less/main.css”>
19
Proper Path of Sass Files in Themes
<link rel="stylesheet"
href="/DOTSASS${dotTheme.path
}sass/main.css”>
20
Debugging
21
To debug issues with the Sass/Less Compiler
SASS:
http://{host}/DOTSASS/{path}/main.css?debug=true
LESS:
http://{host}/DOTLESS/{path}/main.css?debug=true
22
Forcing the Recompile of the Sass/Less File
SASS:
http://{host}/DOTSASS/{path}/main.css?
recompile=true
LESS:
http://{host}/DOTLESS/{path}/main.css?
recompile=true
23
DEMO
24
Muted Blue
http://dotcms.com/theme/muted-blue
25
Documentation
http://www.dotcms.com/docs/latest/Serv
erSideCompilingOfSassAndLessFiles
Coming soon - dotCMS 3.0
26

Download Report