Nine Pedestrians Mesmerized
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    masspublic

    mass

    mass a css toolbox based on mcss(The new css preprocessor)

    mass提供大量的函数, 同时也是mcss的官方使用示例. 如果对于文档有疑惑,请参考MCSS主页, 也可以留言

    所有代码都可以黏贴到MCSS的try page可行尝试

    使用

    1. 安装mcss

    首先,确保你安装了nodejs 和 npm.

    npm install -g mcss

    2. 引入mass库

    直接import :

    mcss可以依赖远程mcss文件, (只要进程不退出, 远程文件会缓存在内存中, 比如开启了watch参数,这样只会在第一次build中会有载入开销), 我们可以很方便的引用网络上的mcss文件

    /* mass入口文件 */
    @import 'https://rawgithub.com/leeluolee/mass/master/mass/index.mcss';
     
    /* 此时你就可以使用mass的函数了 */
    .m-home{
      $transition: all .1s ease-in-out; 
    }

    目前github对于短期多次资源的http的加载会发生503的情况,建议把组件库放置在自己可以访问的位置

    本地使用时,你也可以将mass加入到你的include path(配置文件或命令),

    mcss --include path/to/mass_dir

    然后就只需要@import短名了

    @import 'mass/css3';
    @import 'mass/helper';

    文档目录

    1. css3.mcss(源码) —— 提供海量的css3的兼容处理(由于mcss的强大特性,其实没写多少代码)
    2. reset.mcss(源码) —— 提供多种reset函数, nec-reset, normalize ... etc
    3. helper.mcss(源码) —— 提供一些常用帮助函数,比如$clearfix等等
    4. layout.mcss(源码) —— 提供一些布局相关函数
    5. effect.mcss(源码) —— 提供一些常用的animation mixin, 并提供参数控制.
    6. functions.mcss(源码) —— 一些函数集合, mass的每个文件都或多或少依赖了这个函数
    7. var.mcss(源码) —— 全局变量, 目前只有两个
    8. index.mcss(源码) —— 以上所有子文件的入口文件, 你偷懒可以只引入这个文件

    需要注意的是 : mass中的所有文件都可以单独引入, 已经处理好了依赖关系。

    ## 使用文档 源码请看对应文件

    ### 1. css3.mcss

    css3主要是帮助我们无痛的使用css3特性,

    同名vendor prefixr:

    一些简单的vendor prefix占据了css3处理的大部分,参考的是这个在维护中的css浏览器实验列表

    Example

    .u-btn{
      /* 注意mcss同时支持两种函数调用方式 */
      $transition: background-color 0.1s ease-in-out;
      $box-sizing(border-box)
    }
     

    Outport

    .u-btn{
      -webkit-transition:background-color 0.1s ease-in-out;
      -moz-transition:background-color 0.1s ease-in-out;
      transition:background-color 0.1s ease-in-out;
      -webkit-box-sizing:border-box;
      -moz-box-sizing:border-box;
      box-sizing:border-box;
    }

    其它例如$box-sizing之类的也是一致,详细列表css3.file:L12

    • transition (webkit moz),
    • transition-delay (webkit moz),
    • transition-property (webkit moz),
    • transition-duration (webkit moz),
    • transition-timing-function (webkit moz),
    • animation (webkit moz),
    • animation-delay (webkit moz),
    • animation-name (webkit moz),
    • animation-direction (webkit moz),
    • animation-duration (webkit moz),
    • animation-fill-mode (webkit moz),
    • animation-iteration-count (webkit moz),
    • animation-timing-function (webkit moz),
    • columns (webkit moz),
    • column-count (webkit moz),
    • column-gap (webkit moz),
    • column-fill (webkit moz),
    • column-rule (webkit moz),
    • column-rule-color (webkit moz),
    • column-rule-style (webkit moz),
    • column-rule-width (webkit moz),
    • column-span (webkit moz),
    • column-width (webkit moz),
    • box-orient (webkit moz),
    • box-sizing (webkit moz),
    • box-pack (webkit moz),
    • box-align (webkit moz),
    • box-direction (webkit moz),
    • box-lines (webkit moz),
    • box-ordinal-group (webkit moz),
    • box-flex (webkit moz),
    • box-flex-group (webkit moz),
    • box-shadow (webkit moz),
    • transform null,
    • transform-origin null,
    • transform-style null,
    • perspective (webkit moz),
    • perspective-origin (webkit moz),
    • appearance (webkit moz ms o),
    • backface-visibility (webkit moz),
    • background-clip webkit,
    • background-origin webkit,
    • background-size webkit,
    • border-box (webkit moz),
    • box-shadow webkit,
    • user-select (webkit moz ms),
    • hyphens (epub moz ms),
    • filter (moz webkit);

    所有以上css3的参数与原样式一致


    $border-radius($radius, $direction)

    $border-radius 除了处理前缀, 可以传入额外参数控制位置,

    Arguments

    1. $radius —— 圆角半径
    2. $direction —— (可选) 圆角的位置 可以是角(top left) 也可以是边(top)

    Example

    .radius{
      $border-radius: 3px;
    }
    .radius-corner{
      $border-radius: 3px, top left;
    }
    .radius-side{
      $border-radius: 3px, top;
    }

    Outport

    .radius{
      -moz-border-radius:3px;
      border-radius:3px;
    }
    .radius-corner{
      -moz-border-top-left-radius:3px;
      border-top-left-radius:3px;
    }
    .radius-side{
      -moz-border-top-left-radius:3px;
      border-top-left-radius:3px;
      -moz-border-top-right-radius:3px;
      border-top-right-radius:3px;
    }

    $linear-gradient = ($direct, $color-stops...)

    线型渐变

    Argument

    1. $direct[可以选默认top] : 从哪个方向开始 如 top lefttop 或者以哪个角度 如 45deg 等;
    2. $color-staops: 颜色值列表, 可以加入百分比或长度 如 #fff 50%, #ccc 20px , color-stop可以有无限个;

    要点

    1. 总体就是参数与规范类似
    2. 默认会mix 最末和最先的颜色进行mix 作为ie低版本的fallback
    3. 如果是垂直或者水平渐变,比如 top bottom right 和 left 会生成ie下的滤镜形式,其它角度则不生成

    Exmaple

    $primary = #f6ffc1;
    .m-top{
      /* l-adjust 是调节亮度 */
      $linear-gradient: right, $primary , l-adjust($primary, 10%);
    }

    Outport

    .m-top{
      background-color:#faffdb;
      background-image:-webkit-linear-gradient(right,#f6ffc1,#fdfff4);
      background-image:-moz-linear-gradient(right,#f6ffc1,#fdfff4);
      background-image:-ms-linear-gradient(right,#f6ffc1,#fdfff4);
      background-image:-o-linear-gradient(right,#f6ffc1,#fdfff4);
      background-image:linear-gradient(to left,#f6ffc1,#fdfff4);
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfff4', endColorstr='#f6ffc1', GradientType=1) \9;
    }

    $radial-gradient = ($color-stops...)

    圆形渐变, 与线性渐变类似,不过这里color-stop的扩散方向是从圆点到外圈,

    Argument

    1. $color-stops: 从内向外的圆颜色层级, 一样可以加入百分比或长度值控制比例

    Exmaple

    .m-top{
      $radial-gradient: #aaa, #ccc 20%, #ddd 80%, #eee;
    }

    Outport

    .m-top{
      background-color:#ccc;
      background-image:-webkit-radial-gradient(ellipse,#aaa,#ccc 20%,#ddd 80%,#eee);
      background-image:-moz-radial-gradient(ellipse,#aaa,#ccc 20%,#ddd 80%,#eee);
      background-image:-ms-radial-gradient(ellipse,#aaa,#ccc 20%,#ddd 80%,#eee);
      background-image:-o-radial-gradient(ellipse,#aaa,#ccc 20%,#ddd 80%,#eee);
      background-image:radial-gradient(ellipse,#aaa,#ccc 20%,#ddd 80%,#eee);
      background-repeat:no-repeat;
    }

    $keyframes = ($name, $block)

    兼容浏览器的keyframs写法, 与@keyframes对应, mass同时利用它封装了effect.mcss

    Arguments

    1. $name —— keyframes 名称
    2. $block —— 传入的block函数, 这个函数接受的第一个参数是前缀, 大部分情况你不需要这个参数, 比如 -o-, -webkit-

    Example

    $block =  ($prefix){
        20%{
            #{$prefix}transform: scale(2.0,2.0);
        }
        to{
            #{$prefix}transform: scale(1.0,1.0);
        }
    }
     
    $keyframes(hello, $block);

    Outport

    @-webkit-keyframes hello{
      20%{
        -webkit-transform:scale(2,2);
      }
      to{
        -webkit-transform:scale(1,1);
      }
    }
    @-moz-keyframes hello{
      20%{
        -moz-transform:scale(2,2);
      }
      to{
        -moz-transform:scale(1,1);
      }
    }
    @-o-keyframes hello{
      20%{
        -o-transform:scale(2,2);
      }
      to{
        -o-transform:scale(1,1);
      }
    }
    @keyframes hello{
      20%{
        transform:scale(2,2);
      }
      to{
        transform:scale(1,1);
      }
    }

    $placeholder ($block)

    控制placeholder的样式

    参数: 一个block(即无参数的函数);

    示例:

    #input1{
      $placeholder({
        color:#090; 
        background:#fff; 
        text-transform:uppercase;
      });
    }
     
    // 在最外层调用
    $placeholder({
      color:#090; 
      background:#fff; 
      text-transform:uppercase;
    });
     

    输出

    #input1::-webkit-input-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    #input1::-moz-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    #input1:-moz-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    #input1:-ms-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
     
    ::-webkit-input-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    ::-moz-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    :-moz-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }
    :-ms-placeholder{
      color:#090;
      background:#fff;
      text-transform:uppercase;
    }

    $hidpi = ($block, $ratio = 1.5)

    由于处理高dpi的media query的兼容性问题

    Arguments

    1. $block -- 传入@media中的block
    2. $ratio —— device-pixel-ratio 默认1.5

    Example

    $hidpi({
        body{
            left: 10px;
        }
        p{
            right: 20px;
        }
    }, 2.0)
     

    Outport

    @media only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 2/1),
      only screen and (min-resolution: 192dpi),
      only screen and (min-resolution: 2dppx){
      body{
        left:10px;
      }
      p{
        right:20px;
      }
    }
     

    ### 2. reset.mcss 目前提供$reset-normalize$nec-reset 分别提供不同功能层级的reset需要,分别Copy自NECnormalize

    Exmaple

    @import 'mass/reset.mcss'
    $reset-nec();
    // or $reset-normalize();
     

    或者, 自动设置配置变量$include-reset 进行对应reset的include

    $include-reset = nec;
    @import 'mass/reset.mcss'

    Tips

    除了使用函数之外, 你可以在include 进reset 之前 设置 $ ?= false;

    ### 3. helper.mcss

    helper主要提供一些类似 $clearfix的帮助函数,帮助处理一些兼容性问题, 或者集合缩写

    $clearfix

    清除浮动, 这应该是最常用的mixin

    Example

    .container{
      $clearfix();
    }

    Outport

    .container{
      *zoom:1;
    }
    .container:before,.container:after{
      display:table;
      content:"";
      line-height:0;
    }
    .container:after{
      clear:both;
    }

    $size($width, $height)

    同时设置宽度以及高度,如果没有传入$height, 则高度默认为$width Argument

    1. $width: 宽度
    2. $height: 高度(可选)

    $opacity($opa)

    设置透明度,处理了ie的兼容性.

    Arguments

    1. $opa: 取值范围为0-1

    Example:

    .u-btn{
      $opacity: 0.1;
    }

    Outport:

    .u-btn{
      filter:alpha(opacity = 10);
      opacity:0.1;
    }

    $min-height($height)

    设置最小高度,主要是处理了IE6下的问题, 借鉴的是一般解决方案

    Example

    .g-sd{
      $min-height: 20px;
    }
     

    Outport

    .g-sd{
      min-height:20px;
      height:auto !important;
      _height:20px;
    }

    $txt-ellipsis($nowrap = true)

    文字超过出现省略号

    Arguments

    1. $nowrap : 是否不断行 ,默认为true

    Example

    td{
      $txt-ellipsis();
    }

    Outport

    td{
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
    }
     

    $display($type)

    display处理了有关display的兼容性问题, 比如inline-box, box.

    Example:

    body{
      $display: inline-block;
    }
    p{
      $display: box;
    }
     

    Outport:

    body{
      display:inline-block;
      vertical-align:baseline;
      zoom:1;
      *display:inline;
      *vertical-align:auto;
    }
    p{
      display:-webkit-box;
      display:-moz-box;
      display:box;
    }

    $font-face($name, $path, $block, $support-svg =false)

    处理@font-face

    Arguments

    1. $name—— 代表字体名
    2. $path—— 字体们的路径,需去掉后缀 ,如/path/to/monoco
    3. $block—— func,需混入的样式
    4. $support-svg —— 是否引入svg格式

    使用这个只是方便在一定约定下 引入各个格式的字体

    Exmaple

    $font-face('monaco','path/to/monaco', {
      font-weight: bold; 
      font-style: italic;
    });

    Outport

    @font-face {
      font-family:"monaco";
      src:url("path/to/monaco.eot");
      src:url("path/to/monaco.eot?#iefix") format("embedded-opentype"),url("path/to/monaco.woff") format("woff"),url("path/to/monaco.ttf") format("truetype");
      font-weight:bold;
      font-style: italic;
    }
     

    ### 4. layout.mcss

    layout处理一些常见的布局问题 , 以及栅格布局生成等功能, 目前只提供fixed-layout相关的mixin。 $fixed-layout$fixed-grid 以及 $fixed-container

    1. $fixed-layout($col-widths, $gap = 0px, $prefix = 'col')

    固定宽度的布局生成, 包括可以实现n栏自适应的布局, 小伙伴们说再也不怕忘记那些n栏自适应了

    Arguments

    1. $col-widths : 以空格分隔的宽度值, 可以有一个auto值,代表这栏是自适应的, 则这栏内部的col-cnt节点才是容器类

    2. $gap 栏间距

    3. 类名的前缀默认为 col, 即没栏的类名默认为col-n, 当某栏为自适应时,内部的容器类为col-cnt.

    Exmpale

    一个三栏中部自适应的例子

    .l-1{
      $fixed-layout: 200px auto 100px, 30px, g-mn;
    }
     

    Outport

    .l-1{
      *zoom:1;
    }
    .l-1:before,.l-1:after{
      display:table;
      content:"";
      line-height:0;
    }
    .l-1:after{
      clear:both;
    }
    .l-1 .g-mn-1{
      position:relative;
      float:left;
      width:200px;
    }
    .l-1 .g-mn-3{
      position:relative;
      float:right;
      width:100px;
      margin-left:30px;
    }
    .l-1 .g-mn-2{
      width:100%;
      float:left;
      margin-left:-200px;
      margin-right:-130px;
    }
    .l-1 .g-mn-2 .g-mn-cnt{
      position:relative;
      margin-left:230px;
      margin-right:130px;
    }

    对应的html应该是

    <div class="l-1">
      <div class="g-mn-1"></div>
      <div class="g-mn-2">
        <div class="g-mn-cnt">l-1</div>
      </div>
      <div class="g-mn-3"></div>
    </div>

    注意自适应栏的容器为g-mn-cnt, 而固定宽度栏为对应的下标容器节点

    当没有 自适应栏(即无auto的参数)时,会设置容器的宽度, 值为之前所有的宽度和以及间距和如

    .l-3{
      $fixed-layout: 200px 600px, 10px;
    }
    .l-3{
      *zoom:1;
      width:810px;
    }
    .l-3:before,.l-3:after{
      display:table;
      content:"";
      line-height:0;
    }
    .l-3:after{
      clear:both;
    }
    .l-3 .col-1{
      position:relative;
      float:left;
      width:200px;
    }
    .l-3 .col-2{
      position:relative;
      float:right;
      width:600px;
      margin-left:10px;
    }

    2. $fixed-grid($col-width, $gap=0px, $col-num=12, $prefix='')

    固定布局(基于px)的栅格系统生成, 一般用于整个产品的页面时

    Arguments

    1. $col-width 栏宽
    2. $gap 栏间距 默认为0
    3. 栏数目 默认为12
    4. 前缀 默认为''

    注意

    了解bootstrap2的同学可能了解这个栅栏布局结构, 生成的类型有两种, offsetspan, offset代表偏移的量, span代表此栏宽度, 例如 <div class='span1 offset2'></div> 是一个向右偏移两单位 宽度一单位的块

    另外同时生成两个类.row.container, row代表一行布局的开始, 而container的宽度即12栏总宽, 只要容器内的元素的总offset+span的数目等于栏数, 则撑满这个 container

    这些类都可以加入自定义前缀,比如NEC的g 命名

    Exmpale

    一键生成 bootstarp的栅格系统 940宽度 12栏,并且兼容ie6.

    $fixed-grid(60px, 20px, 12);

    Outport

    .span1,.span2,.span3,.span4,.span5,.span6,.span7,.span8,.span9,.span10,.span11,.span12{
      float:left;
      min-height:1px;
      margin-left:20px;
      display:inline;
    }
    .span1{
      width:60px;
    }
    .offset1{
      margin-left:100px;
    }
    .span2{
      width:140px;
    }
    .offset2{
      margin-left:180px;
    }
    .span3{
      width:220px;
    }
    .offset3{
      margin-left:260px;
    }
    .span4{
      width:300px;
    }
    .offset4{
      margin-left:340px;
    }
    .span5{
      width:380px;
    }
    .offset5{
      margin-left:420px;
    }
    .span6{
      width:460px;
    }
    .offset6{
      margin-left:500px;
    }
    .span7{
      width:540px;
    }
    .offset7{
      margin-left:580px;
    }
    .span8{
      width:620px;
    }
    .offset8{
      margin-left:660px;
    }
    .span9{
      width:700px;
    }
    .offset9{
      margin-left:740px;
    }
    .span10{
      width:780px;
    }
    .offset10{
      margin-left:820px;
    }
    .span11{
      width:860px;
    }
    .offset11{
      margin-left:900px;
    }
    .span12{
      width:940px;
    }
    .offset12{
      margin-left:980px;
    }
    .offset0{
      margin-left:0px;
    }
    .row{
      *zoom:1;
      margin-left:-20px;
    }
    .row:before,.row:after{
      display:table;
      content:"";
      line-height:0;
    }
    .row:after{
      clear:both;
    }
    .container{
      width:940px;
    }

    对应的demo可以查看 __test__目录


    $fixed-container($width)

    很简单, 水平居中 、固宽(假如传入$width参数)、清除浮动的容器

    Arguments

    .g-doc{
      $fixed-container: 960px;
    }

    Outport

    .g-doc{
      *zoom:1;
      width:960px;
      margin-left:auto;
      margin-right:auto;
    }
    .g-doc:before,.g-doc:after{
      display:table;
      content:"";
      line-height:0;
    }
    .g-doc:after{
      clear:both;
    }

    ### 5. effect.mcss

    参数配置

    1. $effect-outport —— 是否输出内置的几种效果, 默认为不输出

    effect.mcss 中的所有效果都是基于以下两个函数$effect, $effect-func. 它们参数完全一致,区别是$effect-func 只在全局注册对应的函数,而$effect是直接输出

    注意

    使用$effect-func时,在调用对应函数

    内置效果

    $effect($name, $block, $with-class)

    Arguments

    1. $name[text] keyframes的名字以及输出的className
    2. $block[func] keyframesblock,接受代表-o-等前缀的参数
    3. $with-class[func]—— 可选,代表输出类要做的额外样式

    解决keyframes的跨浏览器生成, 并生成对应的class.

    Example

    $effect(flip, ($prefix){
      0% {
        #{$prefix}transform: perspective(300px) rotateY(0);
        #{$prefix}animation-timing-function: ease-out; }
      40% {
        #{$prefix}transform: perspective(300px) translateZ(100px) rotateY(170deg);
        #{$prefix}animation-timing-function: ease-out; }
      50% {
        #{$prefix}transform: perspective(300px) translateZ(100px ) rotateY(190deg) scale(1);
        #{$prefix}animation-timing-function: ease-in; }
      80% {
        #{$prefix}transform: perspective(300px) rotateY(360deg) scale(.95);
        #{$prefix}animation-timing-function: ease-in; }
      100% {
        #{$prefix}transform: perspective(300px) scale(1);
        #{$prefix}animation-timing-function: ease-in; }
    },{
      $backface-visibility:  visible;
    });

    Outport

    .animated{
      -webkit-animation-duration:1s;
      -moz-animation-duration:1s;
      animation-duration:1s;
      -webkit-animation-fill-mode:both;
      -moz-animation-fill-mode:both;
      animation-fill-mode:both;
    }
    @-webkit-keyframes flip{
      0%{
        -webkit-transform:perspective(300px) rotateY(0);
        -webkit-animation-timing-function:ease-out;
      }
      40%{
        -webkit-transform:perspective(300px) translateZ(100px) rotateY(170deg);
        -webkit-animation-timing-function:ease-out;
      }
      50%{
        -webkit-transform:perspective(300px) translateZ(100px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function:ease-in;
      }
      80%{
        -webkit-transform:perspective(300px) rotateY(360deg) scale(0.95);
        -webkit-animation-timing-function:ease-in;
      }
      100%{
        -webkit-transform:perspective(300px) scale(1);
        -webkit-animation-timing-function:ease-in;
      }
    }
    @-moz-keyframes flip{
      0%{
        -moz-transform:perspective(300px) rotateY(0);
        -moz-animation-timing-function:ease-out;
      }
      40%{
        -moz-transform:perspective(300px) translateZ(100px) rotateY(170deg);
        -moz-animation-timing-function:ease-out;
      }
      50%{
        -moz-transform:perspective(300px) translateZ(100px) rotateY(190deg) scale(1);
        -moz-animation-timing-function:ease-in;
      }
      80%{
        -moz-transform:perspective(300px) rotateY(360deg) scale(0.95);
        -moz-animation-timing-function:ease-in;
      }
      100%{
        -moz-transform:perspective(300px) scale(1);
        -moz-animation-timing-function:ease-in;
      }
    }
    @-o-keyframes flip{
      0%{
        -o-transform:perspective(300px) rotateY(0);
        -o-animation-timing-function:ease-out;
      }
      40%{
        -o-transform:perspective(300px) translateZ(100px) rotateY(170deg);
        -o-animation-timing-function:ease-out;
      }
      50%{
        -o-transform:perspective(300px) translateZ(100px) rotateY(190deg) scale(1);
        -o-animation-timing-function:ease-in;
      }
      80%{
        -o-transform:perspective(300px) rotateY(360deg) scale(0.95);
        -o-animation-timing-function:ease-in;
      }
      100%{
        -o-transform:perspective(300px) scale(1);
        -o-animation-timing-function:ease-in;
      }
    }
    @keyframes flip{
      0%{
        transform:perspective(300px) rotateY(0);
        animation-timing-function:ease-out;
      }
      40%{
        transform:perspective(300px) translateZ(100px) rotateY(170deg);
        animation-timing-function:ease-out;
      }
      50%{
        transform:perspective(300px) translateZ(100px) rotateY(190deg) scale(1);
        animation-timing-function:ease-in;
      }
      80%{
        transform:perspective(300px) rotateY(360deg) scale(0.95);
        animation-timing-function:ease-in;
      }
      100%{
        transform:perspective(300px) scale(1);
        animation-timing-function:ease-in;
      }
    }
    .animated.flip{
      -webkit-animation-name:flip;
      -moz-animation-name:flip;
      animation-name:flip;
      -webkit-backface-visibility:visible;
      -moz-backface-visibility:visible;
      backface-visibility:visible;
    }

    知道animation.css的应该明白如何使用,即只要加入对应的类名即可


    $effect-func($name, $block, $with-class)

    $effect-func 相当于是把$effect的动作延迟到了函数调用时发生, 会在全局产生一个同名函数(区别是多了一个$前缀), 例如上个例子,使用$effect-func的话,会在全局定义一个$flip函数,调用则会输出对应的@keyframes样式,这个可以避免不需要的keyframes糟蹋了css文件.

    此外当使用$effect-func时,可以加入对应的参数来控制@keyframes的block, 不仅仅是$prefix参数.

    Arguments

    参数与$effect, 一致

    Example

    $effect-func(flash,($prefix, $min-opacity = 0){
     
      0%, 50%, 100% {opacity: 1;} 
      25%, 75% {opacity: $min-opacity;}
    });
     
    //假如我们希望flash效果从透明度50%开始, 参数会传入到$block中, 紧接着默认加入的$prefix参数, 在这个例子就是$min-opacity参数.
     
    $flash(0.5);
     

    Outport

    @-webkit-keyframes flash{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.5;
      }
    }
    @-moz-keyframes flash{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.5;
      }
    }
    @-o-keyframes flash{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.5;
      }
    }
    @keyframes flash{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.5;
      }
    }
    .animated.flash{
      -webkit-animation-name:flash;
      -moz-animation-name:flash;
      animation-name:flash;
    }
     

    有人可能会想到,如果需要两个不同参数的同类效果呢? 名字重复不是被覆盖了么?不用担心,只要传入的参数末位是个text类型(即没有引号的文本),会被认为是重新命名的参数,比如沿用上述例子产生的

    Example2

    // after example1
    $flash(0.3, flash1);
    $flash(0.6, flash2);

    Outport2

    @-webkit-keyframes flash1{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.3;
      }
    }
    @-moz-keyframes flash1{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.3;
      }
    }
    @-o-keyframes flash1{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.3;
      }
    }
    @keyframes flash1{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.3;
      }
    }
    .animated.flash1{
      -webkit-animation-name:flash1;
      -moz-animation-name:flash1;
      animation-name:flash1;
    }
    @-webkit-keyframes flash2{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.6;
      }
    }
    @-moz-keyframes flash2{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.6;
      }
    }
    @-o-keyframes flash2{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.6;
      }
    }
    @keyframes flash2{
      0%,50%,100%{
        opacity:1;
      }
      25%,75%{
        opacity:0.6;
      }
    }
    .animated.flash2{
      -webkit-animation-name:flash2;
      -moz-animation-name:flash2;
      animation-name:flash2;
    }

    这同时有个问题,就是在传入时, 不要让Text类型的参数成为你的末尾参数。否则$effect-func会视其为重命名参数


    内置effect

    除了提供了$effect$effect-func帮助我们创建自己的效果外,effect.mcss提供了几种效果,当开启 $effect-outport= true 时候,可以将这些特效以默认值的方式直接输出,否则你可以分别调用来达到输出。

    内置effect列表以及默认值信息:

    只要需要参数的特效,都有默认值,所以你完全可以不传入参数。

    // 
    $flash();
    $shake($offset = 10px);
    $bounce($height=40px);
    $tada($scale-offset = 0.2, $degree = 3deg);
    $swing($degree = 12deg);
    $pulse($scale-offset=0.1);
    $wobble($offset = 25%, $degree = 5deg);
    $wiggle( $degree = 12deg);
     
    $flip( $perspect = 300px);
    $flipInX();
    $flipInY();
    $flipOutX();
    $flipOutY();
     
    $fadeIn();
    $fadeOut();
    $fadeInX($offset = 30px);
    $fadeInY($offset = 30px);
    $fadeOutX($offset = 30px);
    $fadeOutY($offset = 30px);
     
    $bounceIn();
    $bounceOut();
     
    $rotateIn($start-deg= -360deg, $start-scale = 1.2);
    $rotateOut($end-deg= -360deg, $end-scale= 0.8);
     

    这些函数都是利用$effect-func封装,所以可以传入参数,并修改对应的名称。 使用时只要在节点上加入.animated与对应效果名,比如.shake即可, 与animate.mcss是一致的(其实就只是animate.css的mcss移植了);

    Example

    $rotateIn(-270deg, 1.5);

    Outport

    @-webkit-keyframes rotateIn{
      0%{
        opacity:0;
        -webkit-transform:rotate(-270deg) scale(1.5);
      }
      100%{
        -webkit-transform:rotate(0) scale(1);
        opacity:1;
      }
    }
    @-moz-keyframes rotateIn{
      0%{
        opacity:0;
        -moz-transform:rotate(-270deg) scale(1.5);
      }
      100%{
        -moz-transform:rotate(0) scale(1);
        opacity:1;
      }
    }
    @-o-keyframes rotateIn{
      0%{
        opacity:0;
        -o-transform:rotate(-270deg) scale(1.5);
      }
      100%{
        -o-transform:rotate(0) scale(1);
        opacity:1;
      }
    }
    @keyframes rotateIn{
      0%{
        opacity:0;
        transform:rotate(-270deg) scale(1.5);
      }
      100%{
        transform:rotate(0) scale(1);
        opacity:1;
      }
    }
    .animated.rotateIn{
      -webkit-animation-name:rotateIn;
      -moz-animation-name:rotateIn;
      animation-name:rotateIn;
    }
     

    animation是个非常灵活的css特性,效果是写不全的,利用$effect$effect-func去封装自己的特效吧。


    ### 6. functions.mcss

    这里只列出公有函数

    $if( $test, $value, $value2)

    如果test通过 则返回 $value, 否则返回$value2, 是的 仅仅只是用来减少@if @else的书写 Example

    body{
      left: $if(true, 2, 3);
    }

    Outport

    body{
      left:2;
    }

    $map($valueslist, $key)

    取得fakehash的某个key下的值, mcss支持@for in 遍历一个valueslist伪造的hash。而$map方法可以取得这个hash的某个key的value

    Exmpale

    $fakehash = big 20px, small 10px, large 40px;
     
    body{
      left: $map($fakehash, big);
    }
     

    Outport

    body{
      left:20px;
    }
     

    7. var.mcss

    集中的参数控制, 所有单独的对外文件都依赖它,目前有

     
    // 是否直接引入某个reset的样式
    $include-reset ?= false;
    // 是否直接输出effect
    $effect-outport ?= false;
     

    ### 8. index.mcss

    可以调用以上所有函数

    Changelog

    TODO

    开始写lib目录的js扩展 2013/8/4 0:17:21

    1. 雪碧图自动生成。
    2. 渐变图的生成,达到真正的跨浏览器

    Keywords

    install

    npm i mass

    Downloadsweekly downloads

    8

    version

    0.1.0

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar