Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mixins.scss

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mixins.scss

mixins for scss syntax of sass

  • 3.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
11
decreased by-38.89%
Maintainers
1
Weekly downloads
 
Created
Source

mixins.scss mixins.sass

scss mixins syntax of sass

Installation

via npm

npm i mixins.scss --save

via bower

bower install mixins.scss --save

Usage

font-face

/*
* @param $fontname name of font
* @param $path the path of font
* @apram $weight this is optional param default: normal
*/

// font-weight: normal
@include font-face('yourfontname', '/path/font');

// or include font-weight
@include font-face('yourfontname', '/path/font', 600);

trans

/*
* @param $args is optional default: all .5s ease, or use the following list for use the prefix (all .5s):
* 1. linear
* 2. ease-in
* 3. ease-in-out
* 4. ease-out
*/

.foo {
  @include trans;
}

// Use the name of animation
.foo {
  @include trans(linear);
}

// also ..
.foo {
  @include trans(border-radius .2s ease-in-out);
}

trans-bezier

/*
* @params $n, $m, $l, $p betwen 0 and 1
*/

.foo {
  @include trans-bezier(0.25, 0.25, 0.5, 0.1);
}

border

/*
* @param $width border width the param not have unity
* @param $color is optional default: #0b0b0b
* @param $style is optional default: solid
*/

  .foo {
    @include border(1, $color);
  }

  // or include style
  .foo {
    @include border(5, $color, dotted);
  }

bgc

background-color

/*
* @param $color this param has 3 option:
* 1. hex color e.p #009288
* 2. rgba color e.p (1, 22, 31, .8)
* 3. rgb color e.p (22, 14, 21)
*/

// hex color
@include bgc(#009688);

// rgb color
@include bgc((22, 35, 88));

// rgba coor
@include bgc((34, 123, 1, .8));

media

/*
* @param $media options:
* - xs : 360px
* - sm : 767px
* - md : 1023px
* - lg : 1360px
 */

.foo {
  @include media(xs) {
    width: 50%;
  }
}

// or

@include media(xs) {
  .foo {
    width: 50%;
  }
}

clearfix

@include clearfix;

text-overflow

@include text-overflow;

overflow-x

@include overflow-x;

unstyled-list

@include unstyled-list;

inline-list

@include inline-list;
/*
* @param $color is optional default: #000
*/

a {
  @include unstyled-link;
}

// or adding color
a {
  @include unstyled-link(#0b0b0b);
}

hidden

/*
* @param $what options:
* - invisible or hide.
*/

.foo {
  @include hidden('invisible');
}

heading

// Styles for heading h1, h2... h6.

@include heading {
    font-family: 'Ubuntu';
    color: #ccc;
}

center-block

/*
* @param $width the width of element only on percentage (unity relative)
  @param $margin is optional default: 0 auto  or (margin-top and margin-bottom) unity: pixels
*/

foo {
  // equivalent to width: 70%; and margin: 20px auto;
  @include center-block(70, 20);
}

Keywords

FAQs

Package last updated on 03 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc