zhaotoday/sass-utils

介绍

一个极简的 Sass 工具库，包括 Mixins、Functions、Variables、Utils 等。

命名规范

使用方法

# 安装
$ npm install --save sass-utils

/* 在 Sass 文件中导入 */
@import "~sass-utils";

.selector {
  /* 调用 Mixin */
  @include position--relative;
}

Mixins

b

BEM block。

// sass
@include b(block) {
  // ...
  
  @include e(element) {
    // ...
  
    @include m(modifier) {
      // ...
    }
  }
}

// css
.block {
  // ...
}

.block__element {
  // ...
}

.block__element--modifier {
  // ...
}

e

BEM element。

m

BEM modifier。

text--middle

文字垂直居中。

// sass
.selector {
  @include text--middle(100px);
}

// css
.selector {
  height: 100px;
  line-height: 100px;
}

block--center

块级元素水平居中。

// sass
.selector {
  @include block--center;
}

// css
.selector {
  margin-left: auto;
  margin-right: auto;
}

clearfix

清除浮动。

// sass
.selector {
  @include clearfix;
}

// css
.selector::before,
.selector::after {
  content: "";
  display: table;
}

.selector::after {
  clear: both;
}

margin

设置 margin。

// sass
.selector {
  @include margin(100px, 200px, 300px, 400px);  
}

// css
.selector {
  margin-top: 100px;
  margin-right: 200px;
  margin-bottom: 300px;
  margin-left: 400px;
}

padding

设置 padding。

// sass
.selector {
  @include padding(100px, 200px, null, 400px);
}

// css
.selector {
  padding-top: 100px;
  padding-right: 200px;
  padding-left: 400px;  
}

text--overflow

文字超出部分用省略号代替。

// sass
.selector {
  @include text--overflow;
}

// css
.selector {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  
}

only-ie8

仅 IE8 可用。

// sass
.selector {
  @include only-ie8(display, inline);
}

// css
.selector {
  display: inline\9;
}

position--relative

相对定位。

// sass
.selector {
  @include position--relative(100px, 200px);
}

// css
.selector {
  position: relative;
  top: 100px;
  right: 200px;
}

position--absolute

绝对定位。

// sass
.selector {
  @include position--absolute(100px, 200px);
}

// css
.selector {
  position: absolute;
  top: 100px;
  right: 200px;
}

position--fixed

固定定位。

// sass
.selector {
  @include position--fixed(100px, 200px);
}

// css
.selector {
  position: fixed;
  top: 100px;
  right: 200px;
}

size

设置宽高。

// sass
.selector {
  @include size(100px, 200px);
}

// css
.selector {
  width: 100px;
  height: 200px;
}

Functions

_px2rem

像素转 rem。

// sass
@function px2rem ($px) {
  @return _px2rem($px, 75);
}

.selector {
  width: px2rem(750px);
}

// css
.selector {
  width: 10rem;
}

Variables

$separator-element

BEM element 分隔符。

$separator-modifier

BEM modifier 分隔符。

$supports-ie8

是否兼容 IE8。

Utils

.u-fwb {
  font-weight: bold;
}

.u-tac {
  text-align: center;
}

.u-tal {
  text-align: left;
}

.u-tar {
  text-align: right;
}

.u-cf {
  @include clearfix;
}

.u-lt {
  text-decoration: line-through;
}

.u-pr {
  position: relative;
}

命名空间

BEM 命名空间

zhaotoday / sass-utils

介绍