LESS

Less - Links

CSS-TRICKS.com - Useful CSS3 LESS Mixins.

Hongkiat.com - LESS CSS - Beginner's Guide.

Crunch! - The LESS editor ....

WinLess.

Less - 4 voorbeelden

layout class="less_one"

layout class="less_two"

layout class="less_three"

layout class="less_four"

Opmerking. De layout in de vier voorbeelden hierboven is in LESS.
De LESS-code vind je hieronder.

Less - De 4 voorbeelden in stylesheet

Inhoud van style.less en ondersteund door elements.less:

@import "elements.less";

@primary_background_color: darkblue;
@secondary_background_color: darkred;
@tertiary_background_color: purple;
@fourth_background_color: black;
@fifth_background_color: honeydew;

@primary_color: silver;
@secondary_color: gold;
@tertiary_color: white;
@fourth_color: pink;
@fifth_color: indigo;

@margins: 15px 35px;

@borders: 4px solid cyan;

.less_one {
	background-color: @primary_background_color !important;
	color: @primary_color !important;
}

.less_two {
	background-color: @secondary_background_color !important;
	color: @secondary_color !important;
}

.less_three {
	background-color: @tertiary_background_color !important;
	border: 4px solid @fourth_color !important;
	color: @tertiary_color !important;
}

.less_four {
	background-color: @fourth_background_color !important;
	border: 4px solid @secondary_color !important;
	color: @fourth_color !important;
}

pre {
	background-color: @fifth_background_color !important;
	border: @borders;
	color: @fifth_color !important;
	margin: @margins !important;
}

Joost De WebMaker
2002-2024 © Joost van Meeteren

Laatste update website: vrijdag 22 november 2024

Deze website past cookies toe voor optimaal gebruik van dit platform | bron | Akkoord