SkillAgentSearch skills...

Mass

base on mcss(https://github.com/leeluolee/mcss) , just like compass to simplify our css workflow

GenerateConvertImprove

Install / Use

/learn @leeluolee/Mass
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

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://rawgit.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中的所有文件都可以单独引入, 已经处理好了依赖关系。

<a name="doc"></a>

使用文档

源码请看对应文件

<a name="css3"></a>

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 left，top 或者以哪个角度 如 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;
  }
}

<a name="reset"></a>

2. reset.mcss

目前提供$reset-normalize 和 $nec-reset 分别提供不同功能层级的reset需要,分别Copy自NEC 与 normalize

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;

leeluolee

View profile

View on GitHub
GitHub Stars18
CategoryDevelopment
Updated4y ago
Forks1
leeluolee/mass

Languages

CSS

Security Score

60/100

Audited on Sep 27, 2021

No findings