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

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


join() 函数
   join()函数是将两个列表连接合并成一个列表。
   >>join(10px 20px, 30px 40px)
      (10px 20px 20px 40px)
   >>join((blue,red),(#abc,#def))
      (#0000ff,#ff0000,#aabbcc,#ddeeff)
   不过join()只能将两个列表连接成一个列表,如果直接连接两个以上的列表将会报错
   将多个join()函数合并在一起使用
   >>join((blue red),join((#abc #def),(#dee #eff)))
    (#0000ff #ff0000 #aabbb)
   在join()函数中还有一个特别的的参数$separator,这个参数主要是用来给列表函数连接列表值是,使用的
   分割符号,默认为auto.
   join()函数中$separator 除了默认值auto之外。还有comma 和space 两个值,其中comma指定列表中的列表
        值之间使用空格(,)分割。space 值指定列表中的列表项之间使用空格() 分割。
   在join()函数中除非明确指定了$separator值,否则将会有多种情形发生
   如果列表中的第一个列表中每个值之间使用的是逗号(,)那么join()函数合并的列表中每个列表项之间使用的逗号,分割:
   >> join((blue, red,#fff),(green orange))
    (#0000ff,#ff0000,#eeffff,#08000,#ffa500)
   但当第一个列表中只有一个列表项,那么 join() 函数合并的列表项
   目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用
   的,如果第二列表项中使用是,分隔,则使用逗号分隔;如果第二列
   项之间使用的空格符,则使用空格分隔:
     >>join(blue,(green,orang))
       (#0000ff,#008000,#ffa500)
   >>join((blue green),(red orange))
      (#0000ff #008000 #ff0000 #ffa500)
   如果当两个列表中的列表项小于1时,将会以空格分隔:
  >>join(blue,red)
    (#0000ff #ff0000)

    append()函数
    ppend()函数是用来将某个值插入到列表中,并且处于最末位
  >>append(10px 20px ,30px)
    (10px 20px 30px)
  >>append((10px,20px),30px)
    (10px,20px,30px)
  >>append(green,red)
    (#008000 #ff0000)
  >>append(red,(greenblue))
    (#ff0000(#008000, #0000ff))
  如果没有明确的指定$separator 参数值,其默认值是auto
  如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。
  如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔;
  如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。
  当然,在append()函数中,可以显示的设置$separator 参数,
  如果取值为comma 将会以逗号分隔列表项
  如果取值为space将会空格分隔列表项
  >>append((blue green),red,comma)
     (#0000fff,#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,space)
    (#0000ff #ff0000)
zip()函数
  zip()函数将多个列表值转成一个多维的列表:
  >>zip(1px 2px 3px,solid dashed dotted,green blue red)
    ((1px "solid" #008000),(2px "dashed" #0000ff),(3px "dotted" #ff0000))
  在使用zip(1px 2px 3px,solid, green blue red)
    NoMethodError:undefined method 'options=' fornil:NilClass
  Use --trace for backtrace
    zip() 函数组合出来就成了
      1px solid green, 2px dashed blue, 3px dotted red
index()函数
    index()函数类似于索引一样,主要让你找到某个值在列表中所处的位置。在Sass 中,第一个值就是1
    第二个值就是2,以此类推:
    >> index(1px solid red,1px)
      1
    >>index(1px solid red, solid)
      2
    >>index(1px solid red, red)
      3
    在index() 函数中,如果指定的值不在列表中(没有找到相应的值),那么返回的值将是false, 相反就会返回对应的
    的值在列表中所处的位置。
    >> index(1px solid red,dotted) //列表中没有找到 datted
      false
    >>index(1px solid red, solid) //列表中找到solid 值并且返回的他的位置是2
      2
Introspection 函数
  Introspection 函数的包括几个判断型函数。
  type-of($value):返回一个值的类型
  unit($number): 返回一个值的单位
  unitless($number)判断一个值是否带有单位
  comparable($number-1,$number-2); 判断两个值是否可以做加,减合并。
  Introspection 函数 -type-of()
    type-of()函数主要是用来判断一个值是属于什么类型:
  返回值:
    number 为数值类型。
    string 为字符串类型
    bool为布尔类型
    color为颜色类型
    >> type-of(100)
      “number”
    >>type-of(100px)
      "number"
    >>type-of("asdf")
      "string"
    >>type-of(asdf)
      "string"
    >>type-of(true)
      "bool"
    >>type-of(false)
      "bool"
    >>type-of(#fff)
      "color"
    >>type-of(blue)
      "color"
    >>type-of(1/2 =1)
      "string"
unit() 函数
    unit()函数主要是用来获取一个值所使用的的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”
    的值,不过只许乘除运算
    >>unit(100)
      ""
    >>unit(100px)
      "px"
    >>unit(20%)
      "%"
    >>unit(1em)
      "em"
    >>unit(10px * 3em)
      "em * px"
    >>unit(10px * 2em /3cm /1rem)
      "em/rem"
    但加,减碰到不同单位时,unit() 函数将会报错,除px 与cm ,mm 运算之外
    >>unit(1px + 1cm)
      "px"
    >>unit(1px -1cm)
      "px"
    >>unit(1px +1mm)
      "px"
   unit()函数对于单位运算相对来说也没有规律,而且有些单位也无法合并成一个单位,对于我们在css 中不并不合适
    >> unit(10px * 3em)
      "em * px"
    >> unit(10px / 3em)
      "px/em"
    >>unit(10px * 2em / 3cm / 1rem)
      "em/rem"
unitless()函数
    unitless() 函数相对来说简单明了些,只是用来判断一个值时候带有单位
    如果不带单位返回的值为true,带单位返回的值为flase;
  >>unitless(100)
    true
  >> unitless(100px)
    false
  >>unitless(100em)
    false
  >>unitless(100%)
    false
  >>unitless(1/2)
    true
  >>unitless(1/2 +2)
    true
  >>unitless(1px /2 +2)
    false
comparable() 函数
    comparable()函数主要是用来判断两个数是否可以进行 加 ,减 以及合并,如果可以返回值为true ,如果不
    可以返回的值为false;
    >>comparable(2px,1px)
      true
    >>comparable(2px,1%)
      false
    >>comparable(2px,1em)
      false
    >>comparable(2rem,1em)
      false
    >>comparable(2px,1cm)
      true
    >>comparable(2px,1mm)
      true
    >>comparable(2px,1rem)
      false
    >>comparable(2cm,1mm)
      true
Miscellaneous 函数
    在这里吧Miscellaneous 函数称为第三元条件函数,主要因为他和JavaScript
    中的三元判断非常的相似,他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值。
    if($condition,$if-true,$if-false)
    上面表达式的意思是当 $condition 条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。
    >>if(true,1px,2px)
      1px
    >>if(false,1px,2px)
      2px
      Map
    Sass的map 常常被称为数据地图,也有人称其为数组,因为他总是以key:value 成对的出现,单其更像是JSON数据
      {
        "employees":[
          {"firstName":"John","lastName":"Doe"},
          {"firstName":"Anna","lastName":"Smith"}
          {"firstName":"Peter","lastName":"Jones"}
        ]
    }
    那么Sass 的map长得与JSON极其相似:
    $map:{
      $key1:value1,
      $key2:value2,
      $key3:value3,
    }

    首先由一个类似于Sass的变量一样,用个¥加上命名空间来声明map.后面紧接着是一个小括号().
    将数据是一个小括号(),将数据以key:value的形式赋予,其中key 和value是成对出现,并且每对之间使用
    逗号(,)分隔,其中最后一组后面没有逗号。
    其中键 key 是用来查找相关联的值 value。使用 map 可以很容易
    收集键的值和动态插入。我们来回忆一下,在 Sass 中常用下面的方式定义变量:
    $default-color:#fff !default:
    $primary-color:#22ae39 !default;
    我们使用map可以更好的进行管理:
      $color:(
        default:#fff,
        primary:#22ae39,
      negative:#d9534f
    );
    对于Sass 的map,还可以让map 嵌套map其实就是map 的某一个key当成map,里面可以继续
    放一对或者多对key:value;
    $map:(
      key1:value1,
      key2:(
        key-1:value-1,
        key-2:value-2,
      ),
      key3:value3
    );
  用此功能来管理颜色的变量就非常的有条理性。
  $them-color:(
      default:(
        bgcolor:#fff,
        text-color:#444,
        link-color:#39f
    ),
  primary:(
      bgcolor:#000,
      text-color:#fff,
      link-color:#93f
  ),
  negative:(
      bgcolor:#f36,
      text-color:#fefefe,
      link-color:#d4e
    )
  );
Sass Maps的函数
    前面介绍了使用map 来管理变量,但要在Sass 中获取变量,或者对map做更多有意的操作,我们必须
    借助 map的函数功能 在Sass 中map 自身带了七个函数:
    map-get($map,$key) 根据给定的key值,返回map 中相关的值
    map-merge($map1,$map2):将两个 map 合并成一个新的map
    map-remove($map,$key):从map 中所有的key
    map-keys($map):返回map 中所有的key
    map-values($map):返回map 中所有的value
    map-has-key($map, $key): 根据给定的key 值判断,map 是否有对应的value值
    如果有返回true,否则返回false
    keywords($args):返回一个函数的参数,这个参数可以动态的设置key 和value.
    Sass Maps的函数-map-get($map,$key)
    map-get($map,$key) 函数的作用是根据$key参数,返回$key 在$map 中对应的value
    如果$key不存在的$map中,将返回null 此函数包括两个参数:
    $map:定义好的map
    $key:需要遍历的key.
    来看一个简单的示例,假设定义了一个$social-colors 的map:
      $social-colors:(
          dribble:#ea4c89,
          facebook:#3b5998,
          github:#171515,
          google:#db4437,
          twitter:#55acee
        );
    假设要获取facebook 键值对应的值#3b5998,我们就可以使用map-get() 函数来实现;
    .btn-dribble{
        color:map-get($social-colors,facebook);
    }
    编译出来的CSS:
    .btn-dribble{
        color:#3b5998;
      }
    我们来看另一种情况,假设 $social-colors 这个 map 没有 $weibo 这个 key:
    .btn-weibo{
        font-size:12px;
        color:map-get($soscial-colors,weibo);
    }
    此时编译出来的是CSS:
    .btn-weibo{
        font-size:12px;
    }
Sass Maps 的函数-map-has-key($map,$key)
  map-has-key($map,$key) 函数将返回一个布尔值,当$map 中有这个$key,则函数返回true,否则返回false
  前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值
  但对于开发人员,并看不到任何提示信息。如果使用 map-has-key($map,$key) 函数就可以改变这一状态。
  @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."
      }
    编译出来:
    .btn-fackbook{
        color:#3b5998;
    }
  有了这个函数我们就可以这样使用。
  .btn-dribble{
      color:colors(dribble);
    }
  .btn-facebook{
      color:colors(facebook)
  }
  .btn-github{
      color:colors(github);
  }
  .btn-google{
      color:color(google)
  }
  .btn-twitter{
      color:colors(twitter)
  }
  .btn-weibo{
    color:colors(weibo)
  }
  编译出来的css
  .btn-dribble{
      color:#ea4c89;
  }
  .btn-facebook{
      color:#3b5998;
  }
  .btn-github{
      color:#171515;
  }
  .btn-google{
      color:#db4437;
  }
  .btn-twitter{
      color:#55acee;
  }
Sass Maps 的函数-map-keys($map)
    map-keys($map) 函数将会返回$map 中的所有的key. 这些值赋予一个变量,那么他就是一个列表。
    map-keys($social-colors);
    其返回的值为:
      "dribble","facebook","github","goole","twitter"
    换句话说:
      $list:"dribble","facebook","github","twitter";
    这个时候,可以配合Sass 的list 做很多事情。
    @function colors($color){
        $names:map-keys($social-colors);
        @if not index($names,$color){
        @warn "Waring:" '#{$color} is not a valid color name.'";
      }
        @return map-get($social-color,$color);
    }
    上面代码中最不同之处,我们使 用map-key s将 $social-colors
    这个 map 的所有 key 取出,并赋予给一个名 为 $names 的列表
    然后通过 index($names,$color) 返回 $color 在 $names 位置
    如果这个位置不存在,将返回提示信息,如果存在将返回正确的值。
    .btn-weibo{
      color: colors(weibo);
    }
Sass Maps的函数-map-values($map), map-merge($map1,$map2)
    map-values($map)
    map-values($map) 函数类似于 map-keys($map) 功能,不同的是map-values
    ($map) 获取的是$map 的所有value 值,可以说也是一个列表,而且,map-values($map)
    中如果有相同的value 也将会全部获取出来。
    如前面的示例 使用:
      map-values($social-colors)
    将会返回:
      #ea4c89, #3b5998,#171515,#db4437,#55acee
    值与值之前同样用逗号分隔。
      map-merge($map1,$map2)

      map-merge($map1,$map2)
      map-merge($map1,$map2) 函数是将$map1和$map2 合并,然后等到一个新的$map. 如果你要快速将新的值导入到$map
    中的话,这种方法是最佳方法,假设我们有两个$map:
      $color:(
          text:#f36,
          link:#f63,
          border:#ddd,
          backround:#fff;
      )
    $typo:(
      font-size:12px,
      lin-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
    );
Sass Maps 的函数-map-remove($map,$key),keywords($args)
    map-remove($map,$key)
    map-remove($map,$key)函数是用来删除当前$map中的某一个$key,从而得到一个新的
    map,其返回的值是一个map.他并不能直接从一个map 中删除另一个map,仅能通过删除
    map中的某个key 得到新的map
    $map:map-remove($social - colors,dribble);
    返回的是一个新map
      $map:(
        facebook:#3b5998,
        github:#171515,
        google:#db4437,
        twitter:#55acee
      );
     keywords($args)
     keywords($args)
    keywords($args) 函数可以通过混合宏或函数的参数变创建map.
    参数也是成对出现,其中$args 变成key(会自动去掉$符号),而
    $args对应的的值是value.
    @mixin map($args...){
        @debug keywords($args);
      }
    @include map(
        $dribble: #ea4c89,
        $facebook:#3b5998,
        $github:#171515,
        $google:#db4437,
        $twitter:#55acee
);