Sass学习笔记2

最新推荐文章于 2024-04-20 03:46:20 发布
最新推荐文章于 2024-04-20 03:46:20 发布
阅读量221 收藏
点赞数
分类专栏： 学习笔记 文章标签： scss css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52476758/article/details/123226322
版权

1. Sass的控制命令

1.1 @if

​ @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用

//SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}
.block {
  @include blockOrHidden;
}
.hidden{
  @include blockOrHidden(false);
}
// 编译出来的CSS:
.block {
  display: block;
}
.hidden {
  display: none;
}
1.2 @for循环

​ Sass的@for循环有两种方式：

@for $i from <start> through <end>

@for $i from <start> to <end>

$i 表示变量;start 表示起始值;end 表示结束值

两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

  1. through

    //SCSS 
$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
  float: left;
  margin-left: $grid-gutter / 2;
  margin-right: $grid-gutter / 2;
}
@for $i from 1 through 3 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
// css
.span1, .span2, {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}

  2. to：编译出来的css代码与上面编译的css代码相同

    //SCSS
@for $i from 1 to 4 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}
1.3 @while循环

​ @while 指令也需要 SassScript 表达式，并且会生成不同的样式块，直到表达式值为 false 时停止循环，只要 @while 后面的条件为 true 就会执行。

//SCSS
$types: 2;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
// 编译出来的 CSS
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}
1.4 @each循环
  1. @each 循环就是去遍历一个列表，然后从列表中取出对应的值。
  2. @each 循环指令的形式：@each $var in <list>
$list: adam john wynn ;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}
// 编译出 CSS:
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }

2. Sass的函数功能-字符串与数字函数

2.1 字符串函数
2.1.1 unquote()函数与quote()函数

  1. unquote($string)：删除字符串中的引号

    //SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}
//CSS
.test1 {
  content: Hello Sass!; }
.test2 {
  content: 'Hello Sass!; }
.test3 {
  content: I'm Web Designer; }
.test4 {
  content: 'Hello Sass!'; }
.test5 {
  content: "Hello Sass!"; }
.test6 {
  content: Hello Sass; }

    注意:unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身

  2. quote($string)：给字符串添加引号

    主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""

    //SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}
//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}

    ==注意：==使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错

2.1.2 To-upper-case()、To-lower-case()

  1. To-upper-case() 函数将字符串小写字母转换成大写字母。

    //SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}
//CSS
.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

  2. To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母

    //SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}
//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}
2.2 数字函数
2.2.1 percentage()

​ 主要是将一个不带单位的数字转换成百分比形式

.footer{
    width : percentage(.2) // 2px/10px   2em/10em
}
// 编译后的 css 代码：
.footer{
    width : 20%
}
2.2.2 round()函数

​ 将一个数四舍五入为一个最接近的整数

2.2.3 ceil()函数

​ ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算

2.2.4 floor()函数

​ 主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算

2.2.5 abs()函数

​ abs( ) 函数会返回一个数的绝对值

2.2.6 min()函数、max()函数

  1. min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数

  2. max() 函数和 min() 函数一样，不同的是，max() 函数用来获取一系列数中的最大那个值

    注意：不过在函数中同时出现两种不同类型的单位，将会报错误信息

2.2.7 random()函数

​ random() 函数是用来获取一个随机数

3. 列表函数

3.1 列表参数的函数使用

  1. length($list)：返回一个列表的长度值；

    length() 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

  2. nth($list, $n)：返回一个列表中指定的某个标签值，从1开始

  3. join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表，不过 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错；

join() 函数中还有一个很特别的参数$separator，这个参数主要是用来给列表函数连接列表值时，使用的分隔符号，默认值为 auto，join() 函数中 $separator 除了默认值 auto 之外，还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔

>> join((blue green),(red,orange),comma)
(#0000ff, #008000, #ff0000, #ffa500)
>> join((blue green),(red,orange),space)
(#0000ff #008000 #ff0000 #ffa500)
  1. append($list1, $val, [$separator])：将某个值放在列表的最后；
>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
  1. zip($lists…)：将几个列表结合成一个多维的列表；

在使用zip()函数时，每个单一的列表个数值必须是相同的

  1. index($list, $value)：返回一个值在列表中的位置值。第一个值就是1

在 index() 函数中，如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false，相反就会返回对应的值在列表中所处的位置

3.2 Introspection函数

  1. type-of($value)：返回一个值的类型

  2. unit($number)：返回一个值的单位

    碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算，但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外

    >> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"
>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"

  3. unitless($number)：判断一个值是否带有单位

  4. comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并，如果可以返回的值为 true，如果不可以返回的值是 false

3.3 Miscellaneous函数

​ Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：if($condition,$if-true,$if-false)

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px
3.4 Map

​ 首先有一个类似于 Sass 的变量一样，用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号

// 在 Sass 中常用下面的方式定义变量
$default-color: #fff !default;
$primary-color: #22ae39 !default;
// 使用 map 可以更好的进行管理：
$color: (
    default: #fff,
    primary: #22ae39
);
3.5 Maps的函数

  1. map-get($map,$key)：根据 $key参数，返回 $key在$map中对应的 value 值。如果$key不存在 $map中，将返回 null 值。

  2. map-merge($map1,$map2)：将两个 map 合并成一个新的 map。

    $color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);
// 如果希望将这两个 $map 合并成一个 map，我们只要这样做：
$newmap: map-merge($color,$typo);
// 将会生成一个新的 map:
$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6
);

    注意：如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的

  3. map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。

    如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样

  4. map-keys($map)：返回 map 中所有的 key。

  5. map-values($map)：返回 map 中所有的 value。值与值之前同样用逗号分隔

  6. map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

  7. keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。参数也是成对出现，其中$args变成 key(会自动去掉$符号)，而 $args对应的值就是value。

    @mixin map($args...){
    @debug keywords($args);
}
@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);
// 在命令终端可以看到一个输入的 @debug 信息：
 DEBUG: (dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee)

4. Sass的函数功能-颜色函数

4.1 RGB颜色函数

  1. rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

  2. rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

    rgba($color,$alpha) ：将一个Hex颜色转换成rgba颜色；

  3. red($color)：从一个颜色中获取其中红色值；

  4. green($color)：从一个颜色中获取其中绿色值；

  5. blue($color)：从一个颜色中获取其中蓝色值；

  6. mix($color-1,$color-2,[$weight])：把两种颜色混合在一起

    $weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%

$ sass -i	// 在命令终端开启这个命令，相当于开启 Sass 的函数计算。
>> 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颜色值中得到绿色值 40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)
4.2 HSL函数

  1. hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；

  2. hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；

  3. hue($color)：从一个颜色中获取色相（hue）值；

  4. saturation($color)：从一个颜色中获取饱和度（saturation）值；

  5. lightness($color)：从一个颜色中获取亮度（lightness）值；

  6. adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；这个度数值是在 -360deg 至 360deg 之间

  7. lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

    亮度值可以是 0~1 之间，不过常用的一般都在 3%~20% 之间，当颜色的亮度值接近或大于 100%，颜色会变成白色；反之颜色的亮度值接近或小于 0 时，颜色会变成黑色。

  8. darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；

  9. saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色

  10. desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；

  11. grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);

  12. complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);

  13. invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变

$ sass -i
>> hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色
#7aa3b8
>> hsla(200,30%,60%,.8)//通过h200,s30%，l60%,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颜色变成灰色
#99999
>> complement(#f36)
#33ffcc
>> invert(#f36)
#00cc99
4.3 Opacity函数
  1. alpha($color) /opacity($color)：获取颜色透明度值；
  2. rgba($color, $alpha)：改变颜色的透明度值，第一个参数为颜色，第二个参数是你需要设置的颜色透明值；
  3. opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度；
  4. transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明，这两个函数会让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明。
$ sass -i
>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8
>> rgba(red,.5)
rgba(255, 0, 0, 0.5)
>> rgba(rgb(34,45,44),.5)
rgba(34, 45, 44, 0.5)
>> opacify(rgba(22,34,235,.6),.2)
rgba(22, 34, 235, 0.8)
>> fade-in(rgba(23,34,34,.5),.15)
rgba(23, 34, 34, 0.65)
>> transparentize(rgba(98,233,124,.3),.11)
rgba(98, 233, 124, 0.19)
>> fade-out(hsla(98,6%,23%,.5),.6)
rgba(58, 62, 55, 0)
4.4 颜色函数实战-七色卡

https://www.imooc.com/code/8429

5. sass的@规则

5.1 @import

​ @import 根据文件名引入。 默认情况下，它会寻找 Sass 文件并直接引入， 但是，在少数几种情况下，它会被编译成 CSS 的 @import 规则：

  • 如果文件的扩展名是 .css。
  • 如果文件名以 http:// 开头。
  • 如果文件名是 url()。
  • 如果 @import 包含了任何媒体查询（media queries）。

​ 如果上述情况都没有出现，并且扩展名是 .scss 或 .sass， 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名， Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入

// 两者都将引入 foo.scss 文件， 而
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
// 也可以通过一个 @import 引入多个文件。例如：
@import "rounded-corners", "text-shadow";
// 引入一个SCSS或Sass文件，但不希望被编译成css文件，在文件名前面加下划线"_"
// 有一个文件叫做 _colors.scss。 这样就不会生成 _colors.css 文件了， 而且你还可以这样做：
@import "colors";//不用加下划线
// 注意，在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如， _colors.scss 不能与 colors.scss 并存

嵌套@import

// 假设要引入的样式文件`example.scss`文件中包含这样的代码：
.example {
  color: red;
}
// 然后这样引用：
#main {
  @import "example";
}
// 编译出来的 CSS：
#main .example {
  color: red;
}
5.2 @media
  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; } }
5.3 @extend

​ Sass 中的 @extend 是用来扩展选择器或占位符

https://www.imooc.com/code/8802

5.4 @at-root

​ @at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}
// 编译出来的CSS
.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}
5.5 @debug

​ @debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug

@debug 10em + 12em;
// 会输出：
Line 1 DEBUG: 22em
5.6 @warn
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}
5.7 @error
@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}
.test {
  @include error(15);
}
// 编译的时候：
你需要将15值设置在10以内的数 on line 7 at column 5
栀虞子
关注
专栏目录
Sass基本特性--运算（加法、减法、乘法、除法、变量运算、数字运算、颜色运算、字符运算）
幸福滴嘴角上扬的博客
09-06 1万+
Sass基本特性--运算（加法、减法、乘法、除法、变量运算、数字运算、颜色运算、字符运算）基础总结
sass学习笔记
反手一个bug的博客
01-20 158
文章目录css功能扩展嵌套规则父选择器&属性嵌套sassScript变量数据类型字符串插值语句变量定义！default@import@media@extend@extend-Only选择器在指令中延伸控制指令@if@for@each@while混合指令定义混合指令引用混合样式@include参数参数变量函数指令 css功能扩展 嵌套规则 sass允许将一套css样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，嵌套功能避免了重复输入父选择器 #main p{ color: #0
Sass函数:数字函数-round()函数
weixin_34337265的博客
05-29 693
round() 函数可以将一个数四舍五入为一个最接近的整数： >> round(12.3) 12 >> round(12.5) 13 >> round(1.49999) 1 >> round(2.0) 2 >> round(20%) 20% >> round(2.2%) 2% >> r...
element-plus （修改主题色 & button新增自定义属性修改样式）
吴冬雪的博客
03-07 8538
styles ->element_theme.less :root { --el-color-primary: #F74023; // 主题色 } // 分页左右箭头居中显示 .el-pagination .btn-prev .el-icon, .el-pagination .btn-next .el-icon { margin: auto; } // 表格操作列 无数据时总有一条线问题 .el-table__fixed-right { height: -webkit-fill-av.
学习笔记之SCSS
皆凡人的博客
06-29 1728
一、变量 $btn-bg : darken(#fff, 6.5%) !default; $btn-bg : darken(#000, 6.5%); //重写就会覆盖，无论顺序是什么样的 $btn-border : darken($btn-bg, 5%) !default; .btn-primary{ $btn-bg : darken(#00f, 6.5%); //定义局部变量 ba...
CSS3 十六进制透明度
黄彪博客
02-13 1748
公司使用 sketch 做“高保真”设计，UCD 比较喜欢 “透明”的效果，每次复制 CSS 样式，就会出现 16进制的背景色，然后还有透明度，例如。#00143b 颜色的透明度是 80（十六进制），不透明是 FF, 全透明是00，因此 80的透明度是 相当于全透明的 50%解决办法： 将背景色的 16进制全部改为 十六进制颜色码转换成RGB颜色值；然后再使用 rgba() 函数。缺点：觉得效率太低了，需要每个都复制到工具网站去计算。
Sass学习笔记-Sass快速入门04
01-08
文章目录一、Map与相关函数1.1定义Map类型数据1.2 map-get(参数1，参数2) 可以根据键来得到值1.3 map-keys(参数1) 返回对象当中的所有key1.4 map-values(参数1) 返回对象当中所有的value1.5 map-has-key(参数1,参数2...
Sass学习笔记.md
09-14
Sass学习笔记.md
07-Sass语法学习笔记.md
09-01
07-Sass语法学习笔记
Sass：基础用法学习笔记
最新发布
2401_84152928的博客
04-20 813
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽源码讲义、实战项目、讲解视频，并且会持续更新！**
Sass关于颜色函数的乐趣
weixin_30765475的博客
11-23 165
阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中，定义了很多现成的函数，可供我们使用。在最初使用Sass的时候，用的最多的颜色函数就是lighten($color, $amount)和darken($color, $amoun...
尚硅谷---Bootstrap
Father_Of_Soft的博客
01-18 237
尚硅谷Bootstrap同步笔记，方便您预习复习。内含容器、栅格系统等源码分析，帮助您深入理解Bootstrap~还有海量实例，方便您随时练手~
sass中 变量参与计算无效
Dream
06-30 821
在使用calc计算的时候，变量无法参与计算 使用#{} 则可以如下使用 $inputWidth:240px; width: calc(#{$inputWidth} - 70px); 千里之行 始于足下
JS颜色十六进制转换为rgb或rgba
weixin_34254823的博客
03-08 1135
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap自定义
eyugod的博客
07-11 555
http://getbootstrap.com/customize/ config.json {   "vars": {     "@gray-base": "#000",     "@gray-darker": "lighten(@gray-base, 13.5%)",     "@gray-dark": "lighten(@gray-base, 20%)",     "@gr
Bootstrap栅格布局解析
mantou_riji的博客
05-10 3047
文章目录栅格布局初始栅格栅格布局源码栅格布局源码分析流体容器&固定容器公共样式@grid-gutter-width：槽宽，设置栅格中的padding值，防止文字紧贴固定容器的栅格样式栅格行的定义栅格列的定义make-grid-columns()——设置列的padding、positionmake-grid——设置列的float，width栅格布局使用栅格实例bootstrap组件的使用缩略图需求：响应式布局换行的时候想要从前面掉下去 栅格布局 初始栅格 栅格布局默认将一行分成12列，Bootstra
浅学一下bootstrap
欢迎光临我的主页
04-23 673
Bootstrap 容器 流体容器 class="container-fluid" width: auto 固定容器 class="container" 固定容器特性 //阈值 @screen-xs: 480px; @screen-xs-min: @screen-xs; @screen-phone: @screen-xs-min; @screen-sm: 768px; @screen
Sass的控制命令（判断、循环）
YYece的博客
06-01 3763
Sass中控制命令指的是@if、@each、@for和@while。具有一定的逻辑判断和循环遍历能力，这个对于懂JavaScript或者后端语言的同学来说一点都不难。但在CSS中是不可思议的一件事情，最起码到目前为止是不太可能的事情。但在Sass这样的CSS预处理器语言中实现了。 @if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else
Scss“进阶篇”1（速度围观！）
weixin_42500431的博客
08-08 250
@if @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if…@else… 来判断传进参数的值来控制 display 的值。如下所示： //SCSS...
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值