欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Sass 基础(五) - 柠檬先生

程序员文章站 2022-05-07 15:19:15
...
@if
  @if 指令是一个SassScript,它可以根据条件处理样式块,如果条件为true返回一个样式块,反之
  false 返回另一个样式块,在Sass 中除了@if之,还可以配合@else if和eles 一起。
  例如:
    //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;
    }
@for循环(上)
    在Sass 的@for 循环中油两种方式:
    @for $i from through
    @for $i from to
    $i 表示变量
    start 表示起始值
    end 表示结束值
    这两个的区别是一个关键字,through 表示包括end 这个数,而to 则不包括end 这个数。
    如下代码,先来一个使用through 关键字。
    @for $i from 1 throug 3 {
      .item-#{$i} {
          width:2em *$i;
        }
     }
    编译出来css
    .item-1{
        width:2em;
      }
    .item-2{
      width:4em;
    }
    .item-3{
        width:6em;
    }
    在来一个to关键字的例子:
    @for $i from to 3 {
      .item-#{$i} { width:2em * $i;}
     }
    编译出来的css:
    .item-1{
      width:2em;
    }
    .item-2{
      width:4em;
    }
@for循环(下)
    @for 应用在网格系统生成各个格子class 的代码。
    //scss
      $grid-prefix: span !default;
      $grid-width:60px !defaulet;
      $grid-gutter:20px !defaulet;

    %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 *$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:400px;
      }
      .span7{
          width:540px;
      }
      .span8{
          width:620px;
      }
      .span9{
          width:700px;
      }
      .span11 {
        width: 860px;
      }

      .span12 {
        width: 940px;
      }
    将上面的示例稍做修改,将 @for through 方式换成 @for to::
      //scss
      @for $i from 1 to 13{
.        #{$grid-prefix}#{$i}{
          width:$grid-width * $i + $grid-grutter *($i -1);
          @extend %grid;
          }
      }
    这两段 Sass 代码并无太多差别,只是 @for中的 取值不同。配合 through 的 值是 12,
    其遍历出来的终点值也是 12,和 值一样。配合 to 的 值是 13,其遍历出来的终点值是 12,
    就是 对就的值减去 1
@while 循环
    @while指令也需要SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false
    时停止循环。这个和@for 指令很相似,只要@while 后面的条件为true就会执行。
    例如:
      //SCSS
      $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;
      }
@each循环
  @each循环就是去遍历一个列表,依然从列表中取出对应的值。
  @each 循环指令的形式:
  @each $var in
  例如:
    @mixin author-images{
      @each $author in $list {
        .photo-#{$author}{
          background:url("/images/avatars/#{$author}.png") no-repeat;
          }
      }
    }
  .anthor-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/wynn.png") no - repeat;
  }
    Sass的函数简介
    函数主要包括。
    字符串函数
    数字函数
    列表函数
    颜色函数
    Interospection函数
    三元函数等。
    字符串函数-unquote() 函数
    字符串函数顾名思义是用来处理字符串的函数,Sass 的字符串函数要包括两种。
    unquote($string): 删除字符串中的引号
    quote($string):给字符串添加引号。
1.unquote()函数。
    unquote() 函数主要是用来删除字符串的引号。如果这个字符串没有带引号,将返回原始的字符串
    //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代码
     // 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( ) 函数只能删除字符串最前和最后的引号(双引号或单引号),而无法删除字符串中间的引号。
    如果字符没有带引号,返回的将是字符串本身。
    字符串函数-quote()函数
      quote()函数刚好与unquote() 函数功能相反,主要用来给字符串添加引号。如果字符串,自身带有引号
    会统一换成双引号。
    // SCSS
    .test1{
        content: quote( 'Hello Sass!' );
      }
    .test2{
        content: quote("Hello Sass!")
    }
    .test3{
      content: quote(ImWebDesigner);
    }
    .test4{
      content: quote(' ');
    }
    编译出来的css 代码
    // css
    .test1{
        content: "Hello Sass!";
    }
    .test2{
        content: "Hello Sass!"
    }
    .test3{
      content: "ImWebDesigner";
    }
    .test4{
      content: "";
    }
    使用 quote() 函数只能给字符串增加双引号,而且字符串中间有单引号或者空格时,
    需要用单引号或双引号括起,否则编译的时候将会报错。
    字符串函数-To-upper-case(),To-lower-case()
    1.To-upper-case(),To-lower-case()
      To-upper-case()
     //SCSS
    .test {
        text:to-upper-case(aaaaa);
        text:to-upper-case(aA-aAAA-aaa);
    }
  编译出来的css 代码
    // CSS
    .test{
      text:AAAAA;
      text:AA-AAAA-AAA;
    }
2.To-lower-case()
  To-lower-case() 函数 与To-upper-case()刚好相反,将字符串转成小写字母。
  // SCSS
  .test{
      text: to-lower - cass(AAAAA);
      text: to-lower-case(aA-aAAA-aaa)
  }
  编译出来的 css 代码;
    //css
    .test{
      text: aaaaa;
      text:aa-aaaa-aaa;
    }
    数字函数简介
    Sass 中的数组函数要针对数字方面提供一系列的函数功能:
    percentage($value):将一个不带单位的数转换成百分比:
    round($value):将数值四舍五入,转换成一个最接近的整数;
    ceil($value):将大于自己的小数转换成下一位整数;
    floor($value):将一个数去除他的小数部分;
    abs($value):返回一个数的绝对值。
    min($numbers...) 找出几个数之间的最小值:
    max($numbers...)找出几个数值之间的最大值
    random() 获取随机数。
    数字函数-percentage()
