K-sass-core NPM

K-SASS-CORE

If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site.

There are many mixins are made by developers, to help you when working with Sass in your development. Most cover things that often repetitive in CSS. From adapting across multiple browsers to creating buttons, animations and transition effects, find this and more in the following K-SASS-CORE mixin libraries you should get for your Sass development.

k-SASS-CORE

BN-SASS-CORE change name to K-SASS-CORE
BN-SASS-CORE v2.0.3
BN-SASS-CORE is just a library.
BN-SASS-CORE requires NODE-SASS. If your OS is older, this version may not compile.
http://baonguyenyam.github.io
Copyright 2016 by Bao Nguyen.
MIT License

=============================== #Install

Via Bower:

bower install --save k-sass-core

Via NPM:

npm install --save-dev k-sass-core

=============================== SASS type:

+pos(null, 1rem null 3rem_)

Compile to:

position: initial;
top: 1rem;
bottom: 3rem !important;

===============================

SASS type:

+mar(2rem_ "0 !important" 3rem_ 0)

Compile to:

margin-top: 2rem !important;
margin-right: 0 !important;
margin-bottom: 3rem !important;
margin-left: 0;

===============================

SASS type:

+bor(null, dashed color(main), 5px 4px_)

Compile to:

border-top: dashed #795d9c 5px;
border-right: dashed #795d9c 4px !important;
border-bottom: dashed #795d9c 5px;
border-left: dashed #795d9c 4px !important;

===============================

SASS type:

+bor(left, null, calc(100% - 3rem))

Compile to:

border-left: solid transparent calc(100% - 3rem);

===============================

SASS type:

+bor-rad(7px_ '30%_' null 20px)

Compile to:

border-top-radius: 7px !important;
border-right-radius: 30% !important;
border-left-radius: 20px;

===============================

SASS type:

color: color(main)
background: color-rgba(color(link),.6)

Compile to:

color: #795d9c;
background: rgba(96, 125, 139, 0.6);

===============================

SASS type:

color: color-rgba(color-up(color(main), 2%),.3)
background: color-down(color-rgba(color(link),.6),20%)

Compile to:

color: rgba(255, 255, 255, 0.3);
background: #cccccc;

===============================

SASS type:

+background-gradient(color(main), color(link))

Compile to:

background-color: #795d9c;
background-image: -webkit-gradient(left top, left bottom, color-stop(0%, #795d9c), color-stop(100%, #607d8b));
background-image: -webkit-linear-gradient(top, #795d9c 0%, #607d8b 100%);
background-image: linear-gradient(to bottom, #795d9c 0%, #607d8b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#795d9c', endColorstr='#607d8b', GradientType=0 );

And more...

##Sass Functions Cheat Sheet

####RGB Functions

rgb($red, $green, $blue) Creates a color from red, green, and blue values.

rgba($red, $green, $blue, $alpha) Creates a color from red, green, blue, and alpha values.

red($color) Gets the red component of a color.

green($color) Gets the green component of a color.

blue($color) Gets the blue component of a color.

mix($color1, $color2, [$weight]) Mixes two colors together.

========== ####HSL Functions

hsl($hue, $saturation, $lightness) Creates a color from hue, saturation, and lightness values.

hsla($hue, $saturation, $lightness, $alpha) Creates a color from hue, saturation, lightness, and alpha values.

hue($color) Gets the hue component of a color.

saturation($color) Gets the saturation component of a color.

lightness($color) Gets the lightness component of a color.

adjust-hue($color, $degrees) Changes the hue of a color.

lighten($color, $amount) Makes a color lighter.

darken($color, $amount) Makes a color darker.

saturate($color, $amount) Makes a color more saturated.

desaturate($color, $amount) Makes a color less saturated.

grayscale($color) Converts a color to grayscale.

complement($color) Returns the complement of a color.

invert($color) Returns the inverse of a color.

========== ####Opacity Functions

alpha($color) / opacity($color) Gets the alpha component (opacity) of a color.

rgba($color, $alpha) Changes the alpha component for a color.

opacify($color, $amount) / fade-in($color, $amount) Makes a color more opaque.

transparentize($color, $amount) / fade-out($color, $amount) Makes a color more transparent.

========== ####Other Color Functions

Visit Sass Functions.

========== ####List Functions

Visit Sass Functions.

========== ####Map Functions

Visit Sass Functions.

========== ####Selector Functions

selector-nest($selectors...) Nests selector beneath one another like they would be nested in the stylesheet.

selector-replace($selector, $original, $replacement) Replaces $original with $replacement within $selector.

More at Sass Functions.

========== ####String Functions

unquote($string) Removes quotes from a string.

quote($string) Adds quotes to a string.

str-length($string) Returns the number of characters in a string.

More at Sass Functions.

========== ####Number Functions

percentage($number) Converts a unitless number to a percentage.

round($number) Rounds a number to the nearest whole number.

ceil($number) Rounds a number up to the next whole number.

floor($number) Rounds a number down to the previous whole number.

abs($number) Returns the absolute value of a number.

min($numbers...) Finds the minimum of several numbers.

max($numbers...) Finds the maximum of several numbers.

random([$limit]) Returns a random number.

========== ####Introspection Functions

feature-exists($feature) Returns whether a feature exists in the current Sass runtime.

variable-exists($name) Returns whether a variable with the given name exists in the current scope.

global-variable-exists($name) Returns whether a variable with the given name exists in the global scope.

function-exists($name) Returns whether a function with the given name exists.

mixin-exists($name) Returns whether a mixin with the given name exists.

inspect($value) Returns the string representation of a value as it would be represented in Sass.

type-of($value) Returns the type of a value.

unit($number) Returns the unit(s) associated with a number.

unitless($number) Returns whether a number has units.

comparable($number1, $number2) Returns whether two numbers can be added, subtracted, or compared.

call($name, $args…) Dynamically calls a Sass function.

========== ####Miscellaneous Functions

if($condition, $if-true, $if-false) Returns one of two values, depending on whether or not $condition is true.

unique-id() Returns a unique CSS identifier.

Mixins available:

Examples and Instructions

   // Call Mixins
   +opacity()
   +border-radius(3px)
   +transition(color, .5s, ease-in)

Changelog

Initial Release
Beta Release

Licence

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Bảo Nguyên

K-SASS-CORE

autoprefixer bootstrap node-sass sass

@everything-registry/sub-chunk-1999 @zalastax/nolb-k-@infinitebrahmanuniverse/nolb-k-

0.0.1

8 years ago