Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
This project consist of basic sass files for kickstarting a project. Tools like color, margin & padding, important(required) and many more.
- Easy to use
- Pre-compiled style.min.css
- Download and start to use
- Pre defined colors codes, ready to use ( You can add yours with ease)
- Pre defined Margin, Padding classes
- Pre defiend Colors classes for font and background
- Pre defined shadow classes useful in html boxes/cards
- Pre defiend Font-size and Width
- Important * and error class
If you are not familiar with SASS/LESS kindly get started by reading the official SASS DOCUMENTATION or other online tutorials
Sass is a stylesheet language that’s compiled to CSS. Sass is not a new language Our kickstarter code is CSS written in SASS format which make it easy to read and modify
To get started simply download this repo main branch or folk and add it to your project.
Then link the *style.min.css* inside your project <head> tags.
<head>
<link rel="stylesheet" href=".../style.min.css?v=1.00">
</head>
Remember: you must have a sass compiler in your editor if you are using VSCODE then you can install this package Live Sass Compiler
Once everything is ok, you can get started:
IT IS IMPORTANT TO INCLUDE _incl/incl and _incl/func files after _incl/_colors
The color codes are located in ../style/_incl/_colors.scss file.
To use the color inside you main sass file; simple include the _colors.scss file by using sass import mixin @import "_incl/colors";
Once included you can now use color(defined_key_name);
example:
color: color(main-red);
background-color: color(main-red);
where: color is a mixin declared inside _colors.scss file color($color_name, $map: $colors)
optional you can use sks-color - defined_key_name (sks-color-main-red) as your class name inside a html element
example 1: using sks-color-main-red
<span class="text-bold sks-color-main-red">This Text is Red</span>
example 2: using sks-bg-color-main-red for background color.
<div class="boxed-zone sks-bg-color-main-red">
<p> This area has red blackground </p>
</div>
above code (class names) are auto generated from colors key-names generated using mixin @mixin colorsCode($map: $colors)
Note: about color($color_name, $map: $colors) mixin
- takes two arguments
color nameandarray of colorscalled map is sass.
To add your own colors simple add new key inside $colors: (); array found in _colors.scss file.
example
$colors: (
main-red: #bb2d3b,
main-blue: #41b6ff,
...
//My own colors
mr-white: #ffffff,
men-in-black: #000000
);
Inside ../style/_incl/_func.scss file mixins marginSet() and paddingSet() are used to auto generate default margin and padding classes.
- to use marging classes simply call mixin
@include marginSet();and@include paddingSet();for padding classes
Note:
t: stands for topr: stands for rightb: stands for bottoml: stands for left
The dimension used are rem and percentage: sks-rem-m when applying xx rem and sks-m when using xx % percentage.
example:
sks-rem-mt-5 = margin-top: 5rem
sks-mt-5 = padding-top: 5%
<p class="p-text sks-rem-ml-5"> This paragraph has 5rem left margin</p>
sks-rem-pt-5 = padding-top: 5rem
sks-pt-5 = padding-top: 5%
If you wish to customize these class name or switch rem with px, change paddingSet or marginSet mixin inside _func.scss
minimum size 1rem and 1% maximum size is 10rem and 50%
Classes for width are generated using mixin widthSize() inside ../style/_incl/_func.scss file.
@mixin widthSize() {
// loop from 10 to 100 in 10
@for $i from 1 through 20 {
$size: $i * 5;
.sks-width-#{$size} {
width: #{$size}%;
}
}
}
minimum size 10% maximum size is 100%
to use width simply call mixin @include widthSize();
sks-width-10 = width: 10%
<div class="boxed-zone sks-bg-color-main-red sks-width-50">
<!-- This box has 50% width -->
<p> This area has red blackground</p>
</div>
To apply shadow in you css code block simple add @include shadow or other shadow mixin offered.
example
div.single-listing-details {
color: color(white);
// Background
.main-list,
.sub-list {
background-color: color(main-red);
}
//Shadow
@include shadowRight();
}
SHADOW CAN BE ADDED IN A CSS BLOCK AND DOES NOT HAVE GENERATED CLASS
HOWEVER YOU CAN GENERATE YOURS
.my-custom-top-shadow {
@include shadowTop();
}
when compiled the above code will generate class my-custom-top-shadow which can be used in html element
<div class="article-block my-custom-top-shadow">This section has shadow on top</div>
Available Mixins for Shadow
shadowTop()for -shadow on top of element/blockshadowRight()for -shadow on right of element/blockshadowBottom()for -shadow on bottom of element/blockshadowLeft()for -shadow on left of element/block
shadow()for -shadow around of element/blockshadow1()for -shadow at thebottomwhile floatingrightshadow2()for -shadow at thebottomwhile floatingleft
To learn more about mixing and function revisit sass documentation
To utilize font-size classes remember to add @include fontSize(); at the top of you sass file ../style/_incl/_func.scss
Font size is in pixels starting from 10px to 20px as the maximum
sks-font-15 = css code font-size: 15px;
example 1: using sks-font-13
<span class="sks-font-13">This Text Font Size 13px</span>
Required class .reqired should be added in .
eg: <label class="text-lable sks-required">Email</label> this will add <sub>*</sub> after text Email.
- The
*will be in subscript and red.
THIS ONLY WORK WITH <LABEL> HTML ELEMENT
To utilize sks-required and sks-error remember to add @include required(); at the top of you sass file ../style/_incl/_func.scss
<span class="sks-error">Error message in red</span>
- The error message will be in
red,itallic,12px
THIS ONLY WORK WITH <SPAN> & <P> HTML ELEMENT
- call
@include boostrap_bg();to overwrite defaultbg-primary,bg-successetc with your own color codes - call
@include boostrap_btn();to overwrite defaultbtn-primary,btn-successetc with your own color codes
NB this will only replace color codes with your defined color_key_name background-color: color(success);
Want to contribute? Great!
Folk do your improvement and documment changes/additions.
Merge request merge with the main project.
MIT License
Free Software, Hell Yeah!
