A minimalist and lightweight Sass tool library

#The installation
$ npm install --save sass-utilsCopy the code

/* Import */ in the sass file
@import "~sass-utils";

.selector {
/* Call mix */
  @include position--relative;
  
/* Use default variables to set the font */
  font-family: $font-family-english;
}

/* Rewrites the function to make it easier to call */
$colors: red yellow;

@function color($index) {
  @return _color($colors.$index);
}Copy the code

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

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

// sass
.selector {
  @include link--block(100px. 200px);
}Copy the code

// css
.selector {
  display: block;
  text-decoration: none;
  width: 100px;
  height: 200px;  
}Copy the code

// sass
$fonts: (12px) (13px bold);

@mixin font($index) {
  @include _font($fonts.$index);
}

.selector {
  @include font(2);
}Copy the code

// css
.selector {
  font-size: 13px;
  font-weight: bold;
}

[data-dpr="2"] .selector {
  font-size: 26px;
}

[data-dpr="3"] .selector {
  font-size: 39px;
}Copy the code

// sass
.selector {
  @include clearfix;
}Copy the code

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

.selector::after {
  clear: both;
}Copy the code

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

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

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

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

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

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

// sass
$supports-ie8: true;

.selector {
  @include inline--block;
}Copy the code

// css
.selector {
  display: inline-block;
  display: inline\9;
  zoom: 1\9;  
}Copy the code

// sass
$colors: yellow red;

@function color($index) {
  @return _color($colors.$index);
}

.selector {
  color: color(2);
}Copy the code

// css
.selector {
  color: red;
}Copy the code