[Sass] Better documentation of the available sass functions.

This commit is contained in:
Chris Eppstein 2009-01-24 22:28:10 -08:00
parent ddd4a99da3
commit e93735eb92
2 changed files with 29 additions and 2 deletions

View File

@ -481,7 +481,7 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
# #
# === Functions # === Functions
# #
# SassScript defines some useful functions (see Sass::Script::Functions) # SassScript defines some useful functions
# that are called using the normal CSS function syntax: # that are called using the normal CSS function syntax:
# #
# p # p
@ -492,6 +492,11 @@ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
# #main { # #main {
# color: #ff0000; } # color: #ff0000; }
# #
# The following functions are provided: +hsl+, +hue+, +percentage+, +round+, +ceil+, +floor+, and +abs+.
# You can define additional functions in ruby.
#
# See Sass::Script::Functions for more information.
#
# === Interpolation # === Interpolation
# #
# You can also use SassScript variables in selectors # You can also use SassScript variables in selectors

View File

@ -18,6 +18,28 @@ module Sass::Script
# at a somewhat indeterminate time # at a somewhat indeterminate time
# and then left as static CSS files. # and then left as static CSS files.
# Any dynamic CSS should be left in <style> tags in the HTML. # Any dynamic CSS should be left in <style> tags in the HTML.
#
# The following functions are provided:
# * +hsl+ - converts an <tt>hsl(hue, saturation, lightness)</tt> triplet into a color.
#
# The +hue+ value must be between 0 and 255 inclusive,
# saturation and lightness must be between <tt>0%</tt> to <tt>100%</tt> inclusive.
# The percent sign is optional.
# * +percentage+ - converts a unitless number to a css percentage.
#
# Example: <tt>percentage(14px / 7px) => 200%</tt>
# * +round+ - Rounds a number to the nearest whole number.
#
# Example: <tt>round(10.4px) => 10px</tt>
# * +ceil+ - Rounds a number up to the nearest whole number.
#
# Example: <tt>ceil(10.4px) => 11px</tt>
# * +floor+ - Rounds a number down to the nearest whole number.
#
# Example: <tt>floor(10.6px) => 10px</tt>
# * +abs+ - Returns the absolute value of a number.
#
# Example: <tt>abs(-10px) => 10px</tt>
module Functions module Functions
instance_methods.each { |m| undef_method m unless m.to_s =~ /^__/ } instance_methods.each { |m| undef_method m unless m.to_s =~ /^__/ }
extend self extend self
@ -47,7 +69,7 @@ module Sass::Script
# Converts a unitless number into a percent and multiplies the number by 100. # Converts a unitless number into a percent and multiplies the number by 100.
# E.g. percentage(100px / 50px) => 200% # E.g. percentage(100px / 50px) => 200%
# Some may find this more natural than: 1% * 100px / 50px # Some may find this more natural than: 100% * 100px / 50px
def percentage(value) def percentage(value)
unless value.is_a?(Sass::Script::Number) && value.unitless? unless value.is_a?(Sass::Script::Number) && value.unitless?
raise ArgumentError.new("#{value} is not a unitless number") raise ArgumentError.new("#{value} is not a unitless number")