Merge pull request #758 from silvenon/stable
Add more math functions and unite them with Trig
This commit is contained in:
commit
76f341b3dc
@ -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)
|
||||||
|
@ -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:
|
||||||
|
@ -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.
|
@ -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.
|
||||||
|
@ -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.
|
||||||
|
@ -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
|
||||||
|
47
lib/compass/sass_extensions/functions/math.rb
Normal file
47
lib/compass/sass_extensions/functions/math.rb
Normal 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
|
@ -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
|
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user