@yek/sass

Y/SASS

the full list of useful libraries and resources to make sass style fastest then past
latest version : v3.2.0 (03 Apr 2022)

---

Installation (v 3.2.0)

CDN(jsdelivr)

https://cdn.jsdelivr.net/npm/@yek/sass@3.2.0/dist/index.scss

or

https://cdn.jsdelivr.net/gh/yek-org/yek-sass@3.2.0/dist/index.scss

CDN (unpkg)

unpkg.com/@yek/sass@3.2.0/dist/index.scss

copy and paste which one of above cdn links on your project

npm

execute below one of the below lines with copy and pasting their on your terminal

npm install --save-dev @yek/sass

or

shorthand

npm i -D @yek/sass

Import and make Reference

if using npm installation, should make reference to the node_modules folder with any sub-folder

so, adding below line on the top head of your main sass/scss file

// main.scss
@import '../node_module/@yke/sass/dist/index.scss';

or how many level need to back to parent folder

@import '../../../../../../node_module/@yek/sass/dist/index.scss';

How to use

Color Schema and Variable

in this library we use variable color schema. so, that meant in yek-scss functions and mixins available to making this task easy.

Create Color Schema (Sass Variable system)

this feature under written and not tested

in this case we syncing sass variable with css variable (custom property) and this feature just available to using native color function who can use with css variables

to working scss variable, should assigning before clear-root and set-root mixins

Variable Table

SASS Syntax	CSS Syntax
$color-primary	--color-primary
$color-secondary	--color-secondary
$color-white	--color-white
$color-black	--color-black
$color-gray	--color-gray
$color-light-gray	--color-light-gray
$font-family	--font-family
if you have any variable should be in pre-built variable as schema, you can forking on github and making PR's or Issues on @yek/sass repo

Now, We using clear-root mixin to reset and normalize the default css styles and then using set-root mixin to setup and assign custom css variable as root level on :root selector

Code Syntax

Sass Syntax

// custom or schema scss variable in here...
@include clear-root();

// if we have custom css variable, we setting it with set-root mixin in here
@include set-root(
	(
		custom-variable: 'custom-name',
		// and so on
	)
);

Css Syntax

:root {
	--color-primary: #1a2556;
	--color-secondary: #a5b3d4;
	--color-gray: #dde6f3;
	--color-light-gray: #f3f6fb;
	--color-white: white;
	--color-black: #3e3743;
	--font-family: Roboto, Montserrat, sans-serif;
}

And, for using on the your stylesheet, your code should be like some thing on the below

Code Syntax

Sass Syntax

.selector {
	// sass native variable
	background-color: $color-primary;

	// css native variable
	background-color: var(--color-primary);

	// variable function
	background-color: val(color-primary);

	// color function
	background-color: color(primary);
}

Css Syntax

.selector {
	/* sass native variable */
	background-color: #1a2556;

	/* css native variable */
	background-color: var(--color-primary);

	/* variable function */
	background-color: var(--color-primary);

	/* color function */
	background-color: var(--color-primary);
}

val function as native css var function and color function is function to giving any variable using --color- prefixes.

so, to assigning new css variable and setting value on it or re-assign or changing current value of the any variable, we can use set-var mixin to making it easy.

Code Syntax

Sass Syntax

@include set-root(
	(
		custom-variable: 'custom-value',
	)
);

.selector::after {
	@include set-var(custom-variable, 'new-value');

	content: val(custom-variable);
}

Css Syntax

:root {
	/* another css root variable */
	--custom-variable: 'custom-variable';
}

.selector::after {
	--custom-variable: 'new-value';

	content: var(--custom-variable); /* replaced by 'new-value' */
}

Mixins

Flexbox

$dir	row [ column | row-reverse | column-reverse | col | col-rev | row-rev | r | c | rr | cr ]	alice of flex-direction
$wrap	wrap [ nowrap | no | n | w ]	alice of flex-wrap

Sass Syntax

// default parameters $dir = row and $wrap = wrap
@include flex;

// set `flex-direction` column
@include flex(column);
// or
@include flex($dir: column);

// set `flex-direction` row
@include flex;
// or
@include flex();
// or
@include flex(row);
// or
@include flex($dir: row);

// setting `flex-wrap` nowrap
@include flex($wrap: nowrap);

// `flex-wrap` wrap
@include flex($wrap: wrap);

Css Syntax

display: flex;
flex-direction: row;
flex-wrap: wrap;

/* for flex column, just flex direction changed */
flex-direction: column;

/* for wrapping fle */

Align System

$ver	flex-start [ flex-end | end | start | space-between | space-around | space-evenly | between | evenly | around or css native ]	vertically align, alice of justify-content
$hor	flex-start [ flex-end | end | start | space-between | space-around | space-evenly | between | evenly | around or css native ]	horizontally align, alice of align-items
$content	flex-start [ flex-end | end | start | space-between | space-around | space-evenly | between | evenly | around or css native ]	alice of align-content

Sass Syntax

// default parameters $dir = row and $wrap = wrap
@include flex;

// set `flex-direction` column
@include flex(column);
// or
@include flex($dir: column);

// set `flex-direction` row
@include flex;
// or
@include flex();
// or
@include flex(row);
// or
@include flex($dir: row);

// setting `flex-wrap` nowrap
@include flex($wrap: nowrap);

// `flex-wrap` wrap
@include flex($wrap: wrap);

Css Syntax

display: flex;
flex-direction: row;
flex-wrap: wrap;

/* for flex column, just flex direction changed */
flex-direction: column;

/* for wrapping flex */
flex-wrap: wrap; /* or nowrap */

also, we can use aligns to shorthand of align mixin. that make all three parameter as once

// default is center
@include aligns;

// default is center
@include aligns();

// or you can use manual argument
@include aligns(center);

justify-content: center;
align-items: center;
align-content: center;

Size, Width and Height

Function

split

give a string and splitter to split text into list of characters

NAME	TYPE	REQUIRE
$string	string	✅
$sep	string	❌

SNIPPET

@debug split('Hello');
@debug split('H,e,l,l,o', ',');
@debug split('H::e::l::l::o', '::');

//=> ('H', 'e', 'l', 'l', 'o'); <=//

License

Created with ❤️ and 🧠 by YEK Inc and Under MIT License
this project is Open Source, so, if you want to contribute this project just fork and make PR's or Issues