Forums

Johanroug

Hi I thought I would start a Tip discussion here.

First tip: fonts and ems

Don't use a calculator to find em values for your fontsizes. Let SASS do it.

EX: body { font-size: 16px }

Now I want a font-size of 24px for my h1 tag, but in ems.

h1{ font-size: ( 24em/16) }

I also want a line-height of 30px, but in ems

h1{ 
  font-size: ( 24em/16);
  line-height: (30em/24) ;

}

EASY

AndyHowells

Hold on there buddy. What if the default font-size or container font-size is 12px or whatever, you may have to change it later etc. Maybe change the body font size to a variable. So $bodyfontsize. Then in your sums, 30em/$bodyfontsize;

I came across a similar problem before and instead have a mixin for creating REM's instead.

Basically if you set the html to have a default of 10px for the fontsize it makes it super easy to use. Example;

@mixin font-size($sizeValue){
  font-size: $sizeValue + px;
  font-size: ($sizeValue / 10) + rem;
}

So in your styles do;

p {@include font-size(16);}

Yay, font-size output in px followed by REM's for supporting browsers.

Johanroug

tsfd

Johanroug

nice with some feedback. Here's another tip:

@mixin media($point) {
@if $point == desktop {
  @media screen and (min-width: 973px) { @content; }
}
@if $point == tabletH {
  @media screen and (max-width: 972px)  { @content; }
}
@if $point == tabletV {
  @media screen and (max-width: 700px)  { @content; }
}
@else if $point == mobile {
  @media screen and (max-width: 550px)  { @content; }
}}



.example{
@include media(tabletV){
  background: red;
}}

kgscott284

Some people may not have use for this, but I keep it handy in my custom mixin library...


@mixin box-fix {
    * {
        box-sizing: border-box;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box;  
    }
}

A great resource as well: http://bourbon.io/

AndyHowells

I made a box-shadow mixin before starting to use compass;


@mixin box-shadow($boxShadowHoriz, $boxShadowVert, $boxShadowBlur, $boxShadowSpread, $boxShadowColor) {
  -moz-box-shadow:    $boxShadowHoriz $boxShadowVert $boxShadowBlur $boxShadowSpread $boxShadowColor;
  -webkit-box-shadow: $boxShadowHoriz $boxShadowVert $boxShadowBlur $boxShadowSpread $boxShadowColor;
  box-shadow:         $boxShadowHoriz $boxShadowVert $boxShadowBlur $boxShadowSpread $boxShadowColor;
}

AndyHowells

Also another for transitions;


@mixin transition($transition-property, $transition-time, $method) {
  -webkit-transition: $transition-property $transition-time $method;
  -moz-transition: $transition-property $transition-time $method;
  -ms-transition: $transition-property $transition-time $method;
  -o-transition: $transition-property $transition-time $method;
  transition: $transition-property $transition-time $method;
}

TheDoc

@andy_unleash - I used to do the box-shadow like that, but it doesn't work if you want to use multiple values for more than one drop shadow, or perhaps a drop and an inset. Now I do this:

  @mixin box-shadow ($value...) {
      -webkit-box-shadow: $value;
           -moz-box-shadow: $value;
                       box-shadow: $value;
  }

The ... after the $value means that it will just tack on anything else that you include, pretty handy.

I've also just recently modified an opacity one for IE8 support:

  @mixin opacity ($value) {
      opacity: $value;
      -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$value*100})';
  }

I would use it like this:

  @include opacity(0.5);

And using the fancy math, IE would get its full value of 50.

The other one that I use all the time is for background-size: cover;:

  @mixin bgcover() {
      -webkit-background-size: cover;
           -moz-background-size: cover;
                 -o-background-size: cover;
                       background-size: cover;

      background-repeat: no-repeat;
      background-position: center center;
  }

  .bgcover {
      @include bgcover;
  }

What I like about this one is that on any element that I need the cover on, I can just add a class of .bgcover to it, super handy.

treehouse : what would you like to learn today?

Forums

SASS tips