-
@extend Sass 中的 @extend 是用来扩展选择器或占位符。比如： .error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; } 被编译为： .error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; } 详细的可以回顾前面介绍的继承样式部分。查看全部
-
@media Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。来看一个简单示例： .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } 编译出来： .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } @media 也可以嵌套 @media： @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } 此时编译出来： @media screen and (orientation: landscape) { .sidebar { width: 500px; } } 在使用 @media 时，还可以使用插件#{}: $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } } 编译出来的 CSS： @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } }查看全部
-
@import Sass 支持所有 CSS3 的 @ 规则， 以及一些 Sass 专属的规则，也被称为“指令（directives）”。 @import Sass 扩展了 CSS 的 @import 规则，让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外，被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。 Sass 会在当前目录下寻找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。 @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则： 如果文件的扩展名是 .css。 如果文件名以 http:// 开头。 如果文件名是 url()。 如果 @import 包含了任何媒体查询（media queries）。 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。 例如： @import "foo.scss"; 或 @import "foo"; 两者都将引入 foo.scss 文件， 而 @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 将被编译为： @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 也可以通过一个 @import 引入多个文件。例如： @import "rounded-corners", "text-shadow"; 将引入 rounded-corners 和 text-shadow 两个文件。查看全部
-
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)查看全部
-
这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。其接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 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%,23%,.6),.15) rgba(79, 53, 39, 0.75) >> opacify(hsla(22,34%,23%,.6),.415) #4f3527 >> opacify(red,.15) #ff0000 >> opacify(#89adde,.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 其中 fade-in( ) 函数又名 fade_in() 函数。其所起作用等效。查看全部
-
Opacity函数-rgba()函数 在前面介绍 RGB 函数一节中，还记得吗？有一个 rgba() 函数可以创建一个颜色，同时还可以对颜色修改其透明度。其可以接受两个参数，第一个参数为颜色，第二个参数是你需要设置的颜色透明值。 >> rgba(red,.5) rgba(255, 0, 0, 0.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函数-alpha()、opacity()函数 alphpa() 和 opacity() 函数很简单，与前面介绍的 red(),green() 等函数很类似。这个函数的主要功能是用来获取一个颜色的透明度值。如果颜色没有特别指定透明度，那么这两个函数得到的值都会是 1： >> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8查看全部
-
在 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)：使颜色更加透明。查看全部
-
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; } 看看计算出来的 HSL 各个值的变化： >> hue(#ad141e) 356.07843deg >> hue(#616161) 0deg >> saturation(#ad141e) 79.27461% >> saturation(#616161) 0% >> lightness(#ad141e) 37.84314% >> lightness(#616161) 38.03922% grayscale() 函数处理过的颜色，其最大的特征就是颜色的饱和度为 0。查看全部
-
HSL函数-adjust-hue()函数 这个是通过调整颜色的色相换算一个新颜色。他需要一个颜色和色相度数值。通常这个度数值是在 -360deg 至 360deg 之间，当然了可以是百分数： //SCSS $baseColor: #ad141e; .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; } 同样的，可以通过 hue() 函数得到颜色转换前后的色相值： >> hue(#ad141e) //原颜色色相值 356.07843deg >> hue(#ad5614) //在原色色相基础上增加30deg 25.88235deg 在 HSL 颜色表达方式上，色相是从 -360 和 360 之间，负值逆时针转，正值顺时针转。在这个实例中，原色的色相值约 356deg，加上 30deg 后，新颜色变成了 386deg，但我们的色盘中并没有比 360deg 更大的值，此时新颜色的值也并不会是386deg，那将怎么办呢？其实很简单，当值大于 360deg时，表示色盘转完了一圈，继续顺时针转余下的值（这里是 26deg），那么这个继续转的值就是新颜色的色相值。小伙伴们，看到这个，你是不是又有点惊了。反之，得到的负数值也是一样的道理。查看全部
-
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; } 颜色变了。同样使用 saturation() 函数在终端中进行计算一下，看看他们有什么样的变化： >> saturation(#ad141e) //原色的饱和度 79.27461% >> saturation(#c1000d) //在原色饱和度基础上增加30%,超过100%时按100%计算 100% >> saturation(#903137) //在原色饱和度基础上减少30%,小于0时按0计算 49.2228%查看全部
-
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; } 使用函数 lightness() 函数来验证一下三个颜色之间亮度值的变化： >> lightness(#ad141e) //原色的亮度值 37.84314% >> lightness(#db1926) //在原色的亮度值基础上增加10% 47.84314% >> lightness(#7f0f16) //在原色的亮度值基础上减少10% 27.84314% 当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。查看全部
-
HSL函数简介 HSL颜色函数包括哪些具体的函数，所起的作用是什么： hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色； hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色； hue($color)：从一个颜色中获取色相（hue）值； saturation($color)：从一个颜色中获取饱和度（saturation）值； lightness($color)：从一个颜色中获取亮度（lightness）值； adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色； lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色； darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色； saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色 desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色； grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%); complement($color)：返回一个补充色，相当于adjust-hue($color,180deg); invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。 在 HSL 函数中，hsl() 和 hsla() 函数主要是通过颜色的 H、S、L 或者 A 几个参数获取一个 rgb 或 rgba 表达的颜色，使用这两个函数能帮助您知道颜色的十六进制表达式和 rgba 表达式。 而 hue()、saturation() 和 lightness() 函数主要是用来获取指定颜色中的色相值、饱和度和亮度值。对于颜色表达没有太多的实际作用。查看全部
-
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(#f00, #00f, 25%) => #3f00bf 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 } 这就是 Mix 函数的工作原理，在函数中指定三个函数，前两个函数是你想混合的颜色（记住，你可以通过颜色变量、十六进制、RGBA、RGB、HSL 或者 HSLA 颜色值）。第三个参数是第一种颜色的比例值。查看全部
-
RGB颜色函数-Red()、Green()、Blue()函数 3、Red() 函数 red() 函数非常简单，其主要用来获取一个颜色当中的红色值。假设有一个 #f36 的颜色，如果你想得到 #f36 中的 red 值是多少，这个时候使用 red() 函数就能很简单获取。 >> red(#f36) 255 得到的值是”255”。（注意：在命令终端要先输入sass -i 命令） 4、Green() 函数 green() 函数和 red() 函数一样，用来获取某一个颜色值中 green 的值。同样拿 ”#f36“ 颜色为例： >> green(#f36) 51 5、Blue() 函数 同理，blue() 函数是用来获取某一个颜色值中 blue 的值，如： >> blue(#f36) 102查看全部
举报
0/150
提交
取消