De fleste kender CSS, som det kodesprog vi skal bruge for at arbejde med designet af vores hjemmesider. LESS er en "overbygning" til CSS og gør mange ting lettere når vi skal arbejde med design af websider. Uanset om du tilpasser andres skabeloner eller laver dine egne, kan du have stor glæde af LESS.

1. Mindre arbejde
med CSS og LESS
Kort om CSS
Introduktion til LESS
LESS i Joomla-skabeloner
Tilpasning af skabelon med LESS
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

2. CSS
Syntaks
selektor {
egenskab: værdi;
egenskab: værdi;
osv.
}
Eksempel 1
Eksempel 2
h1 {
color: #222;
font-size: 24px;
line-height: 40px;
}
footer {
background-color: #eee;
margin: 20px 0 0 0;
padding: 20px;
}
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

3. LESS is MORE
LESS = CSS + …
•
•
•
•
•
•
Variables
Nested rules
Mixins
Parametriske mixins
Operations
Import
Se flere LESS-features på
lesscss.org
lesscss.dk
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

4. LESS - variables
Syntaks
@variabel: værdi;
Eksempel 1
Eksempel 2
@baseFontSize: 12px;
@blue: rgba(0,80,125,1);
div {
font-size: @baseFontSize;
}
div {
background-color: @blue;
}
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

5. LESS – nested rules
Syntaks
Eksempel
footer {
padding: @paddingLarge;
p{
color: @gray;
margin: @marginSmall;
}
}
div {
egenskab: værdi;
div {
egenskab: værdi;
}
}
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

