[ mixin ] rhythm : Margins and Padding

Using our 42px <h1> example from earlier we might do something like:

h1 {
  @include rhythm(3, 1, 0, 2, 42px);
}

Rhythm syntax

rhythm($lines, $font-size, $offset)

Which compiles to:

h1 {
  margin-top: 1.714285714em;    // 3 units or 24*3 = 72px
  padding-top: .571428571em;    // 1 unit or 24px
  padding-bottom: 0;            // 0 units 0px
  margin-bottom: 1.142857143em; // 2 units or 24*2 = 48px
}

Functions are similar but return values that are used within a css rule. Let’s say I just want to set all 4 margins on my <h1> with a combination of rhythm units and standard CSS notation.

h1 {
  margin: 0 auto rhythm(3, 42px);
}

Which compiles to

h1 {
  margin: 0 auto 1.714285714em;
}

ref : https://atendesigngroup.com/blog/vertical-rhythm-compass

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s