Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using sass color functions without sass engine

Tags:

sass

ruby

I want to use Sass color functions within a class, without the Sass Engine. I'm already using the sass gem in the project so i thought piggy-backing would be something as easy as:

class Rectangle
  include Sass::Script::Functions
  def color
    Sass::Script::Color.new([0x82, 0x39, 0x06])
  end
  def render
    #haml engine executed with context of self
    #so that within temlate i could call
    #  %stop{offset: '0%', stop: {color: lighten(color)}}
  end
end

UPDATE: see #render above, i want to call lighten(color) from within a haml template rendered within the context of a Rectangle instance

But i get an undefined method assert_type error. The assert_type method is defined within the Sass::Script::Functions::EvaluationContext class. (github file)

Playing around in irb, just to get something close to what i want looks like this:

require 'sass'
eval_context = Sass::Script::Functions::EvaluationContext.new({})
#yes the Sass::Script::Number.new(10) is requried, a simple 10 will not work
color = eval_context.rgb(Sass::Script::Number.new(10), Sass::Script::Number.new(10), Sass::Script::Number.new(10))
eval_context.lighten(color, Sass::Script::Number.new(10))

which is crazy - am i missing something?

like image 542
firien Avatar asked Jul 16 '13 16:07

firien


People also ask

How do I change colors in SCSS?

Sass Set Color Functions An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of that color and can be an integer between 0 and 255, or a percentage value (from 0% to 100%). Sets a color using the Red-Green-Blue-Alpha (RGBA) model.

How do you darken colors in sass?

Using lighten() and darken() in SASS As the names suggest, given a colour and percentage, these functions will return a colour lighter or darker respectively.

How do you use opacity in sass?

With Sass, just wrap your color with rgba() and the opacity value as you would with normal CSS. Sass will take care of breaking down the color value into the correct RGB values.


2 Answers

Sass::Script::Parser.parse('lighten(#333, 10)', 0, 0).perform(Sass::Environment.new)

like image 161
Shai Coleman Avatar answered Oct 20 '22 00:10

Shai Coleman


Update

Now that I understand your problem better, why not just rewrite the functionality.

require 'sass'

class Rectangle
  include Sass::Script

  def color
    @color ||= Sass::Script::Color.new([0x82, 0x39, 0x06])
  end

  def lighten(ammount)
    hsl = color.hsl.dup
    hsl[2] += ammount
    @color = Sass::Script::Color.new(hue: hsl[0], saturation: hsl[1], lightness: [2])
  end
end

rec = Rectangle.new
rec.lighten(20)

Old Answer

You aren't crazy, you've just included the wrong piece.

This code runs as you expect it. Notice that I removed the ::Functions from the include.

require 'sass'

class Rectangle
  include Sass::Script

  def color
    color = Sass::Script::Color.new([0x82, 0x39, 0x06])
    puts color.class
  end
end

rec = Rectangle.new
rec.color
like image 40
Dan Grahn Avatar answered Oct 20 '22 00:10

Dan Grahn