Nib 基于 Stylus 的扩展用于跨浏览器 CSS3 兼容性

发布于 2020-10-17 20:49:09 字数 8863 浏览 1359 评论 0

Nib 是一个小而精湛的 CSS3 预处理扩展,基于 Stylus CSS language, 而开发的,主要针对 CSS3 属性的跨浏览器兼容性。

body {
  background: linear-gradient(top, white, black);
}
body {
  background: -webkit-gradient(linear,
    left top,
    left bottom,
    color-stop(0, #fff),
    color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

Installation

To get started you'll first want to add nib to your package.json file, along with stylus. Once installed you can use Stylus and Nib with your Connect or Express application as shown in the following snippet. The simple .use(nib()) call is all that is required to expose itself to Stylus

var connect = require('connect')
  , stylus = require('stylus')
  , nib = require('nib');

var app = connect();

function compile(str, path) {
  return stylus(str)
    .set('filename', path)
    .set('compress', true)
    .use(nib());
}

app.use(stylus.middleware({
    src: __dirname
  , compile: compile
}));

app.listen(3000);

From within a .styl file you can then @import nib, or a portion of nib:

@import 'nib'
@import 'nib/gradients'
@import 'nib/buttons'

Rather than manually @import-ing nib within your Stylus source you can import it via the JavaScript API as well:

return stylus(str)
  .set('filename', path)
  .set('compress', true)
  .use(nib())
  .import('nib');

Gradients

Nib's gradient support is by far the largest feature it
provides, not only is the syntax extremely similar to what you would
normally write, it's more forgiving, expands to vendor equivalents, and
can even produce a PNG for older browsers with node-canvas.

body {
  background: linear-gradient(top, white, black);
}

yields:

body {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #000));
  background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
  background: -moz-linear-gradient(top, #fff 0%, #000 100%);
  background: linear-gradient(top, #fff 0%, #000 100%);
}

Any number of color stops may be provided:

body {
  background: linear-gradient(bottom left, white, red, blue, black);
}

Units may be placed before, or after the color:

body {
  background: linear-gradient(left, 80% red, #000);
  background: linear-gradient(top, #eee, 90% white, 10% black);
}


Position mixins

The position mixins absolute, fixed, and relative provide a shorthand variant to what is otherwise three CSS properties. The syntax is as follows:

fixed|absolute|relative: top|bottom [n] left|right [n]

The following example will default to (0,0):

#back-to-top {
  fixed: bottom right;
}

yielding:

#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
}

You may also specify the units:

#back-to-top {
  fixed: bottom 10px right 5px;
}

yielding:

#back-to-top {
  position: fixed;
  bottom: 10px;
  right: 5px;
}

Clearfix

The clearfix mixin currently takes no arguments, so it may be called as shown below:

.clearfix {
  clearfix();
}

yielding:

.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

Border radius

Nib's border-radius supports both the regular syntax as well as augmenting it to make the value more expressive.

button {
  border-radius: 1px 2px / 3px 4px;
}

button {
  border-radius: 5px;
}

button {
  border-radius: bottom 10px;
}

yielding:

button {
  -webkit-border-radius: 1px 2px/3px 4px;
  -moz-border-radius: 1px 2px/3px 4px;
  border-radius: 1px 2px/3px 4px;
}
button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
button {
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

Responsive

The image mixin allows you to define a background-image for both the normal image, and a doubled image for devices with a higher pixel ratio such as retina displays. This works by using a @media query to serve an "@2x" version of the file.

#logo {
  image: '/images/branding/logo.main.png'
}

#logo {
  image: '/images/branding/logo.main.png' 50px 100px
}

yields:

#logo {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url("/images/branding/logo.main@2x.png");
    background-size: auto auto;
  }
}
#logo {
  background-image: url("/images/branding/logo.main.png");
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url("/images/branding/logo.main@2x.png");
    background-size: 50px 100px;
  }
}

Ellipsis

The overflow property is augmented with a "ellipsis" value, expanding to what you see below.

button {
  overflow: ellipsis;
}

yielding:

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

Reset

Nib comes bundled with Eric Meyer's style reset support, you
can choose to apply the global or any specifics that you wish. To view
the definitions view reset.styl

  • global-reset()
  • nested-reset()
  • reset-font()
  • reset-box-model()
  • reset-body()
  • reset-table()
  • reset-table-cell()
  • reset-html5()

Miscellaneous properties

The following properties follow vendor expansion much like border-radius, however without augmentation, as well as some aliases such as whitespace instead of white-space.

  • no-wrap == nowrap
  • whitespace == white-space
  • box-shadow
  • user-select
  • column-count
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-width
  • column-rule-style
  • column-width
  • background-size
  • transform
  • border-image
  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • backface-visibility
  • opacity
  • box-sizing
  • box-orient
  • box-flex
  • box-flex-group
  • box-align
  • box-pack
  • box-direction
  • animation
  • animation-name
  • animation-duration
  • animation-delay
  • animation-direction
  • animation-iteration-count
  • animation-timing-function
  • animation-play-state
  • animation-fill-mode
  • border-image
  • hyphens
  • appearance

项目地址:http://stylus.github.io/nib/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。