Module: Sass::Script::Functions

來源:互聯網
上載者:User

看到英文壓力就大,先試著按自己的理解弄成中文吧,供以後查閱。。。

  1. RGB Functions
    rgb($red, $green, $blue)
    Converts an  rgb(red, green, blue) triplet into a color.
    rgba($red, $green, $blue, $alpha)
    Converts an  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.//獲得顏色紅色部分的兩位元數值
    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.//混合色
  2. HSL Functions
    hsl($hue, $saturation, $lightness)
    Converts an  hsl(hue, saturation, lightness) triplet into a color.//色相、飽和度、亮度
    hsla($hue, $saturation, $lightness, $alpha)
    Converts an  hsla(hue, saturation, lightness, alpha) quadruplet into a color.//色相、飽和度、亮度、透明度
    hue($color)
    Gets the hue component of a color.//擷取顏色的色相
    saturation($color)
    Gets the saturation component of a color.//擷取顏色的飽和度
    lightness($color)
    Gets the lightness component of a color.//擷取顏色的亮度
    adjust-hue($color, $degrees)
    Changes the hue of a 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.//灰階
    complement($color)
    Returns the complement of a color.//互補
    invert($color)
    Returns the inverse of a color.//反相
    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:
    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.//擷取一個顏色的透明度
    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.//遞增或遞減一個顏色任何屬性
    scale-color($color, [$red], [$green], [$blue], [$saturation],
    [$lightness], [$alpha])
    Fluidly scale one or more components of a color.//基於顏色屬性上流動劃分百分值
    change-color($color, [$red], [$green], [$blue], [$hue],
    [$saturation], [$lightness], [$alpha])
    Changes one or more properties of a color.//設定任何一顏色的屬性
    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:
    color: #3cff3f;color: white;color: #aad46f;  
      
  5. String Functions
    unquote($string)
    Removes the quotes from a string.//刪除字串的引號
    quote($string)
    Adds quotes to a string.//為字串添加引號
  6. Number Functions
    percentage($value)
    Converts a unitless number to a percentage.//將值轉換為百分數
    round($value)
    Rounds a number to the nearest whole number.//將一值轉換為整數(四捨五入)
    ceil($value)
    Rounds a number up to the nearest whole number.//將一小數轉換一個整數(向上入)
    floor($value)
    Rounds a number down to the nearest whole number.//將一個值轉換為整數(向下舍)
    abs($value)
    Returns the absolute value of a number.//取一個值的絕對值
    min($x1, $x2, …)
    Finds the minimum of several values.//找出多個數中的最小值
    max($x1, $x2, …)
    Finds the maximum of several values.//找出最大值
  7. List Functions
    length($list)
    Returns the length of a list.
    nth($list, $n)
    Returns a specific item in a list.//返回列表中特定的項
    join($list1, $list2, [$separator])
    Joins together two lists into one.串連兩個列表
    append($list1, $val, [$separator])
    Appends a single value onto the end of a list.//在列表末尾添加一項
  8. Introspection Functions
    type-of($value)
    Returns the type of a value.//返回數值的類型
    unit($number)
    Returns the units associated with a number.//返回給定數位單位,沒有這返回(“”)這個空串
    unitless($number)
    Returns whether a number has units or not.//判斷給定數字是否有單位,沒有返回true,有則返回false
    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

    Calling declare tells Sass the argument names for your
    function. If omitted, the function will still work, but will not be able to accept keyword arguments. declare can
    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 are Sass::Script::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 Sass::Engine to
    render the code, using the options parameterto 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.

    給出最全的:http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.