Sass 基础(七)

时间:2022-04-23
本文章向大家介绍Sass 基础(七)，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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,
			　　　　　　　　　　　　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]):把梁总颜色混合在一起。

　　　　　　　　　　　　$ 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 颜色函数包括哪些具体的函数，所起的作用是什么： 　　　　　　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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。 　　　　　　同样在你的终端，通过 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 来控制，只不过前两者只是针对颜色上的 　　　　　　透明通道做处理，而后者是控制整个元素的透明度。

　　　　　　在 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)

随机文章
本站知识点必读
最近更新