SCSS进阶

作者: 恰皮 | 来源:发表于2016-11-04 21:08 被阅读1523次

1. @if

@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;
}

2.@for

@for $i from 起始值 through 结束值  //包括结束值
@for $i from 起始值 to 结束值  //不包括结束值

$i 表示变量

使用through的例子：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译出来的css：

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

使用to的例子：

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译出来的css：

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

@for 循环在网络系统生成各个格子class的代码：

$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 12 {
  .#{$grid-prefix}#{$i}{
    width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
  }  
}

编译出来的css：

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}
.span1 {
  width: 60px;
}
.span2 {
  width: 140px;
}
.span3 {
  width: 220px;
}
.span4 {
  width: 300px;
}
.span5 {
  width: 380px;
}
.span6 {
  width: 460px;
}
.span7 {
  width: 540px;
}
.span8 {
  width: 620px;
}
.span9 {
  width: 700px;
}
.span10 {
  width: 780px;
}
.span11 {
  width: 860px;
}
.span12 {
  width: 940px;
}

3. @while 循环

$types: 4;
$type-width: 20px;
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出来的css：

.while-4 {
  width: 24px;
}
.while-3 {
  width: 23px;
}
.while-2 {
  width: 22px;
}
.while-1 {
  width: 21px;
}

4.@each

$list: adam john wynn mason kuroir;//$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; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

5. sass函数

5.1 字符串函数

5.1.1 unquote() 和 quote()

unquote($string):删除字符串中的引号，只能删除最外层的引号，不能删除里层的引号；如果原字符串不包含引号，则返回原字符串；
quote($string):给字符串添加引号；如果自带引号了就会同意换成双引号。如果字符串中间有单撇号或者空格或者特殊符号（！、？、>等除了中折号-和下划线_）时，就要自行用单引号或者双引号括起来，否则会报错。

.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; }

.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: "";
}

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

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

.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

编译后的css：

.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

To-lower-case() 函数将字符串转换成小写字母。

.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

编译后的css：

.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

5.2 数字函数

percentage($value)：将一个不带单位的数转换成百分比值；

percentage(.2)//20%
percentage(2px / 10px)//20%
percentage(2em / 10em)//20%

round($value)：将数值四舍五入，转换成一个最接近的整数；

.footer {
   width:round(12.3px)//12px;
}

