Sass/SCSS Format

Description

The PHOS Framework utilizes Sass (or SCSS) as a pre-processing stylesheet language to make the styling of a website fast and efficient. Sass is similar to Jade in the sense that it relies on nesting to structure the stylesheet. For example, standard CSS might look like this:

#page{
    display: block;
}
#page h1{
    font-size: 24px;
    font-weight: 700;
}
#page h1:hover{
    color: color(one);
    font-size: 28px;
}

Rather than being continually repetitive, Sass simplifies the structure like this:

#page{
    display: block;
    
    h1{
        font-size: 24px;
        font-weight: 700;

        &:hover{
            color: color(one);
            font-size: 28px;
        }
    }
}

This is a cleaner, less repetitive way of structuring the styling. Note the :hover line. Since Sass is reliant on nesting, elements like :hover, :focus, :before, :after, etc. require an ampersand to start with.

It’s a matter of personal coding preference, but typically I like to keep all the CSS element declarations alphabetical, for readability sake:

background: transparentize(white, 0.92);
border: none;
color: white;
display: inline-block;
float: left;
font-size: 16px;
padding: 8px;
width: calc(100% - 63px);

Using Susy

Along with Sass, we utilize a library called Susy for making a site responsive. Susy is very simple and easy to implement, and allows you to make a customized grid layout in no time.

#page{
    
    main{
        @include container();
    
        section{
            @include span(2 of 3);
        }
        aside{
            @include span(1 of 3 last);
        }
    }
}

The primary components of Susy are the container() and the span();
A container(); can have any width entered (it will default to 1100px width). The container is the “holder” for the span();. To customize the container width, simply add a dimension within the parenthesis like this:

@include container(1400px);

A span(); is the floated section inside the container();. The arguments within the span parenthesis are the width ratio. In the above example, “section” spans 2 of 3 columns, while “aside” only spans 1 of 3. “Aside” also has the “last” tag attached, meaning it is the last element in the row, and will therefor have no right margin added to it (allowing it to line up nicely with “section”).

The beauty of Susy is that it is all based on math. Essentially it is a build-it-as-you-want-it column structure. Any ratio entered in the span declaration can be accounted for. If you wanted to have 14 columns across in a container, simply add this to the element:

@include span(1 of 14);

Removing Span Margins

Occasionally, there may be situations when you want to remove the margin between spans.

#page{ 
    main{ 
        @include container(); 
        section{ 
             @include span(2 of 3 0); 
        } 
        aside{ 
            @include span(1 of 3 0 last); 
        } 
    } 
}

The other number added in after the “X of X” declaration specifies the margin width between spans. The margin width is based on the column width from 0 to 1. Think of it like a percentage – 0 means no margin, 1 means the equivalence of a full span width, 0.5 would be a margin equal to half the width of a span.

To declare breakpoints, do this:

aside{
    @include span(1 of 3 last);

    @include breakpoint(769px down){
        @include span(1 of 1);
    }
}

Breakpoints can be called with @include breakpoint(XXpx down){}. In the above example, the “aside” element is 1 column of 3, until the screen size drops below 769px width, which will bump the column out to full-width (1 column of 1 column).

There are plenty of other handy things that Susy can do, but the examples above will cover 99% of the responsive needs.

MENU