npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mixins-sass

v1.1.3

Published

a sass mixins library

Downloads

6

Readme

mixins-sass mixins-sass mixins-sass

sass mixins,require Sass ~> 3.3.0

utility

functions

string

list

usage

npm i mixins-sass --save
@import "./node_modules/mixins-sass/src/mixins";

utility

prefix

/**
 * @param $map       css列表
 * @param $vendors   浏览器前缀,默认:webkit moz ms o
 */
@mixin prefix($map, $vendors: webkit moz ms o)

.test {
    @include prefix((transliton: all 0.5s ease-out), webkit);
}

clearfix

@include clearfix;

float

@include float(left);

text-overflow

文字超出显示省略号,支持多行

/**
 * @param $line       超出显示省略号的行数,默认:1
 * @param $substract  为预留区域百分比%,默认:0
 */
@mixin text-overflow($line: 1, $substract: 0);

animation

@include animation(slideUp 900ms ease both) {
    0% {
        transform: translate3d(0, -200px, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

placeholder

// scss
@include placeholder() {
	...
}
// css
::-webkit-input-placeholder {
    ...
}
::-moz-placeholder {
    ...
}
:-ms-input-placeholder {
   ...
}

rem

px转rem

/**
 * @param $property       css属性
 * @param $values         css属性值
 * @param $support-ie     是否对不支持rem的浏览器使用px
 * @param $base           基准字体大小,如果不传会搜索全局变量 $base-font,如果没有默认为 16px
 */
@mixin rem($property, $values, $support-ie: true, $base: null)

@include rem('padding', '10px 5px 5px 10px', true, '16px');

opacity

兼容ie的透明度

arrow

生成上下左右的小箭头:http://lugolabs.com/caret

/**
 * @param $width
 * @param $border-width
 * @param $direction: top bottom left right
 * @param $background-color
 * @param $position 默认relative
 */
@mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative)

@include arrow(10px, 1px, 'bottom', '#00f', '#fff');

triangle

三角形生成

/**
 * @param $width
 * @param $height
 * @param $color
 * @param $direction: top bottom left right
 */
@mixin triangle($width, $height, $color: #000, $direction: bottom)

/**
 * svg背景图生成三角形
 */
@mixin svg-triangle($width, $height, $color: #000, $direction: bottom)

@include triangle(10px, 5px);

center

居中

/**
 * @param $direction: horizontal vertical both,  default: both
 */
@include center;

media

媒体查询相关

/**
 * @param $min   min-width
 * @param $max   max-width
 */
@mixin screen($min, $max)
@mixin max-screen($width)
@mixin min-screen($width)
@mixin hidpi($ratio: 1.3)

/**
 * @param $filename
 * @param $retina-filename   多个或者一个
 * @param $ratio             多个或者一个
 * @param $background-size
 */
@mixin retina-image($filename, $retina-filename, $ratio: 1.3, $background-size: 100%)
@mixin iphone6($orientation: all)
@mixin iphone6plus($orientation: all)
@mixin iphone5($orientation: all)
@mixin iphone4($orientation: all)
@mixin ipad($orientation: all)
@mixin ipad-mini($orientation: all)
@mixin ipad-retina($orientation: all)

@include retina-image(test.png, [email protected] [email protected], 2 3);

box-sizing

html {
    @include box-sizing(border-box);
}

touch-scroll

body {
    @include touch-scroll;
}
// css
body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

font

中文字体解决方案,来自https://github.com/zenozeng/fonts.css,有font-heifont-kaifont-songfont-fang-song

body {
    @include font-hei;
}

onepx

移动端1像素方案,通过background-image渐变色实现

/**
 * @param $color
 * @param $direction: top bottom left right vertical all,  default: all
 * @param $pseudo: after before, default: after
 */
.border-l {
    @include onepx(#eee, left);
}

onepx-scale

通过transform实现,支持圆角

/**
 * @param $color
 * @param $direction: top bottom left right vertical all radius,  default: all
 * @param $pseudo: after before, default: after
 * @param $radius default: 1px
 */
.border-r {
    @include onepx-scale(#eee, radius, after, 2px);
}

balloon

气泡提示,来自:balloon.css

/**
 * @param $direction:            top bottom left right
 * @param $bg                    气泡提示背景颜色
 * @param $trangle-width         气泡小三角形宽度
 * @param $trangle-height        气泡小三角形高度
 * @param $color                 气泡文字颜色
 * @param $font                  气泡文字大小
 */
@mixin balloon($direction, $bg, $trangle-width: 18px, $trangle-height: 6px, $color: #fff, $font: 12px)

.balloon {
    @include balloon(top, #000);
}
<span class="balloon" data-balloon="Whats up!">Hover me!</span>

side-line

线中间夹文字效果

http://codepen.io/anon/pen/XjNEAR

/**
 * @param $height  线高  default: 1px
 * @param $space   线距离文字两边的距离 default: 0.5em
 * @param $color   线颜色 default: inherit
 * @param $style   border-style default: solid
 * @param $adjust  线距离底部的距离,默认垂直居中 default: false
 * @param $double  是否需要两条线
 */
@mixin side-line($height: 1px, $space: 0.5em, $color: inherit, $style: solid, $adjust: false, $double: false)

.side-line {
    @include side-line;
}

functions

string

str-split

字符串分隔

@function str-split($string, $delimiter: " ")

str-repeat

字符串重复

@function str-repeat($string, $times)

str-replace

字符串替换

@function str-replace($string, $search, $replace: "")

list

first

返回列表第一项

@function first($list)

last

返回列表最后一项

@function last($list)

prepend

向列表前面插入一个

@function prepend($list, $value)

insert-nth

向列表某个位置插入

@function insert-nth($list, $index, $value)

replace

替换列表的某个元素 $recursive 是否全部替换

@function replace($list, $old-value, $new-value, $recursive: false)

replace-nth

替换列表某个位置的元素

@function replace-nth($list, $index, $value)

remove

删除列表某个元素 $recursive 是否删除所有

@function remove($list, $value, $recursive: false)

remove-nth

删除列表指定位置元素

@function remove-nth($list, $index)

slice

截取列表中的一部分

@function slice($list, $start: 1, $end: length($list))

to-string

列表变成字符串,$glue为连接符,$is-nested是否是嵌套的列表

@function to-string($list, $glue: '', $is-nested: false)

shift

将列表部分元素前置

@function shift($list, $index: 1)

contain

列表是存在某个值

@function contain($list, $value)