6. LESS - mixins
Eksempel
Syntaks
.mixin {
egenskab: værdi;
egenskab: værdi;
osv.
}
.rounded {
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
div {
.rounded;
}
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

7. LESS – parametriske mixins
Syntaks
.mixin (parameter 1, parameter 2, osv.) {
egenskab: parameter 1, parameter 2, osv.;
egenskab: parameter 1, parameter 2, osv.;
osv.
}
Eksempel
.rounded (@topleft, @topright, @bottomright, @bottomleft) {
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
border-radius: @topleft @topright @bottomright @bottomleft;
}
div {
}
.rounded(@borderRadiusSmall, @borderRadiusSmall, @borderRadiusLarge, @borderRadiusLarge);
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

8. LESS - operations
Syntaks
div {
egenskab: værdi +-*/ tal;
}
Eksempel
@borderWidthLarge:
@baseBorderWidth * 1.25;
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

9. LESS - import
Syntaks
@import ”filnavn.endelse”;
Eksempel
@import ”mixins.less”;
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

10. Skabelon – LESS-filer
fra
template.less
@import "variables/base-variables.less";
@import "variables/size-variables.less";
@import "variables/type-variables.less";
@import "variables/containers-variables.less";
@import "variables/navigation-variables.less";
@import "mixins.less";
@import "containers.less";
@import "type.less";
Protostar, som er standardskabelon
i Joomla 3, er opbygget på cirka
samme måde.
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

11. Skabelon – fra LESS til CSS
”LESS compiler”-extension
template.less → template.css
Less-filen compiles, hver gang man
gemmer én af less-filerne.
Husk at aktivere ”LESS compiler”,
når du har installeret den.
Deaktivér compileren, når du er
færdig med at redigere i
skabelonen.
Redigér IKKE i CSS-filen.
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

12. Skabelon – base- og size-variables
fra
base-variables.less
@baseFontSize:
@baseFontFamily:
12px;
Helvetica, Arial, sans-serif;
@baseLineHeight:
@baseTextAlign:
1.5em;
left;
@basePadding:
@baseMargin:
1.25em;
1.25em;
@baseBorderWidth: 0.5em;
@baseBorderRadius: 1.25em;
fra
size-variables.less
@lineHeightXXXSmall:
@lineHeightXXSmall:
@lineHeightXSmall:
@lineHeightSmall:
@lineHeightMedium:
@lineHeightLarge:
@lineHeightXLarge:
@lineHeightXXLarge:
@lineHeightXXXLarge:
@baseLineHeight * 0.6;
@baseLineHeight * 0.7;
@baseLineHeight * 0.8;
@baseLineHeight * 0.9;
@baseLineHeight;
@baseLineHeight * 1.1;
@baseLineHeight * 1.2;
@baseLineHeight * 1.3;
@baseLineHeight * 1.4;
@marginXXXSmall:
@marginXXSmall:
@marginXSmall:
@marginSmall:
@marginMedium:
@marginLarge:
@marginXLarge:
@marginXXLarge:
@marginXXXLarge:
@baseMargin * 0.2;
@baseMargin * 0.4;
@baseMargin * 0.6;
@baseMargin * 0.8;
@baseMargin;
@baseMargin * 1.2;
@baseMargin * 1.4;
@baseMargin * 1.6;
@baseMargin * 1.8;
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

13. Skabelon –
variables niveau 1, 2 & 3
base-variables
size-variables
body
wrappers
modules
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

14. Skabelon
- containers 1
fra
containers.less
div {
background: @__BackgroundColor @__BackgroundImage
@__BackgroundRepeat @__BackgroundAttachment
@__BackgroundPosition;
border-width: @__BorderWidthTop @__BorderWidthRight
@__BorderWidthBottom @__BorderWidthLeft;
border-style: @__BorderStyle;
border-color: @__BorderColor;
margin: @__MarginTop @__MarginRight @__MarginBottom
@__MarginLeft;
padding: @__PaddingTop @__PaddingRight
@__PaddingBottom @__PaddingLeft;
.boxShadow(@__BoxShadowType,
@__BoxShadowHorizontal, @__BoxShadowVertical,
@__BoxShadowBlur, @__BoxShadowSpread,
@__BoxShadowColor );
.linearGradient(@__GradientOrigin, @__GradientColorStart,
@__GradientColorStop);
.rounded(@__BorderRadiusTopLeft,
@__BorderRadiusTopRight, @__BorderRadiusBottomRight,
@__BorderRadiusBottomLeft);
}
fra
containers-variables.less
@__BackgroundColor:
@__BackgroundImage:
@__BackgroundRepeat:
@__BackgroundAttachment:
@__BackgroundPosition:
none;
none;
no-repeat;
scroll;
left top;
@__PaddingTop:
@__PaddingRight:
@__PaddingBottom:
@__PaddingLeft:
0;
0;
@__PaddingTop;
@__PaddingRight;
@__MarginTop:
@__MarginRight:
@__MarginBottom:
@__MarginLeft:
0;
0;
@__MarginTop;
@__MarginRight;
@__BorderWidthTop:
@__BorderWidthRight:
@__BorderWidthBottom:
@__BorderWidthLeft:
@__BorderStyle:
@__BorderColor:
0;
@__BorderWidthTop;
@__BorderWidthTop;
@__BorderWidthTop;
none;
none;
@__BorderRadiusTopLeft:
@__BorderRadiusTopRight:
@__BorderRadiusBottomRight:
@__BorderRadiusBottomLeft:
0;
@__BorderRadiusTopLeft;
@__BorderRadiusTopLeft;
@__BorderRadiusTopLeft;
// @__GradientOrigin:
// @__GradientColorStart:
// @__GradientColorStop:
none;
none;
none;
@__BoxShadowType:
@__BoxShadowHorizontal:
@__BoxShadowVertical:
@__BoxShadowBlur:
@__BoxShadowSpread:
@__BoxShadowColor:
none;
0;
0;
0;
0;
none;
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

15. Skabelon
@moduleBackgroundColor;
@moduleBackgroundImage;
@moduleBackgroundRepeat;
@moduleBackgroundAttachment;
@moduleBackgroundPosition;
@topModulePaddingTop:
@topModulePaddingRight:
@topModulePaddingBottom:
@topModulePaddingLeft:
@modulePaddingTop;
@modulePaddingRight;
@modulePaddingTop;
@modulePaddingRight;
@topModuleMarginTop:
@topModuleMarginRight:
@topModuleMarginBottom:
@topModuleMarginLeft:
@moduleMarginTop;
@moduleMarginRight;
@moduleMarginTop;
@moduleMarginRight;
@topModuleBorderWidthTop:
@topModuleBorderWidthRight:
@topModuleBorderWidthBottom:
@topModuleBorderWidthLeft:
@topModuleBorderStyle:
@topModuleBorderColor:
@moduleBorderWidthTop;
@moduleBorderWidthTop;
@moduleBorderWidthTop;
@moduleBorderWidthTop;
@moduleBorderStyle;
@moduleBorderColor;
@topModuleBorderRadiusTopLeft:
@topModuleBorderRadiusTopRight:
@topModuleBorderRadiusBottomRight:
@topModuleBorderRadiusBottomLeft:
@moduleBorderRadiusTopLeft;
@moduleBorderRadiusTopLeft;
@moduleBorderRadiusTopLeft;
@moduleBorderRadiusTopLeft;
// @topModuleGradientOrigin:
// @topModuleGradientColorStart:
// @topModuleGradientColorStop:
@moduleGradientOrigin;
@moduleGradientColorStart;
@moduleGradientColorStop;
@topModuleBoxShadowType:
@topModuleBoxShadowHorizontal:
@topModuleBoxShadowVertical:
@topModuleBoxShadowBlur:
@topModuleBoxShadowSpread:
@topModuleBoxShadowColor:
- containers 2
@topModuleBackgroundColor:
@topModuleBackgroundImage:
@topModuleBackgroundRepeat:
@topModuleBackgroundAttachment:
@topModuleBackgroundPosition:
@moduleBoxShadowType;
@moduleBoxShadowHorizontal;
@moduleBoxShadowHorizonta;
@moduleBoxShadowBlur;
@moduleBoxShadowSpread;
@moduleBoxShadowColor;
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014

16. 6
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
top-3f
top-3e
top-3d
top-2
top-3c
footer
bottom
below
size-variables
3
top-3b
base-variables
top-3a
above
sidebar
mainmenu
slideshow
top
2
top-2f
top-2e
top-2d
top-1
top-2c
top-2b
top-2a
top-1f
top-1e
top-1d
5
top-1c
top-1b
topmenu
4
top-1a
1 Skabelon
- moduler
modules
top-3

17. 4
size-variables
3
Mindre arbejde med LESS og CSS • Louise Sverdrup • Joomla Day 2014
bottom-2-wrapper
base-variables
2
bottom-1-wrapper
1
below-2-wrapper
below-1-wrapper
above-2-wrapper
above-1-wrapper
right-wrapper
left-wrapper
top-3-wrapper
top-2-wrapper
top-1-wrapper
Skabelon – modulwrappers
module-wrappers