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)
|
||||
* [append-selector()](/reference/compass/helpers/selectors/#append-selector)
|
||||
* [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)
|
||||
* [e()](/reference/compass/helpers/math/#e)
|
||||
* [elements-of-type()](/reference/compass/helpers/display/)
|
||||
* [enumerate()](/reference/compass/helpers/selectors/#enumerate)
|
||||
* [font-files()](/reference/compass/helpers/font-files/)
|
||||
@ -35,14 +36,17 @@ layout: core
|
||||
* [image-url()](/reference/compass/helpers/urls/#image-url)
|
||||
* [inline-font-files()](/reference/compass/helpers/inline-data/#inline-font-files)
|
||||
* [inline-image()](/reference/compass/helpers/inline-data/#inline-image)
|
||||
* [log()](/reference/compass/helpers/math/#log)
|
||||
* [nest()](/reference/compass/helpers/selectors/#nest)
|
||||
* [pow()](/reference/compass/helpers/math/#pow)
|
||||
* [prefix()](/reference/compass/helpers/cross-browser/#prefix)
|
||||
* [prefixed()](/reference/compass/helpers/cross-browser/#prefixed)
|
||||
* [pi()](/reference/compass/helpers/trig/#pi)
|
||||
* [sin()](/reference/compass/helpers/trig/#sin)
|
||||
* [pi()](/reference/compass/helpers/math/#pi)
|
||||
* [sin()](/reference/compass/helpers/math/#sin)
|
||||
* [sqrt()](/reference/compass/helpers/math/#sqrt)
|
||||
* [stylesheet-url()](/reference/compass/helpers/urls/#stylesheet-url)
|
||||
* [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)
|
||||
* [-moz()](/reference/compass/helpers/cross-browser/#-moz)
|
||||
* [-ms()](/reference/compass/helpers/cross-browser/#-ms)
|
||||
|
@ -19,7 +19,7 @@ documented_functions:
|
||||
#opposite-position.helper
|
||||
%h3
|
||||
%a(href="#opposite-position")
|
||||
opposite-position($position)
|
||||
opposite-position(<span class="arg">$position</span>)
|
||||
.details
|
||||
:markdown
|
||||
Returns the opposition position for the position given. Examples:
|
||||
|
@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Compass Trigonometric Helpers
|
||||
crumb: Trig
|
||||
title: Compass Math Helpers
|
||||
crumb: Math
|
||||
framework: compass
|
||||
meta_description: Helper functions for working with angles.
|
||||
meta_description: Helper math functions.
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
@ -13,12 +13,15 @@ documented_functions:
|
||||
- "sin"
|
||||
- "cos"
|
||||
- "tan"
|
||||
- "e"
|
||||
- "log"
|
||||
- "sqrt"
|
||||
- "pow"
|
||||
---
|
||||
%h1 Compass Trig Helpers
|
||||
%h1 Compass Math Helpers
|
||||
|
||||
:markdown
|
||||
Trigonometric functions can help you manage complex calculations involving angles.
|
||||
Or maybe they can be used to create pretty pictures. Who knows?
|
||||
Sass math functions are sufficient for most cases, but in those moments of extreme geekiness these additional functions can really come in handy.
|
||||
|
||||
|
||||
#pi.helper
|
||||
@ -32,7 +35,7 @@ documented_functions:
|
||||
#sin.helper
|
||||
%h3
|
||||
%a(href="#sin")
|
||||
sin($number)
|
||||
sin(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
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
|
||||
%h3
|
||||
%a(href="#cos")
|
||||
cos($number)
|
||||
cos(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
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.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
and the number will be treated as radians.
|
||||
|
||||
#tan.helper
|
||||
%h3
|
||||
%a(href="#tan")
|
||||
tan($number)
|
||||
tan(<span class="arg">$number</span>)
|
||||
.details
|
||||
%p
|
||||
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.
|
||||
If the number is any other unit, the units will be passed thru to the result,
|
||||
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
|
||||
%h3
|
||||
%a(href="#nest")
|
||||
nest($selector1, $selector2, ...)
|
||||
nest(<span class="arg">$selector1</span>, <span class="arg">$selector2</span>, ...)
|
||||
.details
|
||||
%p
|
||||
Nest selectors as if they had been nested within a sass file.
|
||||
|
@ -25,7 +25,7 @@ documented_functions:
|
||||
#stylesheet-url.helper
|
||||
%h3
|
||||
%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
|
||||
%p
|
||||
Generates a path to an asset found relative to the project's css directory.
|
||||
@ -36,7 +36,7 @@ documented_functions:
|
||||
#font-url.helper
|
||||
%h3
|
||||
%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
|
||||
%p
|
||||
Generates a path to an asset found relative to the project's font directory.
|
||||
@ -47,7 +47,7 @@ documented_functions:
|
||||
#image-url.helper
|
||||
%h3
|
||||
%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
|
||||
%p
|
||||
Generates a path to an asset found relative to the project's images directory.
|
||||
|
@ -4,7 +4,7 @@ end
|
||||
%w(
|
||||
selectors enumerate urls display
|
||||
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|
|
||||
require "compass/sass_extensions/functions/#{func}"
|
||||
end
|
||||
@ -21,7 +21,7 @@ module Sass::Script::Functions
|
||||
include Compass::SassExtensions::Functions::Constants
|
||||
include Compass::SassExtensions::Functions::Lists
|
||||
include Compass::SassExtensions::Functions::Colors
|
||||
include Compass::SassExtensions::Functions::Trig
|
||||
include Compass::SassExtensions::Functions::Math
|
||||
include Compass::SassExtensions::Functions::Sprites
|
||||
include Compass::SassExtensions::Functions::CrossBrowserSupport
|
||||
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)")
|
||||
end
|
||||
|
||||
def test_trig_functions
|
||||
def test_math_functions
|
||||
assert_equal "0.841px", evaluate("sin(1px)")
|
||||
assert_equal "0.0", evaluate("sin(pi())")
|
||||
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("cos(pi())")
|
||||
assert_equal "-1", evaluate("cos(360deg)")
|
||||
assert_equal "1", evaluate("cos(360deg)")
|
||||
assert_equal "1", evaluate("cos(2*pi())")
|
||||
assert_equal "0.0", evaluate("cos(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 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
|
||||
|
||||
def test_blank
|
||||
|
Loading…
Reference in New Issue
Block a user