Merge pull request #758 from silvenon/stable

Add more math functions and unite them with Trig
This commit is contained in:
Chris Eppstein 2012-03-11 18:12:12 -07:00
commit 76f341b3dc
9 changed files with 116 additions and 50 deletions

View File

@ -23,8 +23,9 @@ layout: core
* [adjust-saturation()](/reference/compass/helpers/colors/#adjust-saturation) * [adjust-saturation()](/reference/compass/helpers/colors/#adjust-saturation)
* [append-selector()](/reference/compass/helpers/selectors/#append-selector) * [append-selector()](/reference/compass/helpers/selectors/#append-selector)
* [color-stops()](/reference/compass/helpers/color-stops/) * [color-stops()](/reference/compass/helpers/color-stops/)
* [cos()](/reference/compass/helpers/trig/#cos) * [cos()](/reference/compass/helpers/math/#cos)
* [css2-fallback()](/reference/compass/helpers/cross-browser/#css2-fallback) * [css2-fallback()](/reference/compass/helpers/cross-browser/#css2-fallback)
* [e()](/reference/compass/helpers/math/#e)
* [elements-of-type()](/reference/compass/helpers/display/) * [elements-of-type()](/reference/compass/helpers/display/)
* [enumerate()](/reference/compass/helpers/selectors/#enumerate) * [enumerate()](/reference/compass/helpers/selectors/#enumerate)
* [font-files()](/reference/compass/helpers/font-files/) * [font-files()](/reference/compass/helpers/font-files/)
@ -35,14 +36,17 @@ layout: core
* [image-url()](/reference/compass/helpers/urls/#image-url) * [image-url()](/reference/compass/helpers/urls/#image-url)
* [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files) * [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files)
* [inline-image()](/reference/compass/helpers/inline-data/#inline-image) * [inline-image()](/reference/compass/helpers/inline-data/#inline-image)
* [log()](/reference/compass/helpers/math/#log)
* [nest()](/reference/compass/helpers/selectors/#nest) * [nest()](/reference/compass/helpers/selectors/#nest)
* [pow()](/reference/compass/helpers/math/#pow)
* [prefix()](/reference/compass/helpers/cross-browser/#prefix) * [prefix()](/reference/compass/helpers/cross-browser/#prefix)
* [prefixed()](/reference/compass/helpers/cross-browser/#prefixed) * [prefixed()](/reference/compass/helpers/cross-browser/#prefixed)
* [pi()](/reference/compass/helpers/trig/#pi) * [pi()](/reference/compass/helpers/math/#pi)
* [sin()](/reference/compass/helpers/trig/#sin) * [sin()](/reference/compass/helpers/math/#sin)
* [sqrt()](/reference/compass/helpers/math/#sqrt)
* [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url) * [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
* [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness) * [scale-lightness()](/reference/compass/helpers/colors/#scale-lightness)
* [tan()](/reference/compass/helpers/trig/#tan) * [tan()](/reference/compass/helpers/math/#tan)
* [-css2()](/reference/compass/helpers/cross-browser/#-css2) * [-css2()](/reference/compass/helpers/cross-browser/#-css2)
* [-moz()](/reference/compass/helpers/cross-browser/#-moz) * [-moz()](/reference/compass/helpers/cross-browser/#-moz)
* [-ms()](/reference/compass/helpers/cross-browser/#-ms) * [-ms()](/reference/compass/helpers/cross-browser/#-ms)

View File

@ -19,7 +19,7 @@ documented_functions:
#opposite-position.helper #opposite-position.helper
%h3 %h3
%a(href="#opposite-position") %a(href="#opposite-position")
opposite-position($position) opposite-position(<span class="arg">$position</span>)
.details .details
:markdown :markdown
Returns the opposition position for the position given. Examples: Returns the opposition position for the position given. Examples:

View File

@ -1,8 +1,8 @@
--- ---
title: Compass Trigonometric Helpers title: Compass Math Helpers
crumb: Trig crumb: Math
framework: compass framework: compass
meta_description: Helper functions for working with angles. meta_description: Helper math functions.
layout: core layout: core
classnames: classnames:
- reference - reference
@ -13,12 +13,15 @@ documented_functions:
- "sin" - "sin"
- "cos" - "cos"
- "tan" - "tan"
- "e"
- "log"
- "sqrt"
- "pow"
--- ---
%h1 Compass Trig Helpers %h1 Compass Math Helpers
:markdown :markdown
Trigonometric functions can help you manage complex calculations involving angles. Sass math functions are sufficient for most cases, but in those moments of extreme geekiness these additional functions can really come in handy.
Or maybe they can be used to create pretty pictures. Who knows?
#pi.helper #pi.helper
@ -32,7 +35,7 @@ documented_functions:
#sin.helper #sin.helper
%h3 %h3
%a(href="#sin") %a(href="#sin")
sin($number) sin(<span class="arg">$number</span>)
.details .details
%p %p
Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code> Takes the sine of a number. If the number is unitless or has a unit of <code>deg</code>
@ -43,20 +46,53 @@ documented_functions:
#cos.helper #cos.helper
%h3 %h3
%a(href="#cos") %a(href="#cos")
cos($number) cos(<span class="arg">$number</span>)
.details .details
%p %p
Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code> Takes the cosine of a number. If the number is unitless or has a unit of <code>deg</code>
then it will return a unitless result. Degrees will first be converted to radians. then it will return a unitless result. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result, If the number is any other unit, the units will be passed thru to the result,
and the number will be treated as radians. and the number will be treated as radians.
#tan.helper #tan.helper
%h3 %h3
%a(href="#tan") %a(href="#tan")
tan($number) tan(<span class="arg">$number</span>)
.details .details
%p %p
Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code> Takes the tangent of a number. If the number is unitless or has a unit of <code>deg</code>
then it will return a unitless result. Degrees will first be converted to radians. then it will return a unitless result. Degrees will first be converted to radians.
If the number is any other unit, the units will be passed thru to the result, If the number is any other unit, the units will be passed thru to the result,
and the number will be treated as radians. and the number will be treated as radians.
#e.helper
%h3
%a(href="#e")
e()
.details
%p
Returns the value of <a href="http://en.wikipedia.org/wiki/E_(mathematical_constant)">e</a>.
#log.helper
%h3
%a(href="#log")
log(<span class="arg">$number</span>, <span class="arg" data-default-value="e" title="Defaults to: e">$base</span>)
.details
%p
Calculates the logarithm of a number to a base. Base defaults to <code>e</code>.
#sqrt.helper
%h3
%a(href="#sqrt")
sqrt(<span class="arg">$number</span>)
.details
%p
Calculates the square root of a number.
#pow.helper
%h3
%a(href="#pow")
pow(<span class="arg">$number</span>, <span class="arg">$exponent</span>)
.details
%p
Calculates the value of a number raised to the power of an exponent.

View File

@ -20,7 +20,7 @@ documented_functions:
#nest.helper #nest.helper
%h3 %h3
%a(href="#nest") %a(href="#nest")
nest($selector1, $selector2, ...) nest(<span class="arg">$selector1</span>, <span class="arg">$selector2</span>, ...)
.details .details
%p %p
Nest selectors as if they had been nested within a sass file. Nest selectors as if they had been nested within a sass file.

View File

@ -25,7 +25,7 @@ documented_functions:
#stylesheet-url.helper #stylesheet-url.helper
%h3 %h3
%a(href="#stylesheet-url") %a(href="#stylesheet-url")
stylesheet-url($path, $only-path: false) stylesheet-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>)
.details .details
%p %p
Generates a path to an asset found relative to the project's css directory. Generates a path to an asset found relative to the project's css directory.
@ -36,7 +36,7 @@ documented_functions:
#font-url.helper #font-url.helper
%h3 %h3
%a(href="#font-url") %a(href="#font-url")
font-url($path, $only-path: false) font-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>)
.details .details
%p %p
Generates a path to an asset found relative to the project's font directory. Generates a path to an asset found relative to the project's font directory.
@ -47,7 +47,7 @@ documented_functions:
#image-url.helper #image-url.helper
%h3 %h3
%a(href="#image-url") %a(href="#image-url")
image-url($path, $only-path: false, $cache-buster: true) image-url(<span class="arg">$path</span>, <span class="arg" data-default-value="false" title="Defaults to: false">$only-path</span>, <span class="arg" data-default-value="true" title="Defaults to: true">$cache-buster</span>)
.details .details
%p %p
Generates a path to an asset found relative to the project's images directory. Generates a path to an asset found relative to the project's images directory.

View File

@ -4,7 +4,7 @@ end
%w( %w(
selectors enumerate urls display selectors enumerate urls display
inline_image image_size constants gradient_support inline_image image_size constants gradient_support
font_files lists colors trig sprites cross_browser_support font_files lists colors math sprites cross_browser_support
).each do |func| ).each do |func|
require "compass/sass_extensions/functions/#{func}" require "compass/sass_extensions/functions/#{func}"
end end
@ -21,7 +21,7 @@ module Sass::Script::Functions
include Compass::SassExtensions::Functions::Constants include Compass::SassExtensions::Functions::Constants
include Compass::SassExtensions::Functions::Lists include Compass::SassExtensions::Functions::Lists
include Compass::SassExtensions::Functions::Colors include Compass::SassExtensions::Functions::Colors
include Compass::SassExtensions::Functions::Trig include Compass::SassExtensions::Functions::Math
include Compass::SassExtensions::Functions::Sprites include Compass::SassExtensions::Functions::Sprites
include Compass::SassExtensions::Functions::CrossBrowserSupport include Compass::SassExtensions::Functions::CrossBrowserSupport
end end

View File

@ -0,0 +1,47 @@
module Compass::SassExtensions::Functions::Math
def pi()
Sass::Script::Number.new(Math::PI)
end
def sin(number)
trig(:sin, number)
end
def cos(number)
trig(:cos, number)
end
def tan(number)
trig(:tan, number)
end
def e()
Sass::Script::Number.new(Math::E)
end
def log(number, base = Sass::Script::Number.new(Math::E))
assert_type number, :Number
assert_type base, :Number
Sass::Script::Number.new(Math.log(number.value, base.value), number.numerator_units, number.denominator_units)
end
def sqrt(number)
numeric_transformation(number) { |n| Math.sqrt(n) }
end
def pow(number, exponent)
assert_type number, :Number
assert_type exponent, :Number
Sass::Script::Number.new(number.value**exponent.value, number.numerator_units, number.denominator_units)
end
private
def trig(operation, number)
if number.numerator_units == ["deg"] && number.denominator_units == []
Sass::Script::Number.new(Math.send(operation, Math::PI * number.value / 180))
else
Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
end
end
end

View File

@ -1,27 +0,0 @@
module Compass::SassExtensions::Functions::Trig
def pi()
Sass::Script::Number.new(Math::PI)
end
def sin(number)
trig(:sin, number)
end
def cos(number)
trig(:cos, number)
end
def tan(number)
trig(:tan, number)
end
private
def trig(operation, number)
if number.numerator_units == ["deg"] && number.denominator_units == []
Sass::Script::Number.new(Math.send(operation, Math::PI * number.value / 180))
else
Sass::Script::Number.new(Math.send(operation, number.value), number.numerator_units, number.denominator_units)
end
end
end

View File

@ -64,14 +64,14 @@ class SassExtensionsTest < Test::Unit::TestCase
assert_equal "yes", evaluate("if(true, yes, no)") assert_equal "yes", evaluate("if(true, yes, no)")
end end
def test_trig_functions def test_math_functions
assert_equal "0.841px", evaluate("sin(1px)") assert_equal "0.841px", evaluate("sin(1px)")
assert_equal "0.0", evaluate("sin(pi())") assert_equal "0.0", evaluate("sin(pi())")
assert_equal "1", evaluate("sin(pi() / 2)") assert_equal "1", evaluate("sin(pi() / 2)")
assert_equal "1", evaluate("sin(180deg)") assert_equal "0.0", evaluate("sin(180deg)")
assert_equal "-1", evaluate("sin(3* pi() / 2)") assert_equal "-1", evaluate("sin(3* pi() / 2)")
assert_equal "-1", evaluate("cos(pi())") assert_equal "-1", evaluate("cos(pi())")
assert_equal "-1", evaluate("cos(360deg)") assert_equal "1", evaluate("cos(360deg)")
assert_equal "1", evaluate("cos(2*pi())") assert_equal "1", evaluate("cos(2*pi())")
assert_equal "0.0", evaluate("cos(pi() / 2)") assert_equal "0.0", evaluate("cos(pi() / 2)")
assert_equal "0.0", evaluate("cos(3* pi() / 2)") assert_equal "0.0", evaluate("cos(3* pi() / 2)")
@ -79,6 +79,12 @@ class SassExtensionsTest < Test::Unit::TestCase
assert_equal "0.0", evaluate("tan(360deg)") assert_equal "0.0", evaluate("tan(360deg)")
assert evaluate("tan(pi()/2 - 0.0001)").to_f > 1000, evaluate("tan(pi()/2 - 0.0001)") assert evaluate("tan(pi()/2 - 0.0001)").to_f > 1000, evaluate("tan(pi()/2 - 0.0001)")
assert evaluate("tan(pi()/2 + 0.0001)").to_f < -1000, evaluate("tan(pi()/2 - 0.0001)") assert evaluate("tan(pi()/2 + 0.0001)").to_f < -1000, evaluate("tan(pi()/2 - 0.0001)")
assert_equal "0.693px", evaluate("log(2px)")
assert_equal "0", evaluate("log(1)")
assert_equal "1", evaluate("log(e())")
assert_equal "5px", evaluate("sqrt(25px)")
assert_equal "25px", evaluate("pow(5px, 2)")
assert_equal "79.432px", evaluate("pow(5px, e())")
end end
def test_blank def test_blank