1.percentage()
    percentage() 函数主要是将一个不带单位的数字转成 百分比形式:
    >> percentage(.2)
    20%
    >>percentage(2px / 10px)
    20%
    >>percentage(2em / 10em)
    20%
    >>
    .footer{
        width:percentage(.2)
    }
    编译后的css 代码;
    .footer{
      width:20%;
    }
数字函数-round() 函数
    round()函数可以将一个数四舍五入为一个最近的整数;
    >>round(12.3)
      12
    >> round(12.5)
      13
    >>round(1.499999)
      1
    >>round(20%)
      20%
    >>round(3.9em)
      4em
    >>round(2.3px)
      2px
    >>round(1px /3px)
      0
    >>round(3px / 2em)
      2px/em

      .footer{
          width:round(12.3px)
      }
    编译出来的css
    .footer{
        width:12px;
      }
数字函数-ceil()函数
    ceil()函数将一个数转换成最接近自己的整数,会讲一个大约自身的任何小数转换成大约本身1的整数,也就是只做入,不做舍的
    >> ceil(2.0)
      2
    >>ceil(2.1)
      3
    >>ceil(2.6)
      3
    >>ceil(2.3%)
      3%
    >>ceil(2.5px)
      3px
    >>ceil(2px / 3px)
      1
    >>ceil(2% / 3px)
      1%/px
    >>ceil(1em / 5px)
      1em/px

    .footer{
      width:ceil(12.3px);
    }
    编译后的css 代码:
  .footer{
      width:13px;
  }
  数字函数-floor()函数
    floor()函数刚好与ceil()函数功能相反,其主要将一个数去除其小数部分。并且不做任何的进位,也就是只做舍,不做入的计算。
  >> floor(2.1)
    2
  >> floor(2.5)
    2
  >>floor(3.5%)
    3%
  >>floor(10.2px)
    10em
  >> floor(10.2px)
    10px
  >>floor(10.8em)
    10em
  >>floor(2px / 10px)
    0
  >> floor(3px / 1em)
    3px /em
  .footer{
    width:floor(12.3px);
  }
  编译后的css代码
  .footer{
    width:12px;
  }

数字函数-abs() 函数
  abs()函数会返回一个数的绝对值。
  >>abs(10)
    10
  >>abs(-10)
    10
  >>abs(-10px)
    10px
  >>abs(-2em)
    2em
  >>abs(-.5%)
    0.5%
  >>abs(-1px / 2px)
    0.5
  .footer{
    width:abs(-12.3px)
  }
  编译后的css代码:
    .footer{
      width:12px;
    }
数字函数-min()函数,max()函数
  min() 函数功能主要是在多个数之中找到最小的一个,这个函数可以设置任意多个参数。
  >>min(1,2,1%,3.300%)
    1%
  >> min(1px,2,3px)
    1px
  >>min(1em,2em,6em)
    1em
  不过在min() 函数中同时出现两种不同类型的单位,将会报错误信息。
    >>min(1px, 1em)
      SyntaxError: Incompatible units:'em' and'px'.
max()函数
  max()函数和min函数一样,不同的是,max() 函数用来获取一系列书数中的最大那个值。
    >> max(1,5)
      5
    >>max(1px,5px)
      5px
    同样的,如果在max()函数中有不同的单位,将会报错:
    >> max(1,3px,5%,6)
      SyntaxError: Incompatible units: '%' and ‘px'.
    数字函数-random()函数
    random()函数是用来获取一个随机数。
    >> random()
      0.03886
    >>random()
      0.66527
    >> random()
      0.8125
    >>random()
      0.26839
    >>random()
    0.85065
列表函数介绍
      列表函数主要包括一些对列表参数的函数使用,主要包括以下几种形式。
      length($list):返回一个列表的长度值:
      nth($list,$n):返回一个列表中指定的某个标签值。
      join($list1,$list2,[$separator] ):将某个值放在列表的最后;
      zip($lists...);将几个列表结合成一个多维的列表:
      index($list,$value)返回一个值在列表中的位置值。
length()函数
  length()函数主要用来返回一个列表的中有几个值,简单点说就是返回列表清单中有多少个值:
  >>length(10px)
    1
  >>length(10px 20px (border 1px solid) 2em)
    4
  >>length(border 1px solid)
    3
  length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错;
  >> length(10px, 20px,(border 1px solid),2em)
    SyntaxError: wrong number of arguments(4 for 1) for'length
    nth($list,$n)
    nth()函数用来指定列表中某个位置的值,不过在Sass 中,nth()函数和其他语法不同,1 是指列表中的第一个标签值
    2 是指列表中的第二个标签值。
      >> nth(10px 20px 30px,1)
        10px
      >>nth((Helvetica,Arial,sans-serif),2)
        "Arial"
      >>nth((1px solid red) border-top green,1)
        (1px "solid" #ff0000)
      在nth($list,$n) 函数中的$n 必须是大于 0 的整数;