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

Sass 基础(六) - 柠檬先生

程序员文章站 2022-04-30 15:10:43
...
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
);