Less generator mixin by type

index.html

.container
	p.myNormalSizeElement= "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt veniam quam rem atque tempore, quibusdam qui, et deserunt adipisci eos reprehenderit temporibus repellendus incidunt nobis esse. Minima quas eveniet fuga."
	p.myMediumSizeElement= "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt veniam quam rem atque tempore, quibusdam qui, et deserunt adipisci eos reprehenderit temporibus repellendus incidunt nobis esse. Minima quas eveniet fuga."
	p.myBigSizeElement= "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt veniam quam rem atque tempore, quibusdam qui, et deserunt adipisci eos reprehenderit temporibus repellendus incidunt nobis esse. Minima quas eveniet fuga."

Less generator mixin by type.markdown

Less generator mixin by type

Define a generator mixin which use some attributes differents by type. You can use the mixins passing the type you want. Then the mixins generate the attributes for the received type. This simulate a settings object.

A Pen by Luca Colonnello on CodePen.

License.

style.css

.text(@type: 'default') {
// define default type
@sizedefault: 15px;
@shadowdefault: 0px 1px 1px #fff;

// define medium type
@sizemedium: 18px;
@shadowmedium: 0px 1px 1px #fff;

// define big type
@sizebig: 24px;
@shadowbig: 0px 1px 1px #fff;

// create usage variables
@size: ~"size@{type}";
@shadow: ~"shadow@{type}";

font-size: @@size;
text-shadow: @@shadow; }

.container {
margin: 20px 10px;
padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 5px;
background: #f9f9f9;
box-shadow: 0px 1px 1px #ddd; }

.myNormalSizeElement {
.text; }

.myMediumSizeElement {
.text('medium'); }

.myBigSizeElement {
.text('big'); }