Module: sass: Script: Functions

When it comes to the pressure of English, try to make it Chinese according to your own understanding for future reference...

1. RGB Functions
   RGB ($ red, $ green, $ blue)
   Converts rgb(red, green, blue)Triplet into a color.
   Rgba ($ red, $ green, $ blue, $ alpha)
   Converts rgba(red, green, blue, alpha)Quadruplet into a color.
   Rgba ($ color, $ alpha)
   Adds an Alpha layer to any color value.
   Red ($ color)
   Gets the red component of a color. // obtain the two-digit value of the red part.
   Green ($ color)
   Gets the green component of a color.
   Blue ($ color)
   Gets the blue component of a color.
   Mix ($ color-1, $ color-2, [$ weight])
   Mixes two colors together. // mixed color
2. HSL Functions
   HSL ($ hue, $ saturation, $ lightness)
   Converts hsl(hue, saturation, lightness)Triplet into a color. // color, saturation, and brightness
   HSLA ($ hue, $ saturation, $ lightness, $ alpha)
   Converts hsla(hue, saturation, lightness, alpha)Quadruplet into a color. // color phase, saturation, brightness, and transparency
   Hue ($ color)
   Gets the hue component of a color. // obtain the color of the color.
   Saturation ($ color)
   Gets the saturation component of a color. // gets the color saturation.
   Lightness ($ color)
   Gets the lightness component of a color. // gets the brightness of the color.
   Adjust-Hue ($ color, $ degrees)
   Changes the hue of a color. // adjust the color
   Lighten ($ color, $ amount)
   Makes a color lighter.
   Darken ($ color, $ amount)
   Makes a color darker.
   Saturate ($ color, $ amount)
   Makes a color more saturated.
   Desaturate ($ color, $ amount)
   Makes a color less saturated.
   Grayscale ($ color)
   Converts a color to grayscale. // grayscale
   Complement ($ color)
   Returns the complement of a color. // complementary
   Invert ($ color)
   Returns the inverse of a color. // reverse

   sass：

   color: lighten(#8ec63f, 50%)color: darken(#8ec63f, 30%)color: saturate(#8ec63f, 75%)color: desaturate(#8ec63f, 25%)color: adjust-hue(#8ec63f, 30)color: adjust-hue(#8ec63f, -30)color: fade-in(rgba(142, 198, 63, 0), .4)color: fade-out(#8ec63f, .4)

   color: invert(#8ec63f)color: complement(#8ec63f)color: mix(#8ec63f, #fff)color: mix(#8ec63f, #fff, 10%)color: grayscale(#8ec63f)  
   CSS after compilation:
   color: white;color: #3b5319;color: #98ff06;color: #89a75e;color: #4ac63f;color: #c6bb3f;color: rgba(142, 198, 63, 0.4);color: rgba(142, 198, 63, 0.6);  
   color: #7139c0;color: #773fc6;color: #c6e29f;color: #f3f9eb;color: #838383;  
   

3. Opacity Functions
   Alpha ($ color)/ Opacity ($ color)
   Gets the Alpha component (opacity) of a color. // gets the transparency of a color.
   Rgba ($ color, $ alpha)
   Add or change an Alpha layer for any color value.
   Opacify ($ color, $ amount)/ Fade-in ($ color,
   $ Amount)
   Makes a color more opaque.
   Transparentize ($ color, $ amount)/ Fade-out ($ color,
   $ Amount)
   Makes a color more transparent.
4. Other color functions
   Adjust-color ($ color, [$ Red], [$ Green], [$ Blue], [$ hue],
   [$ Saturation], [$ lightness], [$ Alpha])
   Increase or decrease any of the components of a color. // increment or decrease any attribute of a color.
   Scale-color ($ color, [$ Red], [$ Green], [$ Blue], [$ saturation],
   [$ Lightness], [$ Alpha])
   Fluidly scale one or more components of a color. // Based on the flow of the color attribute, the score is divided into hundreds.
   Change-color ($ color, [$ Red], [$ Green], [$ Blue], [$ hue],
   [$ Saturation], [$ lightness], [$ Alpha])
   Changes one or more properties of a color. // you can specify any color attribute.
   
   IE-hex-STR ($ color)
   Converts a color into the format understood by IE filters.

   scss:

   color: change-color(#8ec63f, $red: 60, $green: 255)color: adjust-color(#8ec63f, $hue: 300, $lightness: 50%)color: scale-color(#8ec63f, $lightness: 25%, $alpha: 30%)

   CSS after compilation:

   color: #3cff3f;color: white;color: #aad46f;  
     

5. String Functions
   Unquote ($ string)
   Removes the quotes from a string. // Delete the string's quotation marks
   Quote ($ string)
   Adds quotes to a string. // Add quotation marks to the string
6. Number Functions
   Percentage ($ value)
   Converts a unitless number to a percentage. // convert the value to a percentage.
   Round ($ value)
   Rounds a number to the nearest whole number. // convert a value to an integer (rounding)
   Ceil ($ value)
   Rounds a number up to the nearest whole number. // convert a decimal number to an integer (up)
   Floor ($ value)
   Rounds a number down to the nearest whole number. // convert a value to an integer (to the Lower House)
   ABS ($ value)
   Returns the absolute value of a number. // obtain the absolute value of a value.
   Min ($ X1, $ X2 ,...)
   Finds the minimum of several values. // find the minimum value among multiple values.
   Max ($ X1, $ X2 ,...)
   Finds the maximum of several values. // find the maximum value.
7. List Functions
   Length ($ List)
   Returns the length of a list.
   Nth ($ list, $ N)
   Returns a specific item in a list. // return a specific item in the list.
   Join ($ list1, $ list2, [$ separator])
   Joins together two lists into one. connect two lists
   Append ($ list1, $ Val, [$ separator])
   Appends a single value onto the end of a list. // Add an item at the end of the list.
8. Introspection Functions
   Type-of ($ value)
   Returns the type of a value. // return the type of the value.
   Unit ($ number)
   Returns the units associated with a number. // return the unit of the given number. If this is not returned, the Null String ("") is returned.
   Unitless ($ number)
   Returns whether a number has units or not. // determines whether the unit of a given number exists. If true is not returned, false is returned.
   Comparable ($ number-1, $ number-2)
   Returns whether two numbers can be added or compared.
9. Miscellaneous 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  declare :reverse, :args => [:string]end

   CallingDeclareTells sass the argument names for your
   Function. If omitted, the function will still work, but will not be able to accept keyword arguments.DeclareCan
   Also allow your function to take arbitrary keyword arguments.

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

   Most literal objects supportValueAccessor for getting
   Their Ruby values. Color objects, though, must be accessed usingRGB,Red,Green,
   OrBlue.

   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 useSass: EngineTo
   Render the code, usingoptionsParameterto pass in data thatCan
   Be AccessedFrom your sass functions.

   Within one of the functions in this module, methodsEvaluationcontextCan
   Be used.

   Caveats

   When creating newLiteralObjects 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 settingThe
   # Options attribute.

   Give the most complete: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html