你的位置:首页 > 网页设计

[网页设计]Sass 基础(五)


@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 <start> through <end>
    @for $i from <start> to <end>
    $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中的 <end> 取值不同。配合 through 的 <end> 值是 12,
    其遍历出来的终点值也是 12,和 <end> 值一样。配合 to 的 <end> 值是 13,其遍历出来的终点值是 12,
    就是 <end> 对就的值减去 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 <list>
  例如:
    @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 的整数;