Module: Sass::Script::Functions

Defined in:
lib/sass/script/functions.rb

Overview

Methods in this module are accessible from the SassScript context. For example, you can write

!color = hsl(120deg, 100%, 50%)

and it will call #hsl.

The following functions are provided:

RGB Functions

#rgb : Converts an rgb(red, green, blue) triplet into a color.

#rgba : Converts an rgba(red, green, blue, alpha) quadruplet into a color.

#red : Gets the red component of a color.

#green : Gets the green component of a color.

#blue : Gets the blue component of a color.

#mix : Mixes two colors together.

HSL Functions

#hsl : Converts an hsl(hue, saturation, lightness) triplet into a color.

#hsla : Converts an hsla(hue, saturation, lightness, alpha) quadruplet into a color.

#hue : Gets the hue component of a color.

#saturation : Gets the saturation component of a color.

#lightness : Gets the lightness component of a color.

#adjust-hue : Changes the hue of a color.

#lighten : Makes a color lighter.

#darken : Makes a color darker.

#saturate : Makes a color more saturated.

#desaturate : Makes a color less saturated.

#grayscale : Converts a color to grayscale.

#complement : Returns the complement of a color.

Opacity Functions

#alpha / #opacity : Gets the alpha component (opacity) of a color.

#rgba : Sets the alpha component of a color.

#opacify / #fade-in : Makes a color more opaque.

#transparentize / #fade-out : Makes a color more transparent.

Number Functions

#percentage : Converts a unitless number to a percentage.

#round : Rounds a number to the nearest whole number.

#ceil : Rounds a number up to the nearest whole number.

#floor : Rounds a number down to the nearest whole number.

#abs : Returns the absolute value of a number.

These functions are described in more detail below.

Adding Custom Functions

New Sass functions can be added by adding Ruby methods to this module. For example:

module Sass::Script::Functions
  def reverse(string)
    assert_type string, :String
    Sass::Script::String.new(string.value.reverse)
  end
end

There are a few things to keep in mind when modifying this module. First of all, the arguments passed are Literal objects. Literal objects are also expected to be returned. This means that Ruby values must be unwrapped and wrapped.

Most Literal objects support the value accessor for getting their Ruby values. Color objects, though, must be accessed using rgb, red, green, or blue.

Second, making Ruby functions accessible from Sass introduces the temptation to do things like database access within stylesheets. This is generally a bad idea; since Sass files are by default only compiled once, dynamic code is not a great fit.

If you really, really need to compile Sass on each request, first make sure you have adequate caching set up. Then you can use Engine to render the code, using the options parameter to pass in data that can be accessed from your Sass functions.

Within one of the functions in this module, methods of EvaluationContext can be used.

Caveats

When creating new Literal objects within functions, be aware that it's not safe to call #to_s (or other methods that use the string representation) on those objects without first setting the #options attribute.

Defined Under Namespace

Classes: EvaluationContext

Instance Method Summary collapse

Instance Method Details

#abs(value) ⇒ Number

Finds the absolute value of a number. For example:

abs(10px) => 10px
abs(-10px) => 10px

Parameters:

  • value (Number) —

    The number

Returns:

  • (Number) —

    The absolute value

Raises:



674
675
676
 
# File 'lib/sass/script/functions.rb', line 674

def abs(value)
  numeric_transformation(value) {|n| n.abs}
end

#adjust_hue(color, degrees) ⇒ Color

Changes the hue of a color while retaining the lightness and saturation. Takes a color and a number of degrees (usually between -360deg and 360deg), and returns a color with the hue rotated by that value.

For example:

adjust-hue(hsl(120, 30%, 90%), 60deg) => hsl(180, 30%, 90%)
adjust-hue(hsl(120, 30%, 90%), 060deg) => hsl(60, 30%, 90%)
adjust-hue(#811, 45deg) => #886a11

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number



517
518
519
520
521
 
# File 'lib/sass/script/functions.rb', line 517

def adjust_hue(color, degrees)
  assert_type color, :Color
  assert_type degrees, :Number
  color.with(:hue => color.hue + degrees.value)
end

#alpha(color) ⇒ Number Also known as: opacity

Returns the alpha component (opacity) of a color. This is 1 unless otherwise specified.

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color



387
388
389
390
 
# File 'lib/sass/script/functions.rb', line 387

def alpha(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.alpha)
end

#blue(color) ⇒ Number

Returns the blue component of a color.

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color



334
335
336
337
 
# File 'lib/sass/script/functions.rb', line 334

def blue(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.blue)
end

#ceil(value) ⇒ Number

Rounds a number up to the nearest whole number. For example:

ciel(10.4px) => 11px
ciel(10.6px) => 11px

Parameters:

  • value (Number) —

    The number

Returns:

  • (Number) —

    The rounded number

Raises:



648
649
650
 
# File 'lib/sass/script/functions.rb', line 648

def ceil(value)
  numeric_transformation(value) {|n| n.ceil}
end

#complement(color) ⇒ Color

Returns the complement of a color. This is identical to adjust-hue(color, 180deg).

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    if color isn't a color

See Also:



607
608
609
 
# File 'lib/sass/script/functions.rb', line 607

def complement(color)
  adjust_hue color, Number.new(180)
end

#darken(color, amount) ⇒ Color

Makes a color darker. Takes a color and an amount between 0% and 100%, and returns a color with the lightness decreased by that value.

For example:

darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%)
darken(#800, 20%) => #200

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0% and 100%



463
464
465
 
# File 'lib/sass/script/functions.rb', line 463

def darken(color, amount)
  adjust(color, amount, :lightness, 0..100, :-, "%")
end

#desaturate(color, amount) ⇒ Color

Makes a color less saturated. Takes a color and an amount between 0% and 100%, and returns a color with the saturation decreased by that value.

For example:

desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%)
desaturate(#855, 20%) => #726b6b

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0% and 100%



499
500
501
 
# File 'lib/sass/script/functions.rb', line 499

def desaturate(color, amount)
  adjust(color, amount, :saturation, 0..100, :-, "%")
end

#floor(value) ⇒ Number

Rounds down to the nearest whole number. For example:

floor(10.4px) => 10px
floor(10.6px) => 10px

Parameters:

  • value (Number) —

    The number

Returns:

  • (Number) —

    The rounded number

Raises:



661
662
663
 
# File 'lib/sass/script/functions.rb', line 661

def floor(value)
  numeric_transformation(value) {|n| n.floor}
end

#grayscale(color) ⇒ Color

Converts a color to grayscale. This is identical to desaturate(color, 100%).

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    if color isn't a color

See Also:



596
597
598
 
# File 'lib/sass/script/functions.rb', line 596

def grayscale(color)
  desaturate color, Number.new(100)
end

#green(color) ⇒ Number

Returns the green component of a color.

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color



324
325
326
327
 
# File 'lib/sass/script/functions.rb', line 324

def green(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.green)
end

#hsl(hue, saturation, lightness) ⇒ Color

Creates a Color object from hue, saturation, and lightness. Uses the algorithm from the CSS3 spec.

Parameters:

  • hue (Number) —

    The hue of the color. Should be between 0 and 360 degrees, inclusive

  • saturation (Number) —

    The saturation of the color. Must be between 0% and 100%, inclusive

  • lightness (Number) —

    The lightness of the color. Must be between 0% and 100%, inclusive

Returns:

  • (Color) —

    The resulting color

Raises:

  • (ArgumentError) —

    if saturation or lightness are out of bounds



271
272
273
 
# File 'lib/sass/script/functions.rb', line 271

def hsl(hue, saturation, lightness)
  hsla(hue, saturation, lightness, Number.new(1))
end

#hsla(hue, saturation, lightness, alpha) ⇒ Color

Creates a Color object from hue, saturation, and lightness, as well as an alpha channel indicating opacity. Uses the algorithm from the CSS3 spec.

Parameters:

  • hue (Number) —

    The hue of the color. Should be between 0 and 360 degrees, inclusive

  • saturation (Number) —

    The saturation of the color. Must be between 0% and 100%, inclusive

  • lightness (Number) —

    The lightness of the color. Must be between 0% and 100%, inclusive

  • alpha (Number) —

    The opacity of the color. Must be between 0 and 1, inclusive

Returns:

  • (Color) —

    The resulting color

Raises:

  • (ArgumentError) —

    if saturation, lightness, or alpha are out of bounds



289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
 
# File 'lib/sass/script/functions.rb', line 289

def hsla(hue, saturation, lightness, alpha)
  assert_type hue, :Number
  assert_type saturation, :Number
  assert_type lightness, :Number
  assert_type alpha, :Number

  unless (0..1).include?(alpha.value)
    raise ArgumentError.new("Alpha channel #{alpha.value} must be between 0 and 1")
  end

  original_s = saturation
  original_l = lightness
  # This algorithm is from http://www.w3.org/TR/css3-color#hsl-color
  h, s, l = [hue, saturation, lightness].map { |a| a.value }
  raise ArgumentError.new("Saturation #{s} must be between 0% and 100%") unless (0..100).include?(s)
  raise ArgumentError.new("Lightness #{l} must be between 0% and 100%") unless (0..100).include?(l)

  Color.new(:hue => h, :saturation => s, :lightness => l, :alpha => alpha.value)
end

#hue(color) ⇒ Number

Returns the hue component of a color.

See the CSS3 HSL specification.

Calculated from RGB where necessary via this algorithm.

Parameters:

Returns:

  • (Number) —

    between 0deg and 360deg

Raises:

  • (ArgumentError) —

    if color isn't a color



348
349
350
351
 
# File 'lib/sass/script/functions.rb', line 348

def hue(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.hue, ["deg"])
end

#lighten(color, amount) ⇒ Color

Makes a color lighter. Takes a color and an amount between 0% and 100%, and returns a color with the lightness increased by that value.

For example:

lighten(hsl(0, 0%, 0%), 30%) => hsl(0, 0, 30)
lighten(#800, 20%) => #e00

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0% and 100%



445
446
447
 
# File 'lib/sass/script/functions.rb', line 445

def lighten(color, amount)
  adjust(color, amount, :lightness, 0..100, :+, "%")
end

#lightness(color) ⇒ Number

Returns the hue component of a color.

See the CSS3 HSL specification.

Calculated from RGB where necessary via this algorithm.

Parameters:

Returns:

  • (Number) —

    between 0% and 100%

Raises:

  • (ArgumentError) —

    if color isn't a color



376
377
378
379
 
# File 'lib/sass/script/functions.rb', line 376

def lightness(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.lightness, ["%"])
end

#mix(color1, color2, weight = 50%) ⇒ Color

Mixes together two colors. Specifically, takes the average of each of the RGB components, optionally weighted by the given percentage. The opacity of the colors is also considered when weighting the components.

The weight specifies the amount of the first color that should be included in the returned color. The default, 50%, means that half the first color and half the second color should be used. 25% means that a quarter of the first color and three quarters of the second color should be used.

For example:

mix(#f00, #00f) => #7f007f
mix(#f00, #00f, 25%) => #3f00bf
mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)

Parameters:

  • color1 (Color)
  • color2 (Color)
  • weight (Number) (defaults to: 50%) —

    between 0% and 100%

Returns:

Raises:

  • (ArgumentError) —

    if color1 or color2 aren't colors, or weight isn't a number between 0% and 100%



548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
 
# File 'lib/sass/script/functions.rb', line 548

def mix(color1, color2, weight = Number.new(50))
  assert_type color1, :Color
  assert_type color2, :Color
  assert_type weight, :Number

  unless (0..100).include?(weight.value)
    raise ArgumentError.new("Weight #{weight} must be between 0% and 100%")
  end

  # This algorithm factors in both the user-provided weight
  # and the difference between the alpha values of the two colors
  # to decide how to perform the weighted average of the two RGB values.
  #
  # It works by first normalizing both parameters to be within [-1, 1],
  # where 1 indicates "only use color1", -1 indicates "only use color 0",
  # and all values in between indicated a proportionately weighted average.
  #
  # Once we have the normalized variables w and a,
  # we apply the formula (w + a)/(1 + w*a)
  # to get the combined weight (in [-1, 1]) of color1.
  # This formula has two especially nice properties:
  #
  #   * When either w or a are -1 or 1, the combined weight is also that number
  #     (cases where w * a == -1 are undefined, and handled as a special case).
  #
  #   * When a is 0, the combined weight is w, and vice versa
  #
  # Finally, the weight of color1 is renormalized to be within [0, 1]
  # and the weight of color2 is given by 1 minus the weight of color1.
  p = weight.value/100.0
  w = p*2 - 1
  a = color1.alpha - color2.alpha

  w1 = (((w * a == -1) ? w : (w + a)/(1 + w*a)) + 1)/2.0
  w2 = 1 - w1

  rgb = color1.rgb.zip(color2.rgb).map {|v1, v2| v1*w1 + v2*w2}
  alpha = color1.alpha*p + color2.alpha*(1-p)
  Color.new(rgb + [alpha])
end

#opacify(color, amount) ⇒ Color Also known as: fade_in

Makes a color more opaque. Takes a color and an amount between 0 and 1, and returns a color with the opacity increased by that value.

For example:

opacify(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.6)
opacify(rgba(0, 0, 17, 0.8), 0.2) => #001

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0 and 1



407
408
409
 
# File 'lib/sass/script/functions.rb', line 407

def opacify(color, amount)
  adjust(color, amount, :alpha, 0..1, :+)
end

#percentage(value) ⇒ Number

Converts a decimal number to a percentage. For example:

percentage(100px / 50px) => 200%

Parameters:

  • value (Number) —

    The decimal number to convert to a percentage

Returns:

Raises:

  • (ArgumentError) —

    If value isn't a unitless number



619
620
621
622
623
624
 
# File 'lib/sass/script/functions.rb', line 619

def percentage(value)
  unless value.is_a?(Sass::Script::Number) && value.unitless?
    raise ArgumentError.new("#{value.inspect} is not a unitless number")
  end
  Sass::Script::Number.new(value.value * 100, ['%'])
end

#red(color) ⇒ Number

Returns the red component of a color.

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color



314
315
316
317
 
# File 'lib/sass/script/functions.rb', line 314

def red(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.red)
end

#rgb(red, green, blue) ⇒ Color

Creates a Color object from red, green, and blue values.

Parameters:

  • red (Number) —

    A number between 0 and 255 inclusive, or between 0% and 100% inclusive

  • green (Number) —

    A number between 0 and 255 inclusive, or between 0% and 100% inclusive

  • blue (Number) —

    A number between 0 and 255 inclusive, or between 0% and 100% inclusive

Returns:



197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
 
# File 'lib/sass/script/functions.rb', line 197

def rgb(red, green, blue)
  assert_type red, :Number
  assert_type green, :Number
  assert_type blue, :Number

  Color.new([red, green, blue].map do |c|
      v = c.value
      if c.numerator_units == ["%"] && c.denominator_units.empty?
        next v * 255 / 100.0 if (0..100).include?(v)
        raise ArgumentError.new("Color value #{c} must be between 0% and 100% inclusive")
      else
        next v if (0..255).include?(v)
        raise ArgumentError.new("Color value #{v} must be between 0 and 255 inclusive")
      end
    end)
end

#rgba(red, green, blue, alpha) ⇒ Color #rgba(color, alpha) ⇒ Color

Overloads:

  • #rgba(red, green, blue, alpha) ⇒ Color

    Creates a Color object from red, green, and blue values, as well as an alpha channel indicating opacity.

    Parameters:

    • red (Number) —

      A number between 0 and 255 inclusive

    • green (Number) —

      A number between 0 and 255 inclusive

    • blue (Number) —

      A number between 0 and 255 inclusive

    • alpha (Number) —

      A number between 0 and 1

    Returns:

  • #rgba(color, alpha) ⇒ Color

    Sets the opacity of a color.

    Examples:

    rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2)    => rgba(0, 0, 255, 0.2)

    Parameters:

    • color (Color)
    • alpha (Number) —

      A number between 0 and 1

    Returns:



239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
 
# File 'lib/sass/script/functions.rb', line 239

def rgba(*args)
  case args.size
  when 2
    color, alpha = args

    assert_type color, :Color
    assert_type alpha, :Number

    unless (0..1).include?(alpha.value)
      raise ArgumentError.new("Alpha channel #{alpha.value} must be between 0 and 1 inclusive")
    end

    color.with(:alpha => alpha.value)
  when 4
    red, green, blue, alpha = args
    rgba(rgb(red, green, blue), alpha)
  else
    raise ArgumentError.new("wrong number of arguments (#{args.size} for 4)")
  end
end

#round(value) ⇒ Number

Rounds a number to the nearest whole number. For example:

round(10.4px) => 10px
round(10.6px) => 11px

Parameters:

  • value (Number) —

    The number

Returns:

  • (Number) —

    The rounded number

Raises:



635
636
637
 
# File 'lib/sass/script/functions.rb', line 635

def round(value)
  numeric_transformation(value) {|n| n.round}
end

#saturate(color, amount) ⇒ Color

Makes a color more saturated. Takes a color and an amount between 0% and 100%, and returns a color with the saturation increased by that value.

For example:

saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%)
saturate(#855, 20%) => #9e3f3f

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0% and 100%



481
482
483
 
# File 'lib/sass/script/functions.rb', line 481

def saturate(color, amount)
  adjust(color, amount, :saturation, 0..100, :+, "%")
end

#saturation(color) ⇒ Number

Returns the saturation component of a color.

See the CSS3 HSL specification.

Calculated from RGB where necessary via this algorithm.

Parameters:

Returns:

  • (Number) —

    between 0% and 100%

Raises:

  • (ArgumentError) —

    if color isn't a color



362
363
364
365
 
# File 'lib/sass/script/functions.rb', line 362

def saturation(color)
  assert_type color, :Color
  Sass::Script::Number.new(color.saturation, ["%"])
end

#transparentize(color, amount) ⇒ Color Also known as: fade_out

Makes a color more transparent. Takes a color and an amount between 0 and 1, and returns a color with the opacity decreased by that value.

For example:

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

Parameters:

Returns:

Raises:

  • (ArgumentError) —

    If color isn't a color, or number isn't a number between 0 and 1



426
427
428
 
# File 'lib/sass/script/functions.rb', line 426

def transparentize(color, amount)
  adjust(color, amount, :alpha, 0..1, :-)
end