Skip to content

Instantly share code, notes, and snippets.

@tomraithel
Created November 16, 2012 08:29
Show Gist options
  • Save tomraithel/4085477 to your computer and use it in GitHub Desktop.
Save tomraithel/4085477 to your computer and use it in GitHub Desktop.
SASS: Create custom functions with a SASS plugin
# A sass plugin to calculate colums width based on a 100% width, the colspan and the spacing amount.
#
# Apply this plugin by passing it to the sass command as a require parameter:
# >> sass --require ts_sass_functions.rb
#
# @copyright triplesense
# @author Tom Raithel
# @version 1.0
# @package com.vorwerk.corporate
#
# last change: $Date: 2012-08-28 16:27:00 +0200 (Di, 28 Aug 2012) $
# last author: $Author: traithel $
# svn path: $URL: http://svn.dev.europe.triplesense.de/vorwerk/cd-relaunch/batch/ruby/lib/ts_sass_functions.rb $
# revision: $Rev: 6901 $
#
# $Id: ts_sass_functions.rb 6901 2012-08-28 14:27:00Z traithel $
require 'sass/plugin'
# Container module for extended functionality
module TS
def self.column_width(total_width, columns, total_columns, spacing)
total_no_spacing = total_width.minus(spacing.times(total_columns.minus(Sass::Script::Number.new(1))))
one_column = total_no_spacing.div(total_columns)
all_columns = one_column.times(columns)
all_columns.plus(spacing.times(columns.minus(Sass::Script::Number.new(1))))
end
end
# SASS proxy module
module Sass::Script::Functions
# Returns the width of a column based on:
# - total_width: The width of a 100% column
# - columns: The number columns
# - total_columns: The total number of columns in a row
# - spacing: Spacing between each column
#
# For example to get the width of a 33% column in a container width 100px width and a column
# spacing of 5px you would call this function this way:
# .col-33 {
# width: column_width(100px, 1, 3, 5px)
# }
def column_width(total_width, columns, total_columns, spacing)
assert_type total_width, :Number
assert_type columns, :Number
assert_type total_columns, :Number
assert_type spacing, :Number
TS::column_width(total_width, columns, total_columns, spacing)
end
declare :column_width, :args => [:total_width,:columns, :total_columns, :spacing]
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment