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.
- 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:
Compile to:
===============================
SASS type:
Compile to:
===============================
SASS type:
Compile to:
===============================
SASS type:
Compile to:
);
===============================
SASS type:
Compile to:
===============================
SASS type:
Compile to:
);
===============================
SASS type:
Compile to:
);
===============================
SASS type:
Compile to:
),)););););
And more...
Sass Functions Cheat Sheet
- RGB Functions
- HSL Functions
- Opacity Functions
- Other Color Functions
- List Functions
- Map Functions
- Selector Functions
- String Functions
- Number Functions
- Introspection Functions
- Miscellaneous Functions
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:
Mixins | Arguments (with default values) |
---|---|
bn-prefix | Will add browser specific prefixes to supplied property (and will set it to supplied value) |
background-gradient | Start Color: #3C3C3C, End Color: #999999 |
background-horizontal | Start Color: #3C3C3C, End Color: #999999 |
background-radial | Start Color: #FFFFFF, Start position: 0%, End Color: #000000, End position: 100% |
background-size | Width: 100%, Height: 100% |
background-opacity | Color: #000, Opacity: .85 |
border-radius | Radius: 5px |
border-radius-separate | Top Left: 5px, Top Right: 5px, Bottom Left: 5px, Bottom Right: 5px |
box | Orientation: horizontal, Pack: center, Align: center |
box-rgba | R: 60, G: 3, B: 12, Opacity: 0.23, Color: #3C3C3C |
box-shadow | X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) |
box-sizing | Type: border-box |
columns | Count: 3, Gap: 10 |
double-borders | Color One: #3C3C3C, Color Two: #999999, Radius: 0 |
flex | Value: 1 |
flip | Value: ScaleX: -1 |
font-face | Value: Font Family: myFont, Eot File Src: myFont.eot, Woff File Src: myFont.woff, Ttf File Src: myFont.ttf |
opacity | Opacity: 0.5 |
outline-radius | Radius: 5px |
resize | Direction: both |
rotate | Degree: 0, M11: 0, M12: 0, M21: 0, M22: 0 |
text-shadow | X: 2px, Y: 2px, Blur: 5px, Color: rgba(0,0,0,.4) |
transform | Parameters: null |
transform-style | Style: preserve-3d |
transition | What: all, Length: 1s, Easing: ease-in-out |
triple-borders | Color One: #3C3C3C, Color Two: #999999, Color Three: #000000, Radius: 0 |
keyframes | Animation name - pass animation css as body |
animation | name duration timing-function delay iteration-count direction fill-mode play-state (http://www.w3schools.com/cssref/css3_pr_animation.asp) |
Examples and Instructions
// Call Mixins
Changelog
- Initial Release
- Beta Release
Licence
Copyright © 2016 Bao Nguyen
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.