Created
November 16, 2012 08:29
-
-
Save tomraithel/4085477 to your computer and use it in GitHub Desktop.
SASS: Create custom functions with a SASS plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 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