Главная > CSS > less if else

less if else

Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.

@font_gotham:true;
@font_opensans:false;
.set_fonts() when (@font_gotham=true){
	@import '../css/GothamPro.css';
	@font_base:GothamProRegular;
	@font_base_it:GothamProItalic;
	@font_300:GothamProLight;
	@font_300_it:GothamProLightItalic;
	@font_500:GothamProMedium;
	@font_500_it:GothamProMediumItalic;
	@font_700:GothamProBold;
	@font_700_it:GothamProBoldItalic;
	@font_900:GothamProBlack;
	@font_900_it:GothamProBlackItalic;
	.font_it{
		font-family:@font_base_it;
	}
	.font_300{
		font-family:@font_300;
	}
	.font_300_it{
		font-family:@font_300_it;
	}
	.font_500{
		font-family:@font_500;
	}
	.font_500_it{
		font-family:@font_500_it;
	}
	.font_700{
		font-family:@font_700;
	}
	.font_700_it{
		font-family:@font_700_it;
	}
	.font_900{
		font-family:@font_700;
	}
	.font_900_it{
		font-family:@font_900_it;
	}
};
.set_fonts() when (@font_opensans=true){
	@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
	@font_base:'Open Sans',sans-serif;
	.font_it{
		font-style:italic;
	}
	.font_300{
		font-weight:300;
	}
	.font_300_it{
		font-weight:300;
		font-style:italic;
	}
	.font_500{
		font-weight:600;
	}
	.font_500_it{
		font-weight:600;
		font-style:italic;
	}
	.font_700{
		font-weight:700;
	}
	.font_700_it{
		font-weight:700;
		font-style:italic;
	}
	.font_900{
		font-weight:800;
	}
	.font_900_it{
		font-weight:800;
		font-style:italic;
	}
};
.set_fonts();

Использование:

body{
	font-family:@font_base;
}
.ex{
	.font_500();
	font-size:12px;
	& when (@font_opensans=true){
		font-size:14px;
	}
}
Categories: CSS Tags:
  1. Пока что нет комментариев.
Похожие публикации