ceil($value)：将大于自己的小数转换成下一位整数；
floor($value)：将一个数去除他的小数部分；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值(参数中的单位要相同）；

min(1,2,1%,3,300%)//1%
min(1px,2,3px)//1px
min(1em,2em,6em)//1em
min(1%,2px);//错误
min(1px,2em);//错误

max($numbers…)：找出几个数值之间的最大值(参数中的单位要相同）；
random(): 获取随机数。

5.3 列表函数

length($list)：返回一个列表的长度值；函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错；

length(10px)//1
length(10px 20px (border 1px solid) 2em)//4
length(border 1px solid)//3

nth($list, $n)：返回一个列表中指定的某个标签值,索引值1就是列表的第一个值，而不是索引值0是第一个值，所以$n必须是大于0的整数；

nth(10px 20px 30px,1)//10px
nth((Helvetica,Arial,sans-serif),2)//"Arial"
nth((1px solid red) border-top green,1)//(1px "solid" #ff0000)

join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错；如果要连接多个列表，可以用多个join。[$separator]是指定列表项之间的分隔符，默认值是auto，使用时最好指定这个参数，可选项有“comma”（逗号）和“space”（空格）

join(blue,red,comma)//(#0000ff, #ff0000)
join(blue,red,space)//(#0000ff #ff0000)
join((blue green),(red,orange),comma)//(#0000ff, #008000, #ff0000, #ffa500)
 join((blue green),(red,orange),space)//(#0000ff #008000 #ff0000 #ffa500)
join((blue, green),(red,orange),comma)//(#0000ff, #008000, #ff0000, #ffa500)
join((blue, green),(red,orange),space)//(#0000ff #008000 #ff0000 #ffa500)
join(blue,(red,orange),comma)//(#0000ff, #ff0000, #ffa500)
join(blue,(red,orange),space)//(#0000ff #ff0000 #ffa500)
join(blue,(red orange),comma)//(#0000ff, #ff0000, #ffa500)
join(blue,(red orange),space)//(#0000ff #ff0000 #ffa500)

append($list1, $val, [$separator])：将某个值放在列表的最后；$separator指定分隔符，如果没有指定分隔符，默认值是auto，按照原来列表的分隔符分隔。可以用“comma”或者“space”指定分隔符为逗号或者空格。

append((blue green),red,comma)//(#0000ff, #008000, #ff0000)
append((blue green),red,space)//(#0000ff #008000 #ff0000)
append((blue, green),red,comma)//(#0000ff, #008000, #ff0000)
append((blue, green),red,space)//(#0000ff #008000 #ff0000)
append(blue,red,comma)//(#0000ff, #ff0000)
append(blue,red,space)//(#0000ff #ff0000)

zip($lists…)：将几个列表结合成一个多维的列表；在使用zip()函数时，每个单一的列表个数值必须是相同的：

zip(1px 2px 3px,solid dashed dotted,green blue red)
//((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index($list, $value)：返回一个值在列表中的位置值,如果指定的值不在列表中（没有找到相应的值），那么返回的值将是 false;

index(1px solid red, 1px)//1
index(1px solid red, solid)//2
index(1px solid red, red)//3

5.4 判断型函数

type-of($value)：返回一个值的类型
number 为数值型。
string 为字符串型。
bool 为布尔型。
color 为颜色型。
unit($number)：返回一个值的单位，乘除运算允许多个单位组合，加减运算不同单位会出错（除px与cm,mm运算之外）；

unit(100)//""
unit(100px)//"px"
unit(20%)//"%"
unit(1em)//"em"
unit(10px * 3em)//"em*px"
unit(10px / 3em)//"px/em"
unit(10px * 2em / 3cm / 1rem)//"em/rem"
unit(1px + 1cm)//"px"
unit(1px - 1cm)//"px"
unit(1px + 1mm)//"px"
unit(10px * 2em - 3cm / 1rem)//error
unit(10px * 2em - 1px / 1rem)//error
unit(1px - 1em)//error
unit(1px - 1rem)//error
unit(1px - 1%)//error
unit(1cm + 1em)//error

unitless($number)：判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false;
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并，如果可以返回的值为 true，如果不可以返回的值是 false；

5.5 三元条件函数

if($condition,$if-true,$if-false)//$condition为真，返回$if-true，$condition为假，返回$if-false;

6.Map

$map: (
    $key1: value1,
    $key2: value2,
    $key3: value3
)

map还可以嵌套，将其中一个key作为map：

$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

6.1 map的函数

map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值，如果 $key 不在 $map 中，在 Sass 中，返回 null 值，不会编译出 CSS。

$social-colors: (//定义一个map，名字叫做social-colors
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);//在$social-colors中找"facebook"作为color的值
}

编译为：

.btn-dribble {
  color: #3b5998;
}

map-merge($map1,$map2)：将两个 map 合并成一个新的 map，如果 $map1 和 $map2 中有相同的 $key 名，那么将 $map2 中的 $key 会取代 $map1 中的

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);
$newmap: map-merge($color,$typo);

将会生成一个新的 map:

$newmap:(
    text: #f36,
    link: #f63,
    border: #ddd,
    background: #fff,
    font-size: 12px,
    line-height: 1.6
);

map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map，如果删除的 key 并不存在于 $map 中，那么 map-remove() 函数返回的新 map 和以前的 map 一样。
map-keys($map)：返回 map 中所有的 key，如果把这些值赋予给一个变量，那就是一个列表；

$list: map-keys($social-colors);

相当于：

$list:"dribble","facebook","github","google","twitter";

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

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}

假设“facebook”存在$social-colors中，则编译出来：

.btn-fackbook{
    color: #3b5998;
}

如果把facebook打成了faceboo，不会编译出对应的css，但在命令终端可以看到提示信息：

WARNING: No color found for faceboo in $social-colors map. Property ommitted.
         on line 25 of test.scss

可以自定义一个函数：

@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}

使用这个函数：

.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
.btn-github {
    color: colors(github);
}

编译出来的css：

.btn-dribble {
  color: #ea4c89;
}
.btn-facebook {
  color: #3b5998;
}
.btn-github {
  color: #171515;
}

keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

7. 颜色函数

7.1 RGB颜色函数

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

7.2HSL函数

lighten() 和darken()

$baseColor: #ad141e;
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}

7.3 Opacity函数

alpha($color) /opacity($color)：获取颜色透明度值；
rgba($color, $alpha)：改变颜色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

SCSS进阶

1. @if

2.@for

3. @while 循环

4.@each

5. sass函数

5.1 字符串函数

5.1.1 unquote() 和 quote()

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

5.2 数字函数

5.3 列表函数

5.4 判断型函数

5.5 三元条件函数

6.Map

6.1 map的函数

7. 颜色函数

7.1 RGB颜色函数

7.2HSL函数

7.3 Opacity函数

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

大前端-万物皆可JS

华南理工大学无线电爱好者协会软件小组

前端那些事