Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS SASS tips

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #40573
    Johanroug
    Member

    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

    #113178
    Johanroug
    Member

    tsfd

    #113179
    Johanroug
    Member

    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;
    }}

    #113183
    kgscott284
    Participant

    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/

    #113197
    TheDoc
    Member

    @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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.