Sass Mixin Examples

general.sass

// Clearing floats without extra markup
// Based on How To Clear Floats Without Structural Markup by PiE
// [http://www.positioniseverything.net/easyclearing.html]
// From the official sass documentation.
=clearfix
  display: inline-block
  &:after
    content: "."
    display: block
    height: 0
    clear: both
    visibility: hidden
  * html &
    height: 1px

// Tag cloud styles
=tag-cloud
  .smallest
    :font-size 0.5em
  .smaller
    :font-size 0.66em
  .small
    :font-size 0.75em
  .normal
    :font-size 1.0em
  .large
    :font-size 1.33em
    :font-style normal
  .larger
    :font-size 1.5em
    :font-weight normal
  .largest
    :font-size 2em

links.sass

// a link that only has an underline when you hover over it
=hover-link
  :text-decoration none
  &:hover
    :text-decoration underline

// A link that looks and acts like normal text
=unstyled-link
  :color inherit
  :text-decoration none
  :cursor text

lists.sass

// A list(ol,ul) that is layed out such that the elements in the list appear left to right
// This is not an inline list.
@import general/clearfix
=horizontal-list
  +clearfix
  :list-style-type none
  :padding-left 0px
  :margin 0px
  li
    :float left
    :padding
      :left 4px
      :right 4px
    &.first
      :padding-left 0px
    &.last
      :padding-right 0px

// makes a list appear to be inline.
// use of this recipe is not recommended at this time due to browser support issues.
//
// use of :content and :after is not fully supported in all browsers.
// See http://www.quirksmode.org/css/contents.html#t15 for the support matrix
//
// :last-child is not fully supported
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
=inline-list
  :list-style-type none
  :margin 0px
  :padding 0px
  :display inline
  li
    :margin 0px
    :padding 0px
    :display inline

=comma-delimited-list
  +inline-list
  li
    &:after
      :content ", "
    &:last-child, &.last
      &:after
        :content ""

// Turn off the bullets for a list (ul, ol)
=no-bullets
  :list-style-type none
  :margin-left 0px

// Make a list(ul) have an image bullet
// assumes an icon with dimensions of 5x7 pixels
=pretty-bullets
  :margin-left 0
  li
    :padding-left 14px
    :background url(/images/bullet.gif) no-repeat 4px 6px
    :list-style-type none

tables.sass

!dark_intersection= #111
!even_row= #e3e1d7
!odd_row= #dddae8
 
/*
  // Styles for a table structured like so
  %table.alternating{:cellpadding => 0, :cellspacing => 0, :border => 0}
    %thead
      %tr
        %td  
        %th.even First Column
        %th.odd Second Column
        %th.even Third Column
    %tbody
      - for row in rows
        %tr{:class => cycle('even', 'odd')}
          %th= row[0]
          %td.even= row[1]
          %td.odd= row[2]
          %td.even= row[3]
 
=alternating-rows-and-columns
  td,
  th
    :padding 2px
    &.numeric
      :text-align right
  tbody
    th
      :text-align center
  thead
    :font-size .9em
    th.even
      :background-color= #fff - !dark_intersection
  tr.odd
    :background-color= !odd_row
    td.even
      :background-color= !odd_row - !dark_intersection
  tr.even
    :background-color= !even_row
    td.even
      :background-color= !even_row - !dark_intersection