Skip to content

Instantly share code, notes, and snippets.

@alycda
Last active December 19, 2015 18:18
Show Gist options
  • Select an option

  • Save alycda/5997272 to your computer and use it in GitHub Desktop.

Select an option

Save alycda/5997272 to your computer and use it in GitHub Desktop.
LESS: Command Line Usage #sublime
@goldenRatio: 1.6;
@media screen and (min-width: 1025px) { @baseFontSize: 4.7px; @baseHeight: 7.5px; .font-sizes(@baseFontSize; @goldenRatio); .font-line-height(@baseHeight, @goldenRatio); }
@media screen and (max-width: 1024px) and (min-width: 701px) { @baseFontSize: 4.1px; @baseHeight: 6px; .font-sizes(@baseFontSize; @goldenRatio); .font-line-height(@baseHeight, @goldenRatio); }
@media screen and (max-width: 700px){ @baseFontSize: 3.4px; @baseHeight: 4.1px; .font-sizes(@baseFontSize; @goldenRatio); .font-line-height(@baseHeight, @goldenRatio); }
.font-sizes(@baseFontSize; @goldenRatio) { h1 { font-size: (@baseFontSize * (pow(@goldenRatio, 6))); } h2 { font-size: (@baseFontSize * (pow(@goldenRatio, 5))); } h3 { font-size: (@baseFontSize * (pow(@goldenRatio, 4))); } h4 { font-size: (@baseFontSize * (pow(@goldenRatio, 3))); } h5 { font-size: (@baseFontSize * (pow(@goldenRatio, 2))); } h6 { font-size: (@baseFontSize * (pow(@goldenRatio, 1))); } p { font-size: (@baseFontSize * (pow(@goldenRatio, 2))); } li { font-size: (@baseFontSize * (pow(@goldenRatio, 2))); } }
.font-line-height(@baseHeight; @goldenRatio) { h1 { line-height: (@baseHeight * (pow(@goldenRatio, 6))); } h2 { line-height: (@baseHeight * (pow(@goldenRatio, 5))); } h3 { line-height: (@baseHeight * (pow(@goldenRatio, 4))); } h4 { line-height: (@baseHeight * (pow(@goldenRatio, 3))); } h5 { line-height: (@baseHeight * (pow(@goldenRatio, 2))); } h6 { line-height: (@baseHeight * (pow(@goldenRatio, 1))); } p { line-height: (@baseHeight * (pow(@goldenRatio, 2))); } li { line-height: (@baseHeight * (pow(@goldenRatio, 2))); } }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment