快捷搜索:

您的位置:澳门新葡4473网站 > 澳门新葡4473网站 > Sass 基础(七)

Sass 基础(七)

发布时间:2020-02-15 08:07编辑:澳门新葡4473网站浏览(173)

    要基于当前墙纸应用并更改为最合适的颜色,请转到“自定义”>“颜色”>“从背景中自动选择颜色”。

    Sass Maps 的函数-map-remove($map,$key),keywords($args)
        map-remove($map,$key)
        map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的
        map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map,仅能通过删除
        map中的某个key 得到新的map
        $map:map-remove($social - colors,dribble);
          返回的是一个新map
            $map:(
                facebook:#3b5998,
    澳门新葡4473网站,            github:#171515,
                google:#db4437,
                twitter:#55acee
            );
            keywords($args)
            keywords($args)
            keywords($args) 函数可以通过混合宏或函数的参数变创建map.
            参数也是成对出现,其中$args 变成key(会自动去掉$符号),而
            $args对应的的值是value.
            @mixin map($args...){
                @debug keywords($args);
            }
            @include map(
              $dribble: #ea4c89,
              $facebook:#3b5998,
              $github:#171515,
              $google:#db4437,
              $twitter:#55acee
            );
    RGB 颜色函数-RGB()颜色函数
          在Sass 的官网文档中,列出了Sass 的颜色函数清单,从大的方面主要分为RGB,HSL 和 Opacity 三大函数,
          当然其还包括一些其他的颜色函数,比如说adjust-color和chang-color 等。
          1.RGB 颜色函数
              RGB颜色只是颜色中的一种表达式,其中R 是red 表示红色,G是green 表示绿色而 B 是blue 表示蓝色
              在Sass 中为RGB 颜色提供六种函数:
              rgb($red,$green,$blue):根据红,绿,蓝三个值创建一个颜色
              rgba($red,$green,$blue,$alpha):根据红,绿,蓝和透明度创建一个颜色。
              red($color):从一个颜色中获取其中红色值:
              green($color):从一个颜色总或者去其中绿色值:
              blue($color):从一个颜色中获取其中蓝色值:
              mix($color-1,$color-2,[$weight]):把梁总颜色混合在一起。

    您可以从此链接下载Chilly Morning主题包:

                $ sass -i
              >>rgb(200,40,88) //根据r:200, g:40, b;88 计算出一个十六进制颜色值。
                #c82858
              >> rgba(#c82858,.65) //根据#c82858 的65%透明度计算 出一个rgba颜色值。
                rgba(200,40,88,0.65)
              >>red(#c82858) //#c82858 颜色中得到红色值、
                200
                200
              >> green(#c82858) //从#c82858 颜色中得到蓝色值
                88
                88
              >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858 和rgba(200,40.88..65)两颜色按比例混合得到一个新颜色
                rgba(200,40,80,0.65105)
                RGB 颜色函数-RGBA() 函数
          2. rgba() 函数主要用来将一个颜色根据透明度转换成rgba颜色。
              其语法有两种格式
              rgba($red,$green,$blue,$alpha) // 讲一个rgba 颜色转译出来,和未转译的值一样。
              rgba($color,$alpha) // 将一个Hex 颜色转换成rgba 颜色
              其中rgba($color,$alpha) 函数擢用更大主要运用在这样的情形
              之中:假设在实际中知道的颜色值是 #f36 或者 red,但在使用中
              ,需要给他们配上一个透明度,这个时候在原来的 CSS 中,首先需
              要通过制图工具,得到 #f36 或 red 颜色的 R、G、B 值,而不能
              直接使用(注意 css3 是可以的,但是存在浏览器兼容问题):
            //CSS
              color: rgba(#f36,.5); //在css中,这是无效的写法
              $color: #f36;
              $bgColor: orange;
              $borderColor:green;
            //SCSS
              .rgba {
                  color: rgba(#f36,.5);
                  background: rgba(orange,.5);
                  border-color: rgba(green,.5);
              }
            语法:
            在这个实例中,我们使用了 Sass 的 rgba 函数,在括号是函数的
            参数,第一个参数是需要转换的颜色,他可以是任何颜色的表达方
            式,也可以是一个颜色变量;第二个参数是颜色的透明度,其值是
            0~1 之间。上面的代码转译出来:
          .rgba {
              color: rgba(255, 51, 102, 0.5);
              background: rgba(255, 165, 0, 0.5);
              border-color: rgba(0, 128, 0, 0.5);
          }
          来看一个调用前面定义的变量
            //SCSS
              .rgba {
                color: rgba($color,.5);
                background: rgba($bgColor,.5);
                border-color: rgba($borderColor,.5);
              }
            编译出来的 css 代码:
              //CSS
                .rgba {
                    color: rgba(255, 51, 102, 0.5);
                    background: rgba(255, 165, 0, 0.5);
                    border-color: rgba(0, 128, 0, 0.5);
                }
    RGB 颜色函数-Red(),Green(),Blue函数
        3.Rred() 函数
            red() 函数非常简单,其主要作用获取一个严重的红色值,假设没有一个#f36 的颜色,如果你想得到#f36中 的red
            指示多少,这个时候使用red() 函数就能很简单获取。
            >> red
                255
        4,Green 函数
            green() 函数和red 函数一样,用来获取某个颜色中green的值,同样拿“#f36” 颜色为例
            >>green(#f36)
                51
        5.Blue() 函数
            同理,blue () 函数是用来获取某个值颜色中bliue 的值
            >> blue(#f36)
              102
            RGB 颜色函数-Mix() 函数
            Mix 函数 是将两种颜色根据一定的比例混合在一起,生成另一种颜色,
            mix($color-1,$$color-2,$weight);
              $color-1 和$color-2 指的是你需要合并的颜色,颜色是可以是任何表达式,也可以是颜色变量。
              $weight 为合并的比例(选择权重),默认值为50%,其取值范围是0~1 之间,他是每个RGB 的
              百分比是50%,这意味着两个颜色各占一半,如果指定的比例是 25%,这意味着第一个颜色所占比例为 25%,
            第二个颜色所占比例为75%。
          其使用方法很简单
            mix(#f00,#00f) =>#7f007f
            mix(rgba(255,0,0,0.5),#00f) =>rgba(63,0,191.0.75)
          在前面的基础上,做一个修改
          //SCSS
            $color1:#a63;
            $color2:#fff;
            $bgColor1:#f36;
            $bgColor2:#e36;
            $borderColor1:#c36;
            $borderColor2:#b36;
          .mix{
              background:mix($bgColor1,bgColor2,.75);
              color:mix($color1,$color2,.25);
              border-color:
              mix($borderColor1,(bgColor2,.05));
        }
          编译出来的css 代码
          //css
            .mix{
                background:#ee3366;
                color:#fefefe;
                border-color:#ed33
            }
    HSL 函数简介
          在 Sass 中提供了一系列有关于 HSL 的颜色函数,以供大家使用,
          其中常用的有 saturation、lightness、adjust-hue、lighten、darken
          等等。接下来我们先来了解一下 HSL 颜色函数包括哪些具体的函数,所起的作用是什么:

    https://www.microsoft.com/en-us/p/chilly-morning/9n80jn6nx4wt?activetab=pivot:overviewtab#

          1,hsl($hue,$saturation,$lightness):通过色相(hue)、饱和度(saturation)和亮度(lightness)的值创建一个颜色;
          2,hsla($hue,$saturation,$lightness,$alpha):通过色相(hue)、饱和度(saturation)、亮度(lightness)和透明(alpha)的值创建一个颜色;,
          3,hue($color):从一个颜色中获取色相(hue)值;
          4,lightness($color):从一个颜色中获取亮度(lightness)值;
          5,darken($color,$amount):通过改变颜色的亮度值,让颜色变暗,创建一个新的颜色;
          6,saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
          7,desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
          8,grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%);
          9,complement($color):返回一个补充色,相当于adjust-hue($color,180deg);
          10,invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。

    澳门新葡4473网站 1

          同样在你的终端,通过 sass -i 来对上面的各个函数做一个简单测试:
            >> hs1(200,30%,60%) // 通过还h200,s30% l60% 创建一个颜色
              #7aa3b8
            >>hsla(200,30%,60%,.8) // 通过h200,s30%,160%,a80% 创建一个颜色
              rgba(122,163,184,0.8)
            >> hue(#7ab) // 得到#7ab 颜色的色相值
              195deg
            >> saturation(#7ab) // 得到#7ab 颜色的饱和度值
              33.33333%
            >>lightness(#7ab) // 得到#7ab 颜色的亮度
              60%
            >> adjust-hue(#f36,150deg ) // 改变#f36 颜色的色相值为 150deg
              #33ff66
            >> lighten(#f36,50%) // 把#f36 颜色高度提高50%
              #ffffff
            >>darken(#f36,50%) //把#f36 颜色亮度提高50%
              #33000d
            >>saturate(#f36,50%) //把#f36 颜色饱和度提高50%
              #ff3366
            >>desaturate(#f36,50%) //把#f36 颜色饱和度降低50%
              #cc667f
            >>grayscale(#f36) // 把#f36 颜色变成灰色
              #999999
            >>complement(#f36)
              #33ffcc
            >>invert(#f36)
              #00cc99
    HSL函数-lighten()
          lighten() 和 darken() 两个函数都是围绕颜色的亮度值做调整的,
          其中 lighten() 函数会让颜色变得更亮,与之相反的 darken() 函数
          会让颜色变得更暗。这个亮度值可以是 0~1 之间,不过常用的一
          般都在 3%~20% 之间。
          来看一个简单的实例,首先顶一个一个颜色变量
            $baseColor:#ad141e;
          使用lighten()和darken() 函数来修改10% 的亮度值:
          // SCSS
            .lighten{
                background:lighten($baseColor,10%)
            }
            .darken{
                background:darken($baseColor,10%)
            }
          编译出来的css 代码
        //CSS
          .lighten{
              background:#db1926;
            }
          .darken{
              background:#7f0f16;
          }
    HSL 函数-saturate()
          saturate(),desaturate() 这两个函数是通过改变颜色的饱和度来得到
          一个新的颜色,我们和前面介绍的修改亮度得到新颜色的方法非常相似。
        // SCSS
          $baseColor: #ad141e;
          .saturate{
              background:saturate($baseColor,30%); //在原色饱和度基础上增加饱和度
            }
          .desaturate{
              background:desaturate($baseColor,30%); // 在原色饱和度基础上减少饱和度。
          }
        // 编译出来的css 代码
        // CSS
          .saturate{
              background:#c1000d;
            }
          .desaturate{
              background:#903137;
          }
    HSL 函数-adjust-hue() 函数
        这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色
        相度数值。通常这个度数值是在 -360deg 至 360deg 之间,当然了可以是百分数:
        //SCSS
          $baseColor:#ad14le;
          .adjust-hue-deg{
              background:adjust-hue($baseColor,30deg);
          }
          .adjust-hue-per{
              background:adjust-hue($baseColor,30%);
          }
          编译出来的css 代码
          // css
            .adjust-hue-deg{
              background:ad5614;
            }
            .adjust-hue-per{
              background:#ad5614;
            }
    HSL 函数-grayscale() 函数
          这个函数会颜色的饱和度值直接调至 0%,所以此函数与 desaturate($color,100%)
          所起的功能是一样的。一般这个函数能将彩色颜色转换成不同程度的灰色。例如:
          // SCSS
            $baseColor:#ad141e;
            .grayscale{
              background:grayscale($baseColor);
            }
            .desaturate{
              background:desaturate($baseColor,100%)
            }
            编译出来的css 代码
              //css
                .grayscale{
                    background:#616161;
                }
              .desaturate{
                  background:#616161;
              }
    Opacity 函数介绍
          在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度
          之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的
          透明通道做处理,而后者是控制整个元素的透明度。

    澳门新葡4473网站 2

          在 Sass 中,也提供了系列透明函数,只不过这系列的透明函数主要用来处理颜色透明度:
          alpha($color) / opacity($color) 获取颜色透明度
          rgba($color,$alpha):改变颜色的透明度值。
          opacify($color,$amount)/ fade-in($color,$amount): 使颜色更加不透明
          transparentize($color,$amount) / fade-out($color,$amount) 使颜色更加透明。
          Opacity 函数-alpha(),opacity() 函数
          alphpa() 和opacity() 函数很简单,与前面介绍的red(),green() 等函数
          数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如
          果颜色没有特别指定透明度,那么这两个函数得到的值都会是 1:
          >> alpha(red)
            1
          >> alpha(rgba(red,.8))
            0.8
          >>opacity(red)
            1
          >>opacity(rgba(red,.8))
            .8
    Opacity 函数-rgba() 函数
        在前面介绍 RGB 函数一节中,还记得吗?有一个 rgba() 函数可以创
        建一个颜色,同时还可以对颜色修改其透明度。其可以接受两个参数,
        第一个参数为颜色,第二个参数是你需要设置的颜色透明值。
        >>rgba(red,.5)
          rgba(255,0,00.5)
        >>rgba(#dedede,.5)
          rgba(222,222,222,0.5)
        >>rgba(rgb(34,45,44),.5)
          rgba(34, 45, 44, 0.5)
        >> rgba(rgba(33,45,123,.2),.5)
          rgba(33, 45, 123, 0.5)
        >> rgba(hsl(33,7%,21%),.5)
          rgba(57, 54, 50, 0.5)
        >> rgba(hsla(33,7%,21%,.9),.5)
          rgba(57, 54, 50, 0.5)
    Opacity 函数-opacify(),fade-in()函数
          这两个函数是用来对已有颜色的透明度做一个加法运算,会让颜色
          更加不透明。其接受两个参数,第一个参数是原始颜色,第二个参
          数是你需要增加的透明度值,其取值范围主要是在 0~1 之间。当
          透明度值增加到大于 1 时,会以 1 计算,表示颜色不具有任何透明度。
          >>opacify(rgba(22,34,235,.6),.2)
            rgba(22,34,235,0.8)
          >>opacify(rgba(22,34,235,.6),.5)
            #1622eb
          >>opacify(hsla(22,34,235,.6),.15)
            rgba(79,53,39,0.75)
          >>opacify(hsla(22,34%,23%,.6),.415)
            #4f3527
          >>opacify(red,.15)
            #89adde
          >>fade-in(rgba(23,34,34,.5),.15)
            rgba(23,34,34,0.65)
          >>fade-in(rgba(23,34,34,.5),.615)
            #172222
    Opacity 函数-transparentize(), fade-out() 函数
        transparentize() 和 fade-out() 函数所起作用刚好与 opacify() 和 fade-in()
        函数相反,让颜色更加的透明。这两个函数会让透明值做减法
        运算,当计算出来的结果小于 0 时会以 0 计算,表示全透明。
        >>transparentize(red,.5)
          rgba(255,0,0,0.5)
        >>transparentize(#fde,.9)
          rgba(255,221,238,0.1)
        >>transparentize(rgba(98,233,124,.3),.11)
          rgba(98, 233, 124, 0.19)
        >> transparentize(rgba(98,233,124,.3),.51)
          rgba(98, 233, 124, 0)
        >> fade-out(red,.9)
          rgba(255, 0, 0, 0.1)
        >> fade-out(hsla(98,6%,23%,.5),.1)
          rgba(58, 62, 55, 0.4)
        >> fade-out(hsla(98,6%,23%,.5),.6)
          rgba(58, 62, 55, 0)

    澳门新葡4473网站 3

    澳门新葡4473网站 4

    (文/cnBeta)    

    本文由澳门新葡4473网站发布于澳门新葡4473网站,转载请注明出处:Sass 基础(七)

    关键词: