GTW Sass

A Sass library.

If you’re new to Sass, checkout 🔗 the official website of Sass

Table of content:

Installation

Yarn

$ yarn add @gtomato-web/gtw-sass

NPM

$ npm i --save @gtomato-web/gtw-sass

Usage

With Sass modules and 🔗 @use, recommended.

Without extend/override

If you don't need to extend/override any global variable, just put @use '~@gtomato-web/gtw-sass'; on top of every scss file and enjoy!

Example A-1

// *.scss
@use '~@gtomato-web/gtw-sass'; // Place this line at the top of every Scss file

/* Start to write you Scss here if you don't need to override any global variables,
 * otherwise, read the the section below to learn how to extend or override global variables. */

// e.g.
div {
  @include gtw-sass.size-fixed(10px);
}

// Read the online document to know more about other functions, getters, global variables, mixins, and placeholders

Example A-2

▼ If you think gtw-sass is to long and you want to shorthand namespace:

// *.scss
@use '~@gtomato-web/gtw-sass' as gs; // Shorthand gtw-sass to gs

div {
  @include gs.size-fixed(10px);
}

Extend/Override global variables

To extend/override any global variables, create gtw-sass.extend.scss

▼ In gtw-sass.extend.scss:

// gtw-sass.extend.scss
@forward '~@gtomato-web/gtw-sass';
@use '~@gtomato-web/gtw-sass' as gs;

// e.g. Override app-max-width & app-min-width
@include gs.set-setting((
  app-max-width: 5120px,
  app-min-width: 320px
  // etc...
));

// e.g. Added colors to $color-map
@include gs.set-color((
  primary: #273043,
  secondary: #08C986
  // etc...
));

// etc... (breakpoint, font-weight, image, ratio, typography, z-index)

Read document of 🔗 Variables w/ Getter & Setter to learn more about other global variables, getters, and setters.

▼ Once you finished extend/override global variables, in other Scss files:

@use 'gtw-sass.extend' as gs;

// e.g. Get primary color and secondary from $color-map
$primary-color : gs.get-color(primary);

div {
  background-color : $primary-color;
  color            : gs.get-color(secondary);
}

// etc... (Anything else)

Setting up root level styles

GTW Sass also provided some feature for you to easily set up the css environment.

Root level features

▼ Example of using root level features:

// App.scss

//e.g.
@include gs.init();

// etc... (Anything else)

[mixin] init()

This mixin helps to set up normalization and necessary style in html andy body tag (e.g. base font size, font family, body max/min width, etc...)

💡 You may read document of 🔗 [mixin] init() for more information
💡 In case you have not idea about what is normalization. Normalization is some css to make sure all browsers render all elements more consistently and in line with modern standard.

Common tags & classes

▼ Example of using common tag & class bundles:

// App.scss

//e.g.
@include gs.tags-bundle-headings();
@include gs.classes-bundle-typography();

// etc... (Anything else)

[mixin] tags-bundle-headings()

This mixin helps to generate h1-h6 tags styles with the settings of h1-h6 defined in $typography-map

💡 You may read document of 🔗 [mixin] tags-bundle-headings() for more information

[mixin] classes-bundle-typography()

This mixin helps to generate classes styles with the setting defined in $typography-map

💡 You may read document of 🔗 [mixin] classes-bundle-typography() for more information

There are some other tag & class bundles, read document of 🔗 Tag & 🔗 Class to learn more

Notice

About prefix handling

GTW Sass prefer to leave the option of adding prefix to CSS properties to our users. Therefore, GTW Sass will only output the Rules without prefix in most of the case. If you need to add any prefix to the compiled CSS, please use PostCSS and Autoprefixer.

▼ For example:

/* GTW Sass output */
div {
  background : linear-gradient(to bottom, white, black);
}

/* GTW Sass WON'T provide the following output */
div {
  background : -webkit-gradient(linear, left top, left bottom, from(white), to(black));
  background : -o-linear-gradient(top, white, black);
  background : linear-gradient(to bottom, white, black);
}

Contribute

If you want to contribute, please read CONTRIBUTING for more information

^ Back to top

Get started

mixins

init

@mixin init($baseFontSize: $setting-map.base-font-size, $ffEn: $font-family-fallback-tc, $ffSc: $font-family-fallback-sc, $ffTc: $font-family-fallback-tc, $maxWidth: $setting-map.app-max-width, $minWidth: $setting-map.app-min-width, $centerBody: true, $normalize: true) { ... }

Description

Init mixin of gtw-sass, set-up normalization, every necessary style in html and body, this mixin should only call once at the top in the root style sheet. You DO NOT need to wrap this mixin in any selector

Parameters

NameDescriptionTypeDefault value
$baseFontSize

Font size in HTML tag, will affect em and rem

Property: font-size$setting-map.base-font-size
$ffEn

Font family of en

Property: font-family$font-family-fallback-tc
$ffSc

Font family of sc

Property: font-family$font-family-fallback-sc
$ffTc

Font family of tc

Property: font-family$font-family-fallback-tc
$maxWidth

Max width of body tag

Property: max-width$setting-map.app-max-width
$minWidth

Min width of body tag

Property: min-width$setting-map.app-min-width
$centerBody

true to center body tag when viewport width larger then body max width

Booleantrue
$normalize

true to normalize css

Booleantrue

Example

@include gtw-sass.init();

Requires

Links

override

@mixin override($maps, $maps.breakpoint, $maps.color, $maps.font-weight, $maps.image, $maps.ratio, $maps.setting, $maps.z-index) { ... }

Description

Mixin that gathered all setting mixin to override all global variable at once

Parameters

NameDescriptionTypeDefault value
$maps

Maps in map to override global variables

Map(breakpoint, color, font-weight, image, ratio, setting, z-index)—
$maps.breakpoint

breakpoint map, read $breakpoint-map for more information

Map—
$maps.color

color map, read $color-map for more information

Map—
$maps.font-weight

font-weight map, read $font-weight-map for more information

Map—
$maps.image

image map, read $image-map for more information

Map—
$maps.ratio

ratio map, read $ratio-in-padding-map for more information

Map—
$maps.setting

setting map, read $setting-map for more information

Map—
$maps.z-index

z-index map, read $z-index-map for more information

Map—

Example

@include override((
  breakpoint  : (),
  color       : (),
  font-weight : (),
  image       : (),
  ratio       : (),
  setting     : (),
  typography  : (),
  z-index     : ()
));

Requires

export-global-variables-to-js

@mixin export-global-variables-to-js() { ... }

Description

Mixin to export GTW Sass global variables to js, make sure you use this mixin after you overrode all global variable you needed

Parameters

None.

Example

@include gtw-sass.export-global-variables-to-js();

Requires

font-face

@mixin font-face($familyName, $srcUrl, $fontStyle: normal, $fontWeight: 400, $fontDisplay: swap, $fileFormat: woff2, $unicodeRange) { ... }

Description

Mixin to define new font face

Parameters

NameDescriptionTypeDefault value
$familyName

Name of the font family

String—
$srcUrl

URL to the file

String—
$fontStyle

Specify font styles for the fonts specified in the @font-face rule.

Property: font-stylenormal
$fontWeight

Specify font weights for the fonts specified in the @font-face rule

Property: font-weight400
$fontDisplay

Determines how a font face is displayed based on whether and when it is downloaded and ready to use

Property: font-displayswap
$fileFormat

Describe the format of the font resource referenced by that URL

Stringwoff2
$unicodeRange

Sets the specific range of characters to be used from a font defined by @font-face

Property: unicode-range—

Example

@include gtw-sass.font-face('new font face', 'path-to-new-font-face');

Links

[Global] Variables w/ Getter & Setter

variables

breakpoint-map

$breakpoint-map: (
  // ↓ iPhone 12 Pro Max
  'xs': 0px,
  // ↓ 7.9" iPad mini
  's': 429px,
  // ↓ 12.9" iPad Pro
  'm': 769px,
  // ↓ 13" MacBook Pro
  'l': 1025px,
  // ↓ 16" MacBook Pro
  'xl': 1281px,
  // ↓ 21.5" iMac
  'xxl': 1537px,
  // ↓ 27" iMac
  'xxxl': 1921px
) !default;

Description

The map of breakpoint

Type

Map(string: width)

Map structure

NameDescriptionTypeValue
xs

Screen size of iPhone 12 Pro Max or below (0px - 428px)

Width0px
s

Screen size of 7.9" iPad mini or below (429px - 768px)

Width429px
m

Screen size of 12.9" iPad Pro or below (769px - 1024px)

Width769px
l

Screen size of 13" MacBook Pro or below (1025px - 1280px)

Width1025px
xl

Screen size of 16" MacBook Pro or below (1281px - 1536px)

Width1281px
xxl

Screen size of 21.5" iMac or below (1537px - 1920px)

Width1537px
xxxl

Screen size of 27" iMac or below (1921px - 2560px)

Width1921px

Used by

color-map

$color-map: (
  'black': #000000,
  'white': #ffffff
) !default;

Description

The map of color

Type

Map(string: color)

Map structure

NameDescriptionTypeValue
black

Color code of color black

Color#000000
white

Color code of color white

Color#FFFFFF

Used by

font-weight-map

$font-weight-map: (
  'black': 900,
  'extra-bold': 800,
  // ↓ 700
  'bold': bold,
  'semi-bold': 600,
  'medium': 500,
  // ↓ 400
  'normal': normal,
  'light': 300,
  'extra-light': 200,
  'thin': 100
) !default;

Description

The map of font-weight

Type

Map(string: (property: font-weight))

Map structure

NameDescriptionTypeValue
black

font-weight value of black

Property: font-weight900
extra-bold

font-weight value of extra-bold

Property: font-weight800
bold

font-weight value of bold

Property: font-weightbold
semi-bold

font-weight value of semi-bold

Property: font-weight600
medium

font-weight value of medium

Property: font-weight500
normal

font-weight value of normal

Property: font-weightnormal
light

font-weight value of light

Property: font-weight300
extra-light

font-weight value of extra-light

Property: font-weight200
thin

font-weight value of thin

Property: font-weight100

Used by

image-map

$image-map: (
  'example-banner': 'path-to-example-banner'
) !default;

Description

The map of image

Type

{ map(string: string) }

Used by

ratio-in-padding-map

$ratio-in-padding-map: () !default;

Description

The map of ratio to padding in percentage, generate from $_ratio-list

Type

Map(string: %)

Map structure

NameDescriptionTypeValue
1:1

ratio to padding value of 1:1

%formula.ratio-to-padding-in-percentage(1, 1)
2:3

ratio to padding value of 2:3

%formula.ratio-to-padding-in-percentage(2, 3)
3:2

ratio to padding value of 3:2

%formula.ratio-to-padding-in-percentage(3, 2)
3:4

ratio to padding value of 3:4

%formula.ratio-to-padding-in-percentage(3, 4)
4:3

ratio to padding value of 4:3

%formula.ratio-to-padding-in-percentage(4, 3)
9:16

ratio to padding value of 9:16

%formula.ratio-to-padding-in-percentage(9, 16)
9:21

ratio to padding value of 9:21

%formula.ratio-to-padding-in-percentage(9, 21)
16:9

ratio to padding value of 16:9

%formula.ratio-to-padding-in-percentage(16, 9)
21:9

ratio to padding value of 21:9

%formula.ratio-to-padding-in-percentage(21, 9)

Used by

setting-map

$setting-map: (
  // -------- //
  //   View   //
  // -------- //
  'app-max-width': 2560px,
  'app-min-width': 375px,
  // ------------- //
  //   Animation   //
  // ------------- //
  'base-transition-duration': 0.3s,
  // -------- //
  //   Font   //
  // -------- //
  'base-font-size': 16px,
  // ----------------------------- //
  //   Checkbox and Radio button   //
  // ----------------------------- //
  'cb-invalid-attr': '[checkbox-invalid="true"]',
  'cb-invalid-class': '.checkbox-invalid',
  'rb-invalid-attr': '[radio-button-invalid="true"]',
  'rb-invalid-class': '.radio-button-invalid',
  // --------------------- //
  //   Modernizr classes   //
  // --------------------- //
  // - Device type related classes
  'modernizr-is-aos': '.is-aos',
  'modernizr-no-aos': '.no-aos',
  'modernizr-is-ios': '.is-ios',
  'modernizr-no-ios': '.no-ios',
  'modernizr-is-mac': '.is-mac',
  'modernizr-no-mac': '.no-mac',
  'modernizr-is-windows': '.is-windows',
  'modernizr-no-windows': '.no-windows',
  'modernizr-is-touch-device': '.is-touch-device',
  'modernizr-no-touch-device': '.no-touch-device',
  // - Viewport related classes
  'modernizr-is-desktop': '.is-desktop',
  'modernizr-no-desktop': '.no-desktop',
  'modernizr-is-mobile': '.is-mobile',
  'modernizr-no-mobile': '.no-mobile',
  'modernizr-is-tablet': '.is-tablet',
  'modernizr-no-tablet': '.no-tablet',
  // - Browser related classes
  'modernizr-is-chrome': '.is-chrome',
  'modernizr-no-chrome': '.no-chrome',
  'modernizr-is-edge': '.is-edge',
  'modernizr-no-edge': '.no-edge',
  'modernizr-is-firefox': '.is-firefox',
  'modernizr-no-firefox': '.no-firefox',
  'modernizr-is-ie': '.is-ie',
  'modernizr-no-ie': '.no-ie',
  'modernizr-is-opera': '.is-opera',
  'modernizr-no-opera': '.no-opera',
  'modernizr-is-safari': '.is-safari',
  'modernizr-no-safari': '.no-safari',
  // --------------- ---- //
  //   GTW Sass setting   //
  // -------------------- //
  'enable-box-syntax-fallback': false
) !default;

Description

The map of settings

Type

Map(string: any)

Map structure

NameDescriptionTypeValue
app-max-width

Default max width of body

Property: max-width2560px
app-min-width

Default min width of body

Property: min-width375px
base-transition-duration

Default transition duration time

Property: transition-duration0.3s
base-font-size

Default font size of the root element's font-size, mainly for rem use

Property: font-size16px
cb-invalid-attr

] - Attribute to indicate input checkbox is invalid

Attribute[checkbox-invalid="true"
cb-invalid-class

Class to indicate input checkbox is invalid

Classname.checkbox-invalid
rb-invalid-attr

] - Attribute to indicate input radio button is invalid

Attribute[radio-button-invalid="true"
rb-invalid-class

Class to indicate input radio button is invalid

Classname.radio-button-invalid
modernizr-is-aos

Class in html tag if the device is aOS device

Classname.is-aos
modernizr-no-aos

Class in html tag if the device is not aOS device

Classname.no-aos
modernizr-is-ios

Class in html tag if the device is iOS device

Classname.is-ios
modernizr-no-ios

Class in html tag if the device is not iOS device

Classname.no-ios
modernizr-is-mac

Class in html tag if the device is mac

Classname.is-mac
modernizr-no-mac

Class in html tag if the device is not mac

Classname.no-mac
modernizr-is-windows

Class in html tag if the device is windows

Classname.is-windows
modernizr-no-windows

Class in html tag if the device is not windows

Classname.no-windows
modernizr-is-touch-device

Class in html tag if the device is touch device

Classname.is-touch-device
modernizr-no-touch-device

Class in html tag if the device is not touch device

Classname.no-touch-device
modernizr-is-desktop

Class in html tag if the breakpoint is within desktop

Classname.is-desktop
modernizr-no-desktop

Class in html tag if the breakpoint is not within desktop

Classname.no-desktop
modernizr-is-mobile

Class in html tag if the breakpoint is within mobile

Classname.is-mobile
modernizr-no-mobile

Class in html tag if the breakpoint is not within mobile

Classname.no-mobile
modernizr-is-tablet

Class in html tag if the breakpoint is within tablet

Classname.is-tablet
modernizr-no-tablet

Class in html tag if the breakpoint is not within tablet

Classname.no-tablet
modernizr-is-chrome

Class in html tag if the browser is chrome

Classname.is-chrome
modernizr-no-chrome

Class in html tag if the browser is not chrome

Classname.no-chrome
modernizr-is-edge

Class in html tag if the browser is edge

Classname.is-edge
modernizr-no-edge

Class in html tag if the browser is not edge

Classname.no-edge
modernizr-is-firefox

Class in html tag if the browser is firefox

Classname.is-firefox
modernizr-no-firefox

Class in html tag if the browser is not firefox

Classname.no-firefox
modernizr-is-ie

Class in html tag if the browser is ie

Classname.is-ie
modernizr-no-ie

Class in html tag if the browser is not ie

Classname.no-ie
modernizr-is-opera

Class in html tag if the browser is opera

Classname.is-opera
modernizr-no-opera

Class in html tag if the browser is not opera

Classname.no-opera
modernizr-is-safari

Class in html tag if the browser is safari

Classname.is-safari
modernizr-no-safari

Class in html tag if the browser is not safari

Classname.no-safari
enable-box-syntax-fallback

true to enable box style fallback in flex mixins

Booleanfalse

Used by

typography-map

$typography-map: (
  'h1': (
    fs: 2rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  ),
  'h2': (
    fs: 1.5rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  ),
  'h3': (
    fs: 1.17rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  ),
  'h4': (
    fs: 1.33rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  ),
  'h5': (
    fs: 0.83rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  ),
  'h6': (
    fs: 0.67rem,
    fw: bold,
    lh: normal,
    color: list.append((), (black)),
    additional: map.new()
  )
) !default;

Description

The map of typography, in prop color, the first color will be the default color of the that typography

Type

Map(string: ( fs: property font-size, fw: font-weight name from $font-weight-map, lh: property line-height, color: list( color name from $color-map ), additional: map( any css properties ) ))

Map structure

NameDescriptionTypeValue
h1

Typography settings of h1

Map(fs: 2rem, fw: bold, lh: normal, color: (black), additional: ())
h2

Typography settings of h2

Map(fs: 1.5rem, fw: bold, lh: normal, color: (black), additional: ())
h3

Typography settings of h3

Map(fs: 1.17rem, fw: bold, lh: normal, color: (black), additional: ())
h4

Typography settings of h4

Map(fs: 1.33rem, fw: bold, lh: normal, color: (black), additional: ())
h5

Typography settings of h5

Map(fs: 0.83rem, fw: bold, lh: normal, color: (black), additional: ())
h6

Typography settings of h6

Map(fs: 0.67rem, fw: bold, lh: normal, color: (black), additional: ())

Used by

z-index-map

$z-index-map: (
  // ↓ [Range: -1000 ~ -1] - Hidden content, covered by everything
  'hidden': -1000,
  // ↓ [Range: 0 ~ 99    ] - Root container, main content
  'root': 0,
  // ↓ [Range: 100 ~ 199 ] - Content elements, e.g. content that overlapping each other to form some UI effects
  'content': 100,
  // ↓ [Range: 200 ~ 299 ] - Overlay elements, e.g. datepicker, dropdown, tooltips, etc...
  'overlay': 200,
  // ↓ [Range: 300 ~ 309 ] - Header element, will cover main content and overlay elements on it e.g. mega menu, navigation bar, side menu, etc...
  'header': 300,
  // ↓ [Range: 400 ~ 409 ] - Backdrop of popup
  'popup-backdrop': 400,
  // ↓ [Range: 410 ~ 499 ] - Popup elements which may covered the main content, e.g. ads, modal, reminder, etc...
  'popup': 410,
  // ↓ [Range: 990 ~ 999 ] - Backdrop of full page popup
  'full-page-popup-backdrop': 990,
  // ↓ [Range: 1000+     ] - Full page popup element, must cover all contents and stay at the very top, e.g. alert popup, error popup, etc...
  'full-page-popup': 1000
) !default;

Description

The map of z-index

Type

Map(string: integer)

Map structure

NameDescriptionTypeValue
hidden

Hidden content, covered by everything

Integer-1000
root

Root container, main content

Integer0
content

Content elements, e.g. content that overlapping each other to form some UI effects

Integer100
overlay

Overlay elements, e.g. datepicker, dropdown, tooltips, etc...

Integer200
header

Header element, will cover main content and overlay elements on it e.g. mega menu, navigation bar, side menu, etc...

Integer300
popup-backdrop

Backdrop of popup

Integer400
popup

Popup elements which may covered the main content, e.g. ads, modal, reminder, etc...

Integer410
full-page-popup-backdrop

Backdrop of full page popup

Integer990
full-page-popup

Full page popup element, must cover all contents and stay at the very top, e.g. alert popup, error popup, etc...

Integer1000

Used by

functions

bp (alias for get-breakpoint)

@function bp() { ... }

Refer to get-breakpoint.

get-breakpoint (aliased as bp )

@function get-breakpoint($key) { ... }

Description

Get value in $breakpoint-map by key, you can also use its alias "bp()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Width —

The value of breakpoint

Example

div {
  width: gtw-sass.get-breakpoint(xs); // width: 428px;
}

Requires

Used by

  • [function] bp

get-breakpoint-map

@function get-breakpoint-map() { ... }

Description

Get the whole $breakpoint-map

Parameters

None.

Returns

Map(string: width)

Example

$map: gtw-sass.get-breakpoint-map();

Requires

Used by

color (alias for get-color)

@function color() { ... }

Refer to get-color.

get-color (aliased as color )

@function get-color($key, $alpha: null) { ... }

Description

Get value in $color-map by key, you can also use its alias "color()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—
$alpha

Specifies the opacity for the color

Numbernull

Returns

Color —

The corresponding color of the key

Example

// Both black or 'black' accepted
div {
  color: gtw-sass.get-color(black); // color: #000000;
}

Requires

Used by

get-color-map

@function get-color-map() { ... }

Description

Get the whole $color-map

Parameters

None.

Returns

Map(string: color)

Example

$map: gtw-sass.get-color-map();

Requires

Used by

font-weight (alias for get-font-weight)

@function font-weight() { ... }

Refer to get-font-weight.

get-font-weight (aliased as font-weight )

@function get-font-weight($key) { ... }

Description

Get value in $font-weight-map by key, you can also use its alias "font-weight()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Property: font-weight —

The URL of the corresponding font weight of the key

Example

div {
  font-weight: gtw-sass.get-font-weight(normal); // font-weight: normal;
}

Requires

Used by

get-font-weight-map

@function get-font-weight-map() { ... }

Description

Get the whole $font-weight-map

Parameters

None.

Returns

Map(string: (property: font-weight))

Example

$map: gtw-sass.get-font-weight-map();

Requires

Used by

img (alias for get-image)

@function img() { ... }

Refer to get-image.

get-image (aliased as img )

@function get-image($key) { ... }

Description

Get value in $image-map by key, you can also use its alias "img()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Url —

The URL of the corresponding image of the key

Example

div {
  background-image: gtw-sass.get-image(example-icon); // background-image: url('path-to-example-icon');
}

Requires

Used by

get-image-map

@function get-image-map() { ... }

Description

Get the whole $image-map

Parameters

None.

Returns

Map(string: string)

Example

$map: gtw-sass.get-image-map();

Requires

Used by

ratio-padding (alias for get-ratio-in-padding)

@function ratio-padding() { ... }

Refer to get-ratio-in-padding.

get-ratio-in-padding (aliased as ratio-padding )

@function get-ratio-in-padding($key) { ... }

Description

Get value in $ratio-in-padding-map by key, you can also use its alias "ratio-padding()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

% —

The ratio in percentage for applying padding rule

Example

div {
  padding: gtw-sass.get-ratio-in-padding('1:1'); // padding: 100%;
}

Requires

Used by

get-ratio-in-padding-map

@function get-ratio-in-padding-map() { ... }

Description

Get the whole $ratio-in-padding-map

Parameters

None.

Returns

Map(string: %)

Example

$map: gtw-sass.get-ratio-in-padding-map();

Requires

Used by

setting (alias for get-setting)

@function setting() { ... }

Refer to get-setting.

get-setting (aliased as setting )

@function get-setting($key) { ... }

Description

Get value in $setting-map by key, you can also use its alias "setting()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Integer —

The value of setting of that specified element type

Example

$isDesktopClass: gtw-sass.get-setting(modernizr-is-desktop); // is-desktop;

Requires

Used by

get-setting-map

@function get-setting-map() { ... }

Description

Get the whole $setting-map

Parameters

None.

Returns

Map(string: any)

Example

$map: gtw-sass.get-setting-map();

Requires

Used by

create-typography

@function create-typography($fs, $fw, $lh, $color, $additional) { ... }

Description

Create a new typography to make sure everything in the correct format

Parameters

NameDescriptionTypeDefault value
$fs

Font size of the typography

Property: font-size—
$fw

Font weight of the typography, must be a key defined in $font-weight-map

String—
$lh

Line height of the typography

Property: line-height—
$color

Available color of the typography, must be a key defined in $color-map, the first color will be the default color of that typography

List(string)—
$additional

Any other css properties to add to this typography

Map(css property name: value)—

Example

$newTypography: gtw-sass.create-typography(1rem, normal, normal, (black), ());

Requires

typography (alias for get-typography)

@function typography() { ... }

Refer to get-typography.

get-typography (aliased as typography )

@function get-typography($key) { ... }

Description

Get value in $typography-map by key, you can also use its alias "typography()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Map —

The corresponding typography of the key

Example

// Both body or 'body' accepted
$typography: gtw-sass.get-typography(body); // $typography: (fs: 1rem, fw: normal, lh: normal, color: (), additional: ());

Requires

Used by

get-typography-map

@function get-typography-map() { ... }

Description

Get the whole $typography-map

Parameters

None.

Returns

Map(string: ( fs: property font-size, fw: font-weight name from $font-weight-map, lh: property line-height, color: list( color name from $color-map ), additional: map( any css properties ) ))

Example

$map: gtw-sass.get-typography-map();

Requires

Used by

z-index (alias for get-z-index)

@function z-index() { ... }

Refer to get-z-index.

get-z-index (aliased as z-index )

@function get-z-index($key) { ... }

Description

Get value in $z-index-map by key, you can also use its alias "z-index()"

Parameters

NameDescriptionTypeDefault value
$key

The key of the value you want to retrieve

String—

Returns

Integer —

The value of z-index of that specified element type

Example

div {
  z-index: gtw-sass.get-z-index(root); // z-index: 0;
}

Requires

Used by

get-z-index-map

@function get-z-index-map() { ... }

Description

Get the whole $z-index-map

Parameters

None.

Returns

Map(string: integer)

Example

$map: gtw-sass.get-z-index-map();

Requires

Used by

mixins

remove-breakpoint

@mixin remove-breakpoint($keys) { ... }

Description

Remove key-value pair from $breakpoint-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-breakpoint(xxxxl, xxxxxl);

Requires

set-breakpoint

@mixin set-breakpoint($key, $value: null) { ... }

Description

Set value to $breakpoint-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Widthnull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-breakpoint(xxxxl, 4096px);

// Example 2 - Using map
@include gtw-sass.set-breakpoint((
  xxxxl: 4096px,
  xxxxxl: 8192px
));

Throws

  • Uncaught Error: 0px not exist in $breakpoint-map, please add a key-value pair of 0px to $breakpoint-map at [mixin] set-breakpoint

Requires

Used by

remove-color

@mixin remove-color($keys) { ... }

Description

Remove key-value pair from $color-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-color(red, green, blue);

Requires

set-color

@mixin set-color($key, $value: null) { ... }

Description

Set value to $color-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
// Both red or 'red' accepted
@include gtw-sass.set-color(red, #FF0000);

// Example 2 - Using map
// Both red or 'red' accepted
@include gtw-sass.set-color((
  red: #FF0000,
  green: #00FF00,
  blue: #0000FF
));

Requires

Used by

set-color-css-variables

@mixin set-color-css-variables() { ... }

Description

Set all colors in $color-map as css variable in :root, make sure you use this mixin after you overrode colors of $color-map in gtw-sass.extend.scss

Parameters

None.

Example

@include gtw-sass.set-color-css-variables();

Requires

remove-font-weight

@mixin remove-font-weight($keys) { ... }

Description

Remove key-value pair from $font-weight-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-font-weight(extra-bold, extra-light);

Requires

set-font-weight

@mixin set-font-weight($key, $value: null) { ... }

Description

Set value to $font-weight-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-font-weight(extra-bold, 900);

// Example 2 - Using map
@include gtw-sass.set-font-weight((
  extra-bold, 900,
  extra-light, 100
));

Requires

Used by

remove-image

@mixin remove-image($keys) { ... }

Description

Remove key-value pair from $image-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-image(example-icon, example-profile-pic);

Requires

set-image

@mixin set-image($key, $value: null) { ... }

Description

Set value to $image-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-image(example-icon, 'path-to-example-icon');

// Example 2 - Using map
@include gtw-sass.set-image((
  example-icon: 'path-to-example-icon',
  example-profile-pic: 'path-to-example-profile-pic'
));

Requires

Used by

remove-ratio-in-padding

@mixin remove-ratio-in-padding($keys) { ... }

Description

Remove key-value pair from $ratio-in-padding-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-ratio-in-padding(1:100, 1:1000);

Requires

set-ratio-in-padding

@mixin set-ratio-in-padding($key, $value: null) { ... }

Description

Set value to $ratio-in-padding-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-ratio-in-padding('1:100', 10000%);

// Example 2 - Using key-value pair with formula.ratio-to-padding-in-percentage()
@include gtw-sass.set-ratio-in-padding('1:100', formula.ratio-to-padding-in-percentage(1, 100));

// Example 3 - Using map
@include gtw-sass.set-ratio-in-padding((
  '1:100' : 10000%,
  '1:1000': 100000%
));

// Example 4 - Using map with formula.ratio-to-padding-in-percentage()
@include gtw-sass.set-ratio-in-padding((
  '1:100' : formula.ratio-to-padding-in-percentage(1, 100),
  '1:1000': formula.ratio-to-padding-in-percentage(1, 1000)
));

Requires

Used by

remove-setting

@mixin remove-setting($keys) { ... }

Description

Remove key-value pair from $setting-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-setting(new-setting, another-settings);

Throws

  • Uncaught Error:

Requires

set-setting

@mixin set-setting($key, $value: null) { ... }

Description

Set value to $setting-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-setting('new-setting', true);

// Example 2 - Using map
@include gtw-sass.set-setting((
  new-setting: true,
  another-setting: false
));

Requires

Used by

remove-typography

@mixin remove-typography($keys) { ... }

Description

Remove key-value pair from $typography-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-typography(body, remark);

Requires

set-typography

@mixin set-typography($key, $value: null) { ... }

Description

Set value to $typography-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Mapnull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-typography(body, (fs: 1rem, fw: normal, lh: normal, color: (black), additional: ()));

// Example 2 - Using key-value pair with create-typography()
@include gtw-sass.set-typography(body, gtw-sass.create-typography(1rem, normal, normal, (black), ()));

// Example 3 - Using map
@include gtw-sass.set-typography((
  body : (fs: 1rem, fw: normal, lh: normal, color: (black), additional: ()),
  remark: (fs: 0.8rem, fw: normal, lh: normal, color: (black), additional: ())
));

// Example 4 - Using map with create-typography()
@include gtw-sass.set-typography((
  body : gtw-sass.create-typography(1rem, normal, normal, (black), ()),
  remark: gtw-sass.create-typography(0.8rem, normal, normal, (black), ())
));

Requires

Used by

typography

@mixin typography($name, $color: null, $alpha: null) { ... }

Description

Insert rules of a typography by its name, and can override its color

Parameters

NameDescriptionTypeDefault value
$name

Name of the typography

String—
$color

Optional, name of the color, will override the default color(the first color in the color list in that typography)

Stringnull
$alpha

Optional, Specifies the opacity for the color

Numbernull

Requires

Used by

remove-z-index

@mixin remove-z-index($keys) { ... }

Description

Remove key-value pair from $z-index-map by key

Parameters

NameDescriptionTypeDefault value
$keys

Key-value pair(s) to remove

Arglist[string]—

Example

@include gtw-sass.remove-z-index(datepicker, dropdown, tooltips);

Requires

set-z-index

@mixin set-z-index($key, $value: null) { ... }

Description

Set value to $z-index-map by key-value pair or by map

Parameters

NameDescriptionTypeDefault value
$key

The key of the new value or the map you want to merge

String or Map—
$value

They value of the new key or null if you merging a map

Anynull

Example

// Example 1 - Using key-value pair
@include gtw-sass.set-z-index(datepicker, 201);

// Example 2 - Using map
@include gtw-sass.set-z-index((
  datepicker: 201,
  dropdown: 202,
  tooltips: 203
));

Requires

Used by

[Global] Constants

variables

e

$e: math.$e;

Description

Equal to the value of the mathematical constant e

Type

Number

en

$en: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
  'Liberation Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

Description

List of default en system font

Type

Property: font-family

tc

$tc: '华文细黑', 'STXihei', 'PingFang TC', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑',
  'Microsoft Yahei', '宋体', 'SimSun';

Description

List of default tc system font

Type

Property: font-family

sc

$sc: '华文细黑', 'STXihei', 'PingFang TC', '微软雅黑体', 'Microsoft YaHei New', '微软雅黑',
  'Microsoft Yahei', '宋体', 'SimSun';

Description

List of default sc system font

Type

Property: font-family

font-family-fallback-en

$font-family-fallback-en: $en, $tc;

Description

Default en font family with fallback, you can extend your own font in front this to keep the fallback

Type

Property: font-family

Example

font-family: 'Open Sans', gtw-sass.$font-family-fallback-en;

Used by

font-family-fallback-sc

$font-family-fallback-sc: $tc, $en;

Description

Default tc font family with fallback, chinese font insert en font at the back to fallback when en character appear, you can extend your own font in front this to keep the fallback

Type

Property: font-family

Example

font-family: 'Open Sans', gtw-sass.$font-family-fallback-sc;

Used by

font-family-fallback-tc

$font-family-fallback-tc: $sc, $en;

Description

Default sc font family with fallback, chinese font insert en font at the back to fallback when en character appear, you can extend your own font in front this to keep the fallback

Type

Property: font-family

Example

font-family: 'Open Sans', gtw-sass.$font-family-fallback-tc;

Used by

pi

$pi: math.$pi;

Description

Equal to the value of the mathematical constant π

Type

Number

[Types] List

functions

concat

@function concat($lists) { ... }

Description

Concat one or more then one list together and return new list

Parameters

NameDescriptionTypeDefault value
$lists

Items that need to be concat into a list, item can be a single variable or a list

Arglist[any]—

Returns

List —

A list that concatted all items provided

Example

// Example 1 - Concat a single item
$a: (1, 2, 3, 4, 5);
$b: gtw-sass.concat($a, 6);

// Example 2 - Concat multiple items
$a: (1, 2, 3, 4, 5);
$b: gtw-sass.concat($a, 6, 7, 8, 9, 10);

// Example 3 - Concat a single list
$a: (1, 2, 3, 4, 5);
$b: (6, 7, 8, 9, 10);
$c: gtw-sass.concat($a, $b);

// Example 3 - Concat multiple lists
$a: (1, 2, 3, 4, 5);
$b: (6, 7, 8, 9, 10);
$c: (11, 12, 13, 14, 15);
$d: gtw-sass.concat($a, $b, $c);

Used by

include

@function include($list, $value) { ... }

Description

Check if a value exist in the list

Parameters

NameDescriptionTypeDefault value
$list

The list to check

List—
$value

The value to check

Any—

Returns

Boolean —

Return true if the value exist in the list

Example

$exist: gtw-sass.include((1, 2, 3, 4, 5), 5);

Used by

indexOf

@function indexOf($list, $value) { ... }

Description

Return the index of a value in the list

Parameters

NameDescriptionTypeDefault value
$list

The list to check

List—
$value

The value to check

Any—

Returns

Integer —

Index of the value in the list, return -1 if value not exist

Example

$index: gtw-sass.indexOf((1, 2, 3, 4, 5), 3);

pop

@function pop($list) { ... }

Description

Remove last item from list and return the popped item and the new list

Parameters

NameDescriptionTypeDefault value
$list

The list to pop item from

List—

Returns

List(any, list) —

Return the popped item and the updated list after pop

Example

$popped: gtw-sass.pop((1, 2, 3, 4, 5));

Requires

Used by

push

@function push($list, $value, $separator) { ... }

Description

Push a value to the end of list and return new list

Parameters

NameDescriptionTypeDefault value
$list

The list to push item to

List—
$value

The value to push into the list

Any—
$separator

The separator in the list

Comma or Slash or Space—

Returns

List —

The new list new value pushed into

Example

$pushed: gtw-sass.push((1, 2, 3, 4, 5), 1);

Used by

reverse

@function reverse($list) { ... }

Description

Return a reversed list

Parameters

NameDescriptionTypeDefault value
$list

The list to reverse

List—

Returns

List —

The reversed list

Example

$reversed: gtw-sass.reverse((1, 2, 3, 4, 5));

Requires

Used by

shift

@function shift($list) { ... }

Description

Remove first item from list and return the shifted item and the new list

Parameters

NameDescriptionTypeDefault value
$list

The list to shift item from

List—

Returns

List(any, list) —

Return the shifted item and the updated list after shift

Example

$shifted: gtw-sass.shift((1, 2, 3, 4, 5));

Requires

sort

@function sort($list, $reverse: false) { ... }

Description

Return sorted number list from smallest to largest

Parameters

NameDescriptionTypeDefault value
$list

The number list to sort

List(number)—
$reverse

true to reverse the sorted list from largest to smallest

Booleanfalse

Returns

List(number) —

The sorted number list

Example

$sorted: gtw-sass.sort((4, 2, 5, 3, 1));

Requires

splice

@function splice($list, $search, $count) { ... }

Description

Remove certain number of items from list at specific index and return new list

Parameters

NameDescriptionTypeDefault value
$list

The list to splice item from

List—
$search

The index to start splicing from

Integer—
$count

The number of item to splice

Integer—

Returns

List —

The new list after splice

Example

$spliced: gtw-sass.splice((1, 2, 3, 4, 5), 2, 3);

Requires

Used by

unshift

@function unshift($list, $value) { ... }

Description

Add a value at the front of list and return new list

Parameters

NameDescriptionTypeDefault value
$list

The list to unshift item to

List—
$value

The value to unshift into the list

Any—

Returns

List —

The new list after unshift

Example

$unshifted: gtw-sass.unshift((1, 2, 3, 4, 5), 0);

[Types] Map

functions

fetch

@function fetch($map, $keys) { ... }

Description

Get value from map recursively

Parameters

NameDescriptionTypeDefault value
$map

Map to get value from

Map—
$keys

Key(s) to get value from the map

List[string], arglist[string]—

Returns

Any —

The value retrieved

Example

$value: gtw-sass.map-fetch((a: (b: (c: 1))), a, b, c);

Requires

merge-all

@function merge-all($maps) { ... }

Description

Merge maps one after one

Parameters

NameDescriptionTypeDefault value
$maps

Maps that need to merge together

Map—

Returns

Map —

Map that merge all maps

Example

$newMap: gtw-sass.merge-all((a: 1), (b: 2), (c: 3));

Requires

sort-by-value

@function sort-by-value($map) { ... }

Description

Sort map by value

Parameters

NameDescriptionTypeDefault value
$map

Map to sort

Map(string: number)—

Returns

Map(string: number) —

Sorted map

Example

$sortedMap: gtw-sass.map-sort-by-value((
  a: 1,
  c: 3,
  b: 2
));

Requires

Used by

new

@function new() { ... }

Description

Create a new empty map

Parameters

None.

Returns

Map —

An empty map

Example

$newMap: gtw-sass.map-new();

Used by

[Types] String

functions

replace

@function replace($src, $target, $replace) { ... }

Description

Replace a specified string with provided string

Parameters

NameDescriptionTypeDefault value
$src

The source string

String—
$target

The target string to look for

String—
$replace

The string to replace the target

String—

Returns

String —

The source string that replaced with the replace string

Example

$replaced: gtw-sass.string-replace('I go to school by bus', 'bus', 'mini bus');

Requires

split

@function split($string, $separator: ' ') { ... }

Description

Split provided string into list by the provided separator

Parameters

NameDescriptionTypeDefault value
$string

The string that need to be split

String—
$separator

The separator to split $string

String' '

Returns

List —

The list of string after splitted by the separator

Example

$a: gtw-sass.string-split('1,2,3,4,5', ',');

Requires

Used by

stringify

@function stringify($value, $acceptNull: false) { ... }

Description

Stringify a provided value

Parameters

NameDescriptionTypeDefault value
$value

The value that need to be stringify

Any(except function, map)—
$acceptNull

Can the to-string function accept null as a value

Booleanfalse

Returns

String —

Stringified value

Example

$a: gtw-sass.string-stringify(12345);

Throws

  • Uncaught Error: Failed to parse #{$value} to string at [function] stringify

Requires

Used by

[Bundle] Normalize

mixins

normalize

@mixin normalize() { ... }

Description

Makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing

Parameters

None.

Example

@include gtw-sass.normalize(); // No need to wrap it with any tag

Used by

Links

[Bundle] Tag

mixins

headings

@mixin headings() { ... }

Description

Include this mixin to include headings related tags, including: h1, h2, h3, h4, h5, h6

Parameters

None.

Example

@include gtw-sass.tags-bundle-headings();

Requires

[Bundle] Class

mixins

clear

@mixin clear() { ... }

Description

Include this mixin to include clear related classes, including: .clear-both, .clear-left, .clear-right, .clear-after-both, .clear-after-left, .clear-after-right

Parameters

None.

Example

@include gtw-sass.classes-bundle-clear();

Requires

Links

element

@mixin element() { ... }

Description

Include this mixin to include element related classes, including: .el-no-select

Parameters

None.

Example

@include gtw-sass.classes-bundle-element();

Requires

Links

hidden

@mixin hidden() { ... }

Description

Include this mixin to include hidden related classes, including: .hidden, .hidden-important, .preload, .preload-important, .template, .template-important

Parameters

None.

Example

@include gtw-sass.classes-bundle-hidden();

ratio

@mixin ratio() { ... }

Description

Include this mixin to include ratio related classes, including: .ratio-1-1 .ratio-4-3, .ratio-16-9, etc...(See $ratio-in-padding-map to know more)

Parameters

None.

Example

@include gtw-sass.classes-bundle-ratio();

Requires

scroll

@mixin scroll() { ... }

Description

Include this mixin to include ratio related classes, including: .scroll-enabled, .scroll-disabled, .scroll-x-enabled, .scroll-x-disabled, .scroll-y-enabled, .scroll-y-disabled

Parameters

None.

Example

@include gtw-sass.classes-bundle-scroll();

Requires

Used by

typography

@mixin typography() { ... }

Description

Include this mixin to include typography related tags, including everything from $typography-map

Parameters

None.

Example

@include gtw-sass.classes-bundle-typography();

Requires

- Animation

mixins

create

@mixin create($animationName) { ... }

Description

Create CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence

Parameters

NameDescriptionTypeDefault value
$animationName

Name of the animation

String—

Example

@include gtw-sass.animation-create(slide-in) {
  from {
   transform: translateX(0%);
  }
  to {
   transform: translateX(100%);
 }
}

Links

use

@mixin use($value) { ... }

Parameters

NameDescriptionTypeDefault value
$value

Applies an animation between styles

Property: animation—

Example

div {
 @include gtw-sass.animation-use(slide-in 5s);
}

Links

- Background

functions

create-bg-img

@function create-bg-img($imageSrc, $size: cover, $position: center, $repeat: no-repeat) { ... }

Description

Generate background-image rule for background use

Parameters

NameDescriptionTypeDefault value
$imageSrc

The src of the image to use as the background image

Url—
$size

Sets the size of the element's background image

Property: background-sizecover
$position

Sets the initial position for each background image

Property: background-positioncenter
$repeat

Sets how background images are repeated

Property: background-repeatno-repeat

Example

div {
  background: gtw-sass.bg-create-bg-img(url(example.png), cover, center, no-repeat);
}

Requires

Used by

Links

create-image-set

@function create-image-set($bgGroup: ( Resolution: url ), $size: cover, $position: center, $repeat: no-repeat) { ... }

Description

Generate background-image rule for background use

Parameters

NameDescriptionTypeDefault value
$bgGroup

The background url in different resolution

Map( Resolution: url )
$size

Sets the size of the element's background image

Property: background-sizecover
$position

Sets the initial position for each background image

Property: background-positioncenter
$repeat

Sets how background images are repeated

Property: background-repeatno-repeat

Returns

Map(list: list, fallbackurl: string) —

Value of background imageSet list and fallback url

Example

div {
  $imageSet: gtw-sass.bg-create-image-set($bgGroup);
  background-image: image-set(map.get($imageSet, list));
}

Requires

Used by

Links

create-linear-gradient

@function create-linear-gradient($colorStops, $startPoint: top, $size: auto auto, $position: 0% 0%, $repeat: repeat) { ... }

Description

Generate linear-gradient rule for background use

Parameters

NameDescriptionTypeDefault value
$colorStops

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. Read the links to know more

Linear-color-stop—
$startPoint

The position of the gradient line's starting point

Top or Right or Bottom or Left or Top right or Top left or Bottom right or Bottom left or Degtop
$size

Sets the size of the element's background gradient

Property: background-sizeauto auto
$position

Sets the initial position for each background gradient

Property: background-position0% 0%
$repeat

Sets how background images are repeated

Property: background-repeatrepeat

Returns

Linear-gradient —

The linear-gradient rule

Example

div {
  background: gtw-sass.bg-create-linear-gradient((black, white), cover, center, no-repeat, top);
}

Throws

  • Uncaught Error: At least two color stops are required for a linear-gradient at [function] create-linear-gradient

Requires

Used by

Links

mixins

icon

@mixin icon($imageSrc, $size: contain, $position: center, $repeat: no-repeat) { ... }

Description

Set a background icon for a element

Parameters

NameDescriptionTypeDefault value
$imageSrc

The src of the image to use as the background image

Url—
$size

Sets the size of the element's background image

Property: background-sizecontain
$position

Sets the initial position for each background image

Property: background-positioncenter
$repeat

Sets how background images are repeated

Property: background-repeatno-repeat

Example

div {
  @include gtw-sass.bg-icon(url(example.png));
}

Requires

Links

image

@mixin image($imageSrc, $size: contain, $position: center, $repeat: no-repeat) { ... }

Description

Set a background image for a element

Parameters

NameDescriptionTypeDefault value
$imageSrc

The src of the image to use as the background image

Url—
$size

Sets the size of the element's background image

Property: background-sizecontain
$position

Sets the initial position for each background image

Property: background-positioncenter
$repeat

Sets how background images are repeated

Property: background-repeatno-repeat

Example

div {
  @include gtw-sass.bg-image(url(example.png));
}

Requires

Links

image-set

@mixin image-set($bgGroup: ($resolution: $url), $size: auto auto, $position: 0% 0%, $repeat: repeat) { ... }

Description

Delivers the most appropriate background image for browser

Parameters

NameDescriptionTypeDefault value
$bgGroup

The background group in different resolution

Map($resolution: $url)
$size

Sets the size of the element's background gradient

Property: background-sizeauto auto
$position

Sets the initial position for each background gradient

Property: background-position0% 0%
$repeat

Sets how background images are repeated

Property: background-repeatrepeat

Example

div {
  @include gtw-sass.bg-image-set((
    '1x': url(example_1x.png),
    '2x': url(example_2x.png),
    '3x': url(example_3x.png),
  ));
}

Requires

Links

liner-gradient

@mixin liner-gradient($colorStops, $startPoint: top, $size: auto auto, $position: 0% 0%, $repeat: repeat) { ... }

Description

Set a liner gradient background for a element

Parameters

NameDescriptionTypeDefault value
$colorStops

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. Read the links to know more

Linear-color-stop—
$startPoint

The position of the gradient line's starting point

Top or Right or Bottom or Left or Top right or Top left or Bottom right or Bottom left or Degtop
$size

Sets the size of the element's background gradient

Property: background-sizeauto auto
$position

Sets the initial position for each background gradient

Property: background-position0% 0%
$repeat

Sets how background images are repeated

Property: background-repeatrepeat

Example

div {
  @include gtw-sass.bg-liner-gradient((black, white));
}

Requires

Links

- Breakpoint

mixins

at

@mixin at($bp, $media: null) { ... }

Description

Wraps CSS code with a media query confined by a given breakpoint

Parameters

NameDescriptionTypeDefault value
$bp

name of breakpoint

String—
$media

a media query to prend the result with

Map or Nullnull

Example

// Example 1 - Without media
div {
  @include gtw-sass.bp-at(s) {
    color: red;
  }
}

// Example 2 - With media
div {
  @include gtw-sass.bp-at(s, (screen, print)) {
    color: red;
  }
}

// Example 3 - More then 1 breakpoint
div {
  @include gtw-sass.bp-at((s, l), (screen, print)) {
    color: red;
  }
}

Requires

Links

between

@mixin between($bp-start, $bp-end, $media: null) { ... }

Description

Wraps CSS code with a media query confined within two breakpoints

Parameters

NameDescriptionTypeDefault value
$bp-start

name of starting breakpoint

String—
$bp-end

name of ending breakpoint, inclusive

String—
$media

a media query to prend the result with

Map or Nullnull

Example

// Example 1 - Without media
div {
  @include gtw-sass.bp-between(s, l) {
    color: red;
  }
}

// Example 2 - With media
.foo {
  @include gtw-sass.bp-between(s, m, (screen, print)) {
    color: red;
  }
}

Requires

Links

from

@mixin from($bp, $media: null) { ... }

Description

Wraps CSS code with a media query confined by a given breakpoint and larger

Parameters

NameDescriptionTypeDefault value
$bp

name of breakpoint

String—
$media

a media query to prend the result with

Map or Nullnull

Example

// Example 1 - Without media
div {
  @include gtw-sass.bp-from(s) {
    color: red;
  }
}

// Example 2 - With media
div {
  @include gtw-sass.bp-from(m, (screen, print)) {
    color: red;
  }
}

Requires

Links

to

@mixin to($bp, $media: null) { ... }

Description

Wraps CSS code with a media query confined by a given breakpoint and smaller

Parameters

NameDescriptionTypeDefault value
$bp

name of breakpoint

String—
$media

a media query to prend the result with

Map or Nullnull

Example

// Example 1 - Without media
div {
  @include gtw-sass.bp-to(s) {
    color: red;
  }
}

// Example 2 - With media
div {
  @include gtw-sass.bp-to(m, (screen, print)) {
    color: red;
  }
}

Requires

Links

- Checkbox and Radio button

mixins

custom-checkbox

@mixin custom-checkbox($options: (), $options.size: 20px, $options.invalidAttr: [checkbox-invalid="true", $options.invalidClass: .checkbox-invalid, $options.checked: A default image, $options.checkedDisabled: A default image, $options.checkedInvalid: A default image, $options.indeterminate: A default image, $options.indeterminateDisabled: A default image, $options.indeterminateInvalid: A default image, $options.unchecked: A default image, $options.uncheckedDisabled: A default image, $options.uncheckedInvalid: A default image) { ... }

Description

Customize the icons of checkbox

Parameters

NameDescriptionTypeDefault value
$options

The options to customize the checkbox

Map()
$options.size

[Optional] The size of the checkbox

Length20px
$options.invalidAttr

] - [Optional] The attribute to tell if the checkbox is invalid, either one of attr or class is enough, from global setting by default

String[checkbox-invalid="true"
$options.invalidClass

[Optional] The class to tell if the checkbox is invalid, either one of attr or class is enough, from global setting by default

String.checkbox-invalid
$options.checked

[Optional] The image when the checkbox is checked

UrlA default image
$options.checkedDisabled

[Optional] The image when the checkbox is checked and disabled

UrlA default image
$options.checkedInvalid

[Optional] The image when the checkbox is checked and with error

UrlA default image
$options.indeterminate

[Optional] The image when the checkbox is indeterminate

UrlA default image
$options.indeterminateDisabled

[Optional] The image when the checkbox is indeterminate and disabled

UrlA default image
$options.indeterminateInvalid

[Optional] The image when the checkbox is indeterminate and with error

UrlA default image
$options.unchecked

[Optional] The image when the checkbox is unchecked

UrlA default image
$options.uncheckedDisabled

[Optional] The image when the checkbox is unchecked and disabled

UrlA default image
$options.uncheckedInvalid

[Optional] The image when the checkbox is unchecked and with error

UrlA default image

Example

.container-of-checkbox {
  @include gtw-sass.custom-checkbox((
    size: 15px,
    checked: URL(../path-to-another-image)
  ));
}

Requires

custom-radio-button

@mixin custom-radio-button($options: (), $options.size: 20px, $options.invalidAttr: [radio-button-invalid="true", $options.invalidClass: .radio-button-invalid, $options.checked: A default image, $options.checkedDisabled: A default image, $options.checkedInvalid: A default image, $options.unchecked: A default image, $options.uncheckedDisabled: A default image, $options.uncheckedInvalid: A default image) { ... }

Description

Customize the icons of radio button

Parameters

NameDescriptionTypeDefault value
$options

The options to customize the checkbox

Map()
$options.size

[Optional] The size of the checkbox

Length20px
$options.invalidAttr

] - [Optional] The attribute to tell if the radio button is invalid, either one of attr or class is enough, from global setting by default

String[radio-button-invalid="true"
$options.invalidClass

[Optional] The class to tell if the radio button is invalid, either one of attr or class is enough, from global setting by default

String.radio-button-invalid
$options.checked

[Optional] The image when the radio button is checked

UrlA default image
$options.checkedDisabled

[Optional] The image when the radio button is checked and disabled

UrlA default image
$options.checkedInvalid

[Optional] The image when the radio button is checked and with error

UrlA default image
$options.unchecked

[Optional] The image when the radio button is unchecked

UrlA default image
$options.uncheckedDisabled

[Optional] The image when the radio button is unchecked and disabled

UrlA default image
$options.uncheckedInvalid

[Optional] The image when the radio button is unchecked and with error

UrlA default image

Example

.container-of-radio-button {
  @include gtw-sass.custom-radio-button((
    size: 15px,
    checked: URL(../path-to-another-image)
  ));
}

Requires

- Clear

mixins

clear

@mixin clear($direction: both) { ... }

Description

Specifies what should happen with the element that is next to a floating element.

Parameters

NameDescriptionTypeDefault value
$direction

Define the direction that the element is pushed below

Property: clearboth

Example

div {
  @include gtw-sass.clear-clear();
}

Links

after

@mixin after($direction: both) { ... }

Description

Specifies what should happen with the element that is next to a floating element. Using the ::after selector.

Parameters

NameDescriptionTypeDefault value
$direction

Define the direction that the element is pushed below

Property: clearboth

Example

div {
  @include gtw-sass.clear-after();
}

Used by

Links

- Color

mixins

transparent

@mixin transparent($propertyName) { ... }

Description

Apply transparent color to css property, with fallback support.

Parameters

NameDescriptionTypeDefault value
$propertyName

Any property that use color as the value

String—

Example

div {
  @include gtw-sass.color-transparent(color);
}

- Element

functions

create-box-shadow

@function create-box-shadow($color, $h, $v, $blur: 0, $spread: 0, $inset: false) { ... }

Description

Adds shadow effects around an element's frame

Parameters

NameDescriptionTypeDefault value
$color

The color of the shadow

Color—
$h

The horizontal offset of the shadow

Length—
$v

The vertical offset of the shadow

Length—
$blur

The blur radius

Length0
$spread

The spread radius

Length0
$inset

Changes the shadow from an outer shadow (outset) to an inner shadow

Boolean or 'both'false

Example

// Single shadow
div {
  box-shadow: gtw-sass.el-create-box-shadow(black, 10px, 10px, 10px, 10px);
}

// Multiple shadow
div {
  box-shadow: gtw-sass.el-create-box-shadow(black, 10px, 10px, 10px, 10px), gtw-sass.create-box-shadow(red, 10px, 10px, 10px, 10px);
}

Requires

Links

mixins

blur

@mixin blur($rate) { ... }

Description

Applies a Gaussian blur to the input image

Parameters

NameDescriptionTypeDefault value
$rate

How blur is the image

Property: blur()—

Example

div {
  @include gtw-sass.el-blur(10px);
}

Requires

Links

no-select

@mixin no-select() { ... }

Description

Make the text of the element and its sub-elements is not selectable

Parameters

None.

Example

div {
  @include gtw-sass.el-no-select();
}

Used by

Links

opacity

@mixin opacity() { ... }

Description

Sets the opacity of an element

Parameters

None.

Example

div {
  @include gtw-sass.el-opacity(0.5);
}

Links

safe-area-padding

@mixin safe-area-padding($top: true, $bottom: true) { ... }

Description

Added safe area padding to element

Parameters

NameDescriptionTypeDefault value
$top

true to add top safe area padding to element

Booleantrue
$bottom

true to add bottom safe area padding to element

Booleantrue

Example

@include gtw-sass.safe-area-padding();

Links

speech-bubble

@mixin speech-bubble($bubbleOpts: (), $bubbleOpts.color: white, $bubbleOpts.height: 90px, $bubbleOpts.padding: 10px, $bubbleOpts.radius: 5px, $bubbleOpts.width: 160px, $arrowOpts: (), $arrowOpts.direction: bottom, $arrowOpts.height: 10px, $arrowOpts.position: 10px, $arrowOpts.width: 10px, $borderOpts: (), $borderOpts.color: black, $borderOpts.width: 2px) { ... }

Description

Create a speech bubble element

Parameters

NameDescriptionTypeDefault value
$bubbleOpts

Options to config how's the bubble looks

Map(color, height, padding, radius, width)()
$bubbleOpts.color

The background color of the bubble

Colorwhite
$bubbleOpts.height

The height of the bubble

Property: height90px
$bubbleOpts.padding

The padding within the bubble

Length10px
$bubbleOpts.radius

The border radius of the bubble

Length5px
$bubbleOpts.width

The width of the bubble

Property: width160px
$arrowOpts

Options to config how's the arrow looks

Map(direction, height, position, width)()
$arrowOpts.direction

Direction of the arrow

Top or Right or Bottom or Leftbottom
$arrowOpts.height

Height of the arrow

Property: height10px
$arrowOpts.position

Position of the arrow

Length or %10px
$arrowOpts.width

Width of the arrow

Property: width10px
$borderOpts

Options to config how's the border of arrow and bubble looks

Map(color, width)()
$borderOpts.color

Border color of the speech bubble

Colorblack
$borderOpts.width

Border thickness of the speech bubble

Length2px

Example

div {
  @include gtw-sass.el-speech-bubble((
    color: white,
    height: 90px,
    padding: 10px,
    radius: 5px,
    width: 160px
  ), (
    direction: bottom,
    height: 10px,
    position: 10px,
    width: 10px
  ), (
    color: black,
    width: 2px
  ));
}

Requires

- Flex

mixins

flex

@mixin flex($growAmount: 1, $shrinkAmount: 0, $basis: auto, $useNative: false) { ... }

Description

A shorthand way for flex grow, flex shrink and flex basis status of the flex item with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$growAmount

Grow amount of the flex item

Property: flex-grow1
$shrinkAmount

Shrink amount of the flex item

Property: flex-shrink0
$basis

The basis size of the flex item

Property: flex-basisauto
$useNative

false to apply the rules in the fallback way

Booleanfalse

Example

div {
  @include gtw-sass.flex-flex();
}

Requires

Used by

Links

align-content

@mixin align-content($align: stretch) { ... }

Description

To determine how the flex items align along the main axis in flex container with box syntax fallback Similar to single item version for justify content

Parameters

NameDescriptionTypeDefault value
$align

The alignment method of the flex items on main axis in flex container

Property: align-contentstretch

Example

div {
  @include gtw-sass.flex-align-content();
}

Used by

Links

align-items

@mixin align-items($align: stretch) { ... }

Description

To determine how the flex items align along the cross axis in flex container with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$align

The alignment method of the flex items on cross axis in flex container

Property: align-itemsstretch

Example

div {
  @include gtw-sass.flex-align-items();
}

Used by

Links

align-self

@mixin align-self($align: auto) { ... }

Description

To determine how the flex items align along the cross axis in flex container with box syntax fallback Similar to single item version for align item

Parameters

NameDescriptionTypeDefault value
$align

The alignment method of the flex items on cross axis in flex container

Property: align-selfauto

Example

div {
  @include gtw-sass.flex-align-self();
}

Links

basis

@mixin basis($basis: auto) { ... }

Description

Define the basis size of the flex item with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$basis

The basis size of the flex item

Property: flex-basisauto

Example

div {
  @include gtw-sass.flex-basis();
}

Used by

Links

box

@mixin box($isInline: false) { ... }

Description

Create a flex element with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$isInline

true to make a inline flex element

Booleanfalse

Example

div {
  @include gtw-sass.flex-box();
}

Used by

Links

child

@mixin child($growAmount: 1, $shrinkAmount: 0, $basis: auto, $useNative: false) { ... }

Description

Short cut to set grow, shrink and basis of flex items

Parameters

NameDescriptionTypeDefault value
$growAmount

Grow amount of the flex item

Property: flex-grow1
$shrinkAmount

Shrink amount of the flex item

Property: flex-shrink0
$basis

The basis size of the flex item

Property: flex-basisauto
$useNative

false to apply the rules in the fallback way

Booleanfalse

Example

div {
  @include gtw-sass.flex-child();
}

Requires

Links

container

@mixin container($direction: row, $justifyContent: flex-start, $alignItems: stretch, $alignContent: stretch, $wrap: nowrap, $isInline: false) { ... }

Description

Define a flex container

Parameters

NameDescriptionTypeDefault value
$direction

The flex direction of the flex items

Property: flex-directionrow
$justifyContent

The alignment method of the flex items on main axis in flex container

Property: justify-contentflex-start
$alignItems

The alignment method of the flex items on cross axis in flex container

Property: align-itemsstretch
$alignContent

The alignment method of the flex items on main axis in flex container

Property: align-contentstretch
$wrap

The wrap status of the flex items

Property: flex-wrapnowrap
$isInline

Pass true as value to make a inline flex element

Booleanfalse

Example

div {
  @include gtw-sass.flex-container();
}

Requires

Used by

Links

container-items-align-center

@mixin container-items-align-center($direction: row, $wrap: nowrap, $isInline: false) { ... }

Description

Shortcut to center all flex items in the parent

Parameters

NameDescriptionTypeDefault value
$direction

The flex direction of the flex items

Property: flex-directionrow
$wrap

The wrap status of the flex items

Property: flex-wrapnowrap
$isInline

Pass true as value to make a inline flex element

Booleanfalse

Example

div {
  @include gtw-sass.flex-container-items-align-center();
}

Requires

Links

container-items-vertical-align-center

@mixin container-items-vertical-align-center($direction: row, $wrap: nowrap, $isInline: false) { ... }

Description

Shortcut to center all flex items vertically in the parent

Parameters

NameDescriptionTypeDefault value
$direction

The flex direction of the flex items

Property: flex-directionrow
$wrap

The wrap status of the flex items

Property: flex-wrapnowrap
$isInline

Pass true as value to make a inline flex element

Booleanfalse

Example

div {
  @include gtw-sass.flex-container-items-vertical-align-center();
}

Requires

Links

direction

@mixin direction($direction: row) { ... }

Description

Define the flex direction of the flex element with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$direction

The flex direction of the flex items

Property: flex-directionrow

Example

div {
  @include gtw-sass.flex-direction();
}

Used by

Links

flow

@mixin flow($rules: row nowrap, $useNative: false) { ... }

Description

A shorthand way for flex direction and wrap status of the flex element with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$rules

The flex direction and the wrap status of the flex element

Property: flex-flowrow nowrap
$useNative

false to apply the rules in the fallback way

Booleanfalse

Example

div {
  @include gtw-sass.flex-flow();
}

Requires

Links

grow

@mixin grow($amount: 1) { ... }

Description

Define the grow amount of the flex item with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$amount

Grow amount of the flex item

Property: flex-grow1

Example

div {
  @include gtw-sass.flex-grow();
}

Used by

Links

justify-content

@mixin justify-content($align: flex-start) { ... }

Description

To determine how the flex items align along the main axis in flex container with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$align

The alignment method of the flex items on main axis in flex container

Property: justify-contentflex-start

Example

div {
  @include gtw-sass.flex-justify-content();
}

Used by

Links

order

@mixin order($order: 0) { ... }

Description

Define the order of the flex item with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$order

Order of the flex item

Property: flex-order0

Example

div {
  @include gtw-sass.flex-order();
}

Links

shrink

@mixin shrink($amount: 0) { ... }

Description

Define the shrink amount of the flex item with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$amount

Shrink amount of the flex item

Property: flex-shrink0

Example

div {
  @include gtw-sass.flex-shrink();
}

Used by

Links

wrap

@mixin wrap($wrap: nowrap) { ... }

Description

Define the warp status of the flex element with box syntax fallback

Parameters

NameDescriptionTypeDefault value
$wrap

The wrap status of the flex items

Property: flex-wrapnowrap

Example

div {
  @include gtw-sass.flex-wrap();
}

Used by

Links

- Formula

functions

ratio-to-padding-in-percentage

@function ratio-to-padding-in-percentage($x, $y) { ... }

Description

Calculate ratio to padding in percentage

Parameters

NameDescriptionTypeDefault value
$x

Represent the proportion of width

Number—
$y

Represent the proportion of height

Number—

Returns

% —

Ratio in percentage for padding

Example

$percentage: gtw-sass.ratio-to-padding-in-percentage(16, 9);

Used by

- Is

functions

color

@function color($value) { ... }

Description

Check if a value is a color

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a color

Example

$isColor: gtw-sass.is-color(#000000);

deg

@function deg($value) { ... }

Description

Check if a value is a degree

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a degree(with unit "deg")

Example

$isDeg: gtw-sass.is-deg(360deg);

int

@function int($value) { ... }

Description

Check if a value is a integer

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a integer(without floating point and unit, number with unit is length)

Example

$isInt: gtw-sass.is-int(1);

Requires

Used by

length

@function length($value) { ... }

Description

Check if a value is a length

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a length(with unit, number without unit is number)

Example

$isLength: gtw-sass.is-length(1px);

Used by

list

@function list($value) { ... }

Description

Check if a value is a list

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a list

Example

$isList: gtw-sass.is-list((1, 2, 3, 4, 5));

Used by

map

@function map($value) { ... }

Description

Check if a value is a map

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a map

Example

$isMap: gtw-sass.is-map((a: 1));

Used by

null

@function null($value) { ... }

Description

Check if a value is null

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is null

Example

$isNull: gtw-sass.is-null(null);

Used by

number

@function number($value) { ... }

Description

Check if a value is a number

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a number(without unit, number with unit is length)

Example

$isNumber: gtw-sass.is-number(1.1);

Used by

string

@function string($value) { ... }

Description

Check if a value is a string

Parameters

NameDescriptionTypeDefault value
$value

Any value that you want to test

Any—

Returns

Boolean —

True if $value is a string

Example

$isString: gtw-sass.is-string('hello world');

Used by

- Margin

mixins

x

@mixin x($m-left, $m-right: $m-left) { ... }

Description

Creating space on the left and right of the elements, outside of any defined borders.

Parameters

NameDescriptionTypeDefault value
$m-left

The margin-left property sets the left margin of an element.

Property: margin-left—
$m-right

The margin-right property sets the right margin of an element.

Property: margin-right$m-left

Example

div {
  @include gtw-sass.margin-x(10px, 20px);
}

Links

y

@mixin y($m-top, $m-bottom: $m-top) { ... }

Description

Creating space at the top and bottom of the elements, outside of any defined borders.

Parameters

NameDescriptionTypeDefault value
$m-top

The margin-top property sets the top margin of an element.

Property: margin-top—
$m-bottom

The margin-bottom property sets the bottom margin of an element.

Property: margin-bottom$m-top

Example

div {
  @include gtw-sass.margin-y(10px, 20px);
}

Links

- Padding

mixins

x

@mixin x($p-left, $p-right: $p-left) { ... }

Description

Generate space around the left and right side of an element's content, inside of any defined borders

Parameters

NameDescriptionTypeDefault value
$p-left

The padding-left property sets the left padding (space) of an element.

Property: padding-left—
$p-right

The padding-right property sets the right padding (space) of an element.

Property: padding-right$p-left

Example

div {
  @include gtw-sass.padding-x(10px, 20px);
}

Links

y

@mixin y($p-top, $p-bottom: $p-top) { ... }

Description

Generate space around the top and bottom side of an element's content, inside of any defined borders

Parameters

NameDescriptionTypeDefault value
$p-top

The padding-top property sets the top padding (space) of an element.

Property: padding-top—
$p-bottom

The padding-bottom property sets the bottom padding (space) of an element.

Property: padding-bottom$p-top

Example

div {
  @include gtw-sass.padding-x(10px, 20px);
}

Links

- Position

mixins

position

@mixin position($position: static, $top: null, $right: null, $bottom: null, $left: null, $zIndex: null) { ... }

Description

Specifies the type of positioning method used for an element and set the position of a positioned element. This mixin has no effect on non-positioned elements.

Parameters

NameDescriptionTypeDefault value
$position

The position property specifies the type of positioning method used for an element.

Property: positionstatic
$top

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: topnull
$right

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: rightnull
$bottom

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: bottomnull
$left

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: leftnull
$zIndex

The z-index property specifies the stack order of an element.

Property: z-indexnull

Example

div {
  @include gtw-sass.position-position(absolute, 10px, null, null, 10px, 10);
}

Used by

Links

absolute

@mixin absolute($top: null, $right: null, $bottom: null, $left: null, $zIndex: null) { ... }

Description

Specifies the type of positioning method of an element to absolute and set the position of a positioned element.

Parameters

NameDescriptionTypeDefault value
$top

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: topnull
$right

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: rightnull
$bottom

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: bottomnull
$left

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: leftnull
$zIndex

The z-index property specifies the stack order of an element.

Property: z-indexnull

Example

div {
  @include gtw-sass.position-absolute(10px, null, null, 10px, 10);
}

Requires

Used by

Links

fixed

@mixin fixed($top: null, $right: null, $bottom: null, $left: null, $zIndex: null) { ... }

Description

Specifies the type of positioning method of an element to fixed and set the position of a positioned element.

Parameters

NameDescriptionTypeDefault value
$top

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: topnull
$right

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: rightnull
$bottom

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: bottomnull
$left

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: leftnull
$zIndex

The z-index property specifies the stack order of an element.

Property: z-indexnull

Example

div {
  @include gtw-sass.position-fixed(10px, null, null, 10px, 10);
}

Requires

Links

relative

@mixin relative($top: null, $right: null, $bottom: null, $left: null, $zIndex: null) { ... }

Description

Specifies the type of positioning method of an element to relative and set the position of a positioned element.

Parameters

NameDescriptionTypeDefault value
$top

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: topnull
$right

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: rightnull
$bottom

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: bottomnull
$left

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: leftnull
$zIndex

The z-index property specifies the stack order of an element.

Property: z-indexnull

Example

div {
  @include gtw-sass.position-relative(10px, null, null, 10px, 10);
}

Requires

Used by

Links

static

@mixin static() { ... }

Description

Specifies the type of positioning method of an element to static

Parameters

None.

Example

div {
  @include gtw-sass.position-static();
}

Requires

Links

sticky

@mixin sticky($top: null, $right: null, $bottom: null, $left: null, $zIndex: null) { ... }

Description

Specifies the type of positioning method of an element to sticky and set the position of a positioned element.

Parameters

NameDescriptionTypeDefault value
$top

The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: topnull
$right

The right property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: rightnull
$bottom

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

Property: bottomnull
$left

The left property affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.

Property: leftnull
$zIndex

The z-index property specifies the stack order of an element.

Property: z-indexnull

Example

div {
  @include gtw-sass.position-sticky(10px, null, null, null, 10);
}

Requires

Links

- Pseudo

mixins

active

@mixin active($deviceCheck, $isModule: $deviceCheck) { ... }

Description

Update style of an element that is being activated by the user

Parameters

NameDescriptionTypeDefault value
$deviceCheck

false to skip device type check by using modernizr class in HTML tag

Boolean—
$isModule

true to use :global with the device check class

Boolean$deviceCheck

Example

button {
 @include gtw-sass.active() {
    color: red;
  }
}

Requires

Used by

Links

after

@mixin after($content: '', $display: block) { ... }

Description

Creates a pseudo-element that is the last child of the selected element.

Parameters

NameDescriptionTypeDefault value
$content

Replaces an element with a generated value.

Property: content''
$display

Sets whether an element is treated as a block or inline element and the layout used for its children.

Property: displayblock

Example

div {
  @include gtw-sass.after() {
    // Css rules
  }
}

Links

before

@mixin before($content: '', $display: block) { ... }

Description

Creates a pseudo-element that is the first child of the selected element.

Parameters

NameDescriptionTypeDefault value
$content

Replaces an element with a generated value.

Property: content''
$display

Sets whether an element is treated as a block or inline element and the layout used for its children.

Property: displayblock

Example

div {
  @include gtw-sass.before() {
    // Css rules
  }
}

Used by

Links

hover

@mixin hover($deviceCheck, $isModule: $deviceCheck) { ... }

Description

Update style of an element when user hover their pointing device on the element

Parameters

NameDescriptionTypeDefault value
$deviceCheck

false to skip device type check by using modernizr class in HTML tag

Boolean—
$isModule

true to use :global with the device check class

Boolean$deviceCheck

Example

button {
  @include gtw-sass.hover() {
    color: red;
  }
}

Requires

Used by

Links

onClick

@mixin onClick($deviceCheck, $isModule: $deviceCheck) { ... }

Description

Update style of an element when user start to interact with the element

Parameters

NameDescriptionTypeDefault value
$deviceCheck

false to skip device type check by using modernizr class in HTML tag

Boolean—
$isModule

true to use :global with the device check class

Boolean$deviceCheck

Example

button {
  @include gtw-sass.onClick() {
    color: red;
  }
}

Requires

Used by

Links

onTouch

@mixin onTouch($deviceCheck, $isModule: $deviceCheck) { ... }

Description

[Alias of onClick] Update style of an element when user start to interact with the element

Parameters

NameDescriptionTypeDefault value
$deviceCheck

false to skip device type check by using modernizr class in HTML tag

Boolean—
$isModule

true to use :global with the device check class

Boolean$deviceCheck

Example

button {
  @include gtw-sass.onTouch() {
    color: red;
  }
}

Requires

Links

placeholder

@mixin placeholder() { ... }

Description

Selects form elements with placeholder text, and let you style the placeholder text.

Parameters

None.

Example

input {
  @include gtw-sass.placeholder() {
    // Css rules
  }
}

Links

selection

@mixin selection($bgColor: null, $color: null, $textDecoration: null, $textShadow: null) { ... }

Description

Applies styles to the part of a document that has been highlighted by the user

Parameters

NameDescriptionTypeDefault value
$bgColor

Sets the background color of an element.

Property: background-colornull
$color

Sets the foreground color value of an element's text.

Property: colornull
$textDecoration

Sets the appearance of decorative lines on text.

Property: text-decorationnull
$textShadow

Adds shadows to text.

Property: text-shadownull

Example

div {
  @include gtw-sass.selection(#000000, #FFFFFF);
}

Requires

Links

- Scroll

mixins

scroll

@mixin scroll($x: auto, $y: auto) { ... }

Description

Control if the container is scrollable

Parameters

NameDescriptionTypeDefault value
$x

Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content

Property: overflow-xauto
$y

Sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content

Property: overflow-yauto

Example

div {
  @include gtw-sass.scroll-scroll();
}

Requires

Links

disabled

@mixin disabled() { ... }

Description

Disable the container scrolling

Parameters

None.

Example

div {
  @include gtw-sass.scroll-disabled();
}

Requires

Used by

Links

touch

@mixin touch($status: touch) { ... }

Description

Controls whether or not touch devices use momentum-based scrolling for a given element.

Parameters

NameDescriptionTypeDefault value
$status

Controls whether or not touch devices use momentum-based scrolling for a given element

Property: overflow-scrollingtouch

Example

div {
  @include gtw-sass.scroll-touch(touch);
}

Used by

Links

touch-disabled

@mixin touch-disabled() { ... }

Description

Disable the container scrolling

Parameters

None.

Example

div {
  @include gtw-sass.scroll-touch-disabled();
}

Requires

Used by

Links

x-only

@mixin x-only() { ... }

Description

Control if the x-axis of container is scrollable

Parameters

None.

Example

div {
  @include gtw-sass.scroll-x-only();
}

Requires

Used by

Links

y-only

@mixin y-only() { ... }

Description

Control if the y-axis of container is scrollable

Parameters

None.

Example

div {
  @include gtw-sass.scroll-y-only();
}

Requires

Used by

Links

scrollbar-style

@mixin scrollbar-style($radius, $thumbColor, $trackColor, $height, $width) { ... }

Description

Customize the scrollbar style

Parameters

NameDescriptionTypeDefault value
$radius

The radius of the head and tail of the scrollbar

Property: border-radius—
$thumbColor

The color of the scrollbar

Property: background-color—
$trackColor

The color of the track

Property: background-color—
$height

The height of the x-axis scrollbar

Property: height—
$width

The width of the y-axis scrollbar

Property: width—

Example

div {
  @include gtw-sass.scroll-scrollbar-style(5px, red, blue, 10px, 10px);
}

Used by

scrollbar-style-x

@mixin scrollbar-style-x($height, $radius, $thumbColor, $trackColor) { ... }

Description

Customize the scrollbar style

Parameters

NameDescriptionTypeDefault value
$height

The height of the x-axis scrollbar

Property: height—
$radius

The radius of the head and tail of the scrollbar

Property: border-radius—
$thumbColor

The color of the scrollbar

Property: background-color—
$trackColor

The color of the track

Property: background-color—

Example

div {
  @include gtw-sass.scroll-scrollbar-style-x(10px, 5px, red, blue);
}

Requires

scrollbar-style-y

@mixin scrollbar-style-y($width, $radius, $thumbColor, $trackColor) { ... }

Description

Customize the scrollbar style

Parameters

NameDescriptionTypeDefault value
$width

The width of the y-axis scrollbar

Property: width—
$radius

The radius of the head and tail of the scrollbar

Property: border-radius—
$thumbColor

The color of the scrollbar

Property: background-color—
$trackColor

The color of the track

Property: background-color—

Example

div {
  @include gtw-sass.scroll-scrollbar-style-y(10px, 5px, red, blue);
}

Requires

- Size

mixins

size

@mixin size($height, $width: $height) { ... }

Description

Sets the height and width of an element.

Parameters

NameDescriptionTypeDefault value
$height

The height property sets the height of an element.

Property: height—
$width

The width property sets the width of an element.

Property: width$height

Example

div {
  @include gtw-sass.size-size(10px, 20px);
}

Used by

Links

fixed-h

@mixin fixed-h($height) { ... }

Description

Fixes the height of an element.

Parameters

NameDescriptionTypeDefault value
$height

The height property sets the height of an element.

Property: height—

Example

div {
  @include gtw-sass.size-fixed-h(10px);
}

Used by

Links

fixed-w

@mixin fixed-w($width) { ... }

Description

Fixes the width of an element.

Parameters

NameDescriptionTypeDefault value
$width

The width property sets the width of an element.

Property: width—

Example

div {
  @include gtw-sass.size-fixed-w(20px);
}

Used by

Links

fixed

@mixin fixed($height, $width: $height) { ... }

Description

Fixes the height and width of an element.

Parameters

NameDescriptionTypeDefault value
$height

The height property sets the height of an element.

Property: height—
$width

The width property sets the width of an element.

Property: width$height

Example

div {
  @include gtw-sass.size-fixed(10px, 20px);
}

Requires

Links

ratio

@mixin ratio($x, $y) { ... }

Description

Fixes the element's size into a specified ratio within a parent container

Parameters

NameDescriptionTypeDefault value
$x

Represent the proportion of width

Number—
$y

Represent the proportion of height

Number—

Example

.parent {
  width: 100px;

  .child {
    @include gtw-sass.size-ratio(16, 9);
  }
}

Requires

- Text

mixins

multi-line-ellipsis

@mixin multi-line-ellipsis($fontSize, $lineHeight, $noOfLines: 2, $maxWidth: 100%) { ... }

Description

Limit contents of a block container to the specified number of lines and add ellipsis at the end if text overflow.

Parameters

NameDescriptionTypeDefault value
$fontSize

Sets the size of a font.

Property: font-size—
$lineHeight

Specifies the height of a line.

Property: line-height—
$noOfLines

Defines the max no. of line to show

Integer2
$maxWidth

Defines the maximum width of an element.

Property: max-width100%

Example

div {
  @include gtw-sass.text-multi-line-ellipsis(12px, 1.5, 5, 50%);
}

Requires

Links

single-line-ellipsis

@mixin single-line-ellipsis($maxWidth: 100%) { ... }

Description

Limit contents of a container to singe line and add ellipsis at the end if text overflow.

Parameters

NameDescriptionTypeDefault value
$maxWidth

Defines the maximum width of an element.

Property: max-width100%

Example

div {
  @include gtw-sass.text-single-line-ellipsis(50%);
}

Requires

- To

functions

to

@function to($unit, $input) { ... }

Description

Covert value between different units

Parameters

NameDescriptionTypeDefault value
$unit

The unit to covert the value to

Cm or In or Mm or Pc or Pt or Px or Q or Deg or Grad or Rad or Turn or Ch or Em or Ex or Rem or Vh or Vmax or Vmin or Vw or Dpcm or Dpi or Dppx or Ms or S—
$input

The value to convert

Value of (angle, frequency, length, resolution, time, %) or Number—

Returns

Value of (angle, frequency, length, resolution, time, %)</code> or <code>Number —

The converted value

Example

$pxToRem: gtw-sass.to(rem, 1px);

Throws

  • Uncaught Error:

  • Uncaught Error: Cannot convert

Requires

Used by

cm

@function cm($input) { ... }

Description

Covert value to cm

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in cm —

The converted value

Example

$cm: gtw-sass.cm(1);

Requires

  • [function] to

in

@function in($input) { ... }

Description

Covert value to in

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in in —

The converted value

Example

$in: gtw-sass.in(1);

Requires

  • [function] to

mm

@function mm($input) { ... }

Description

Covert value to mm

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in mm —

The converted value

Example

$mm: gtw-sass.mm(1);

Requires

  • [function] to

pc

@function pc($input) { ... }

Description

Covert value to pc

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in pc —

The converted value

Example

$pc: gtw-sass.pc(1);

Requires

  • [function] to

pt

@function pt($input) { ... }

Description

Covert value to pt

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in pt —

The converted value

Example

$pt: gtw-sass.pt(1);

Requires

  • [function] to

px

@function px($input) { ... }

Description

Covert value to px

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in px —

The converted value

Example

$px: gtw-sass.px(1);

Requires

  • [function] to

q

@function q($input) { ... }

Description

Covert value to q

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in q —

The converted value

Example

$q: gtw-sass.q(1);

Requires

  • [function] to

deg

@function deg($input) { ... }

Description

Covert value to deg

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (deg, grad, rad, turn, number)—

Returns

Value in deg —

The converted value

Example

$deg: gtw-sass.deg(1);

Requires

  • [function] to

grad

@function grad($input) { ... }

Description

Covert value to grad

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (deg, grad, rad, turn, number)—

Returns

Value in grad —

The converted value

Example

$grad: gtw-sass.grad(1);

Requires

  • [function] to

rad

@function rad($input) { ... }

Description

Covert value to rad

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (deg, grad, rad, turn, number)—

Returns

Value in rad —

The converted value

Example

$rad: gtw-sass.rad(1);

Requires

  • [function] to

turn

@function turn($input) { ... }

Description

Covert value to turn

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (deg, grad, rad, turn, number)—

Returns

Value in turn —

The converted value

Example

$turn: gtw-sass.turn(1);

Requires

  • [function] to

ch

@function ch($input) { ... }

Description

Covert value to ch

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (ch, number)—

Returns

Value in ch —

The converted value

Example

$ch: gtw-sass.ch(1);

Requires

  • [function] to

em

@function em($input) { ... }

Description

Covert value to em

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in em —

The converted value

Example

$em: gtw-sass.em(1);

Requires

  • [function] to

ex

@function ex($input) { ... }

Description

Covert value to ex

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (ex, number)—

Returns

Value in ex —

The converted value

Example

$ex: gtw-sass.ex(1);

Requires

  • [function] to

rem

@function rem($input) { ... }

Description

Covert value to rem

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (cm, in, mm, pc, pt, px, q, em, rem, number)—

Returns

Value in rem —

The converted value

Example

$rem: gtw-sass.rem(1);

Requires

  • [function] to

vh

@function vh($input) { ... }

Description

Covert value to vh

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (vh, number)—

Returns

Value in vh —

The converted value

Example

$vh: gtw-sass.vh(1);

Requires

  • [function] to

vmax

@function vmax($input) { ... }

Description

Covert value to vmax

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (vmax, number)—

Returns

Value in vmax —

The converted value

Example

$vmax: gtw-sass.vmax(1);

Requires

  • [function] to

vmin

@function vmin($input) { ... }

Description

Covert value to vmin

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (vmin, number)—

Returns

Value in vmin —

The converted value

Example

$vmin: gtw-sass.vmin(1);

Requires

  • [function] to

vw

@function vw($input) { ... }

Description

Covert value to vw

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (vw, number)—

Returns

Value in vw —

The converted value

Example

$vw: gtw-sass.vw(1);

Requires

  • [function] to

dpi

@function dpi($input) { ... }

Description

Covert value to dpi

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (dpi, dpcm, dppx, number)—

Returns

Value in dpi —

The converted value

Example

$dpi: gtw-sass.dpi(1);

Requires

  • [function] to

dpcm

@function dpcm($input) { ... }

Description

Covert value to dpcm

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (dpi, dpcm, dppx, number)—

Returns

Value in dpcm —

The converted value

Example

$dpcm: gtw-sass.dpcm(1);

Requires

  • [function] to

dppx

@function dppx($input) { ... }

Description

Covert value to dppx

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (dpi, dpcm, dppx, number)—

Returns

Value in dppx —

The converted value

Example

$dppx: gtw-sass.dppx(1);

Requires

  • [function] to

ms

@function ms($input) { ... }

Description

Covert value to ms

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (s, ms, number)—

Returns

Value in ms —

The converted value

Example

$ms: gtw-sass.ms(1);

Requires

  • [function] to

s

@function s($input) { ... }

Description

Covert value to s

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (s, ms, number)—

Returns

Value in s —

The converted value

Example

$s: gtw-sass.s(1);

Requires

  • [function] to

integer

@function integer($input) { ... }

Description

Covert value to integer

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Any number—

Returns

Integer —

The converted value

Example

$number: gtw-sass.integer(1.123);

Requires

number

@function number($input) { ... }

Description

Covert value to number

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Any number with unit—

Returns

Number without unit —

The converted value

Example

$number: gtw-sass.number(1px);

Requires

  • [function] to

percent

@function percent($input) { ... }

Description

Covert value to percent

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Value in (%, number)—

Returns

Value in % —

The converted value

Example

$percent: gtw-sass.percent(1);

Requires

  • [function] to

string

@function string($input, $acceptNull: false) { ... }

Description

Covert value to string

Parameters

NameDescriptionTypeDefault value
$input

The value to convert

Any(except function, map)—
$acceptNull

Can the to-string function accept null as a value

Booleanfalse

Returns

String —

The converted value

Example

$string: gtw-sass.string(1px);

Requires

- Utility

functions

strip-unit

@function strip-unit($number) { ... }

Description

Remove the unit from a number

Parameters

NameDescriptionTypeDefault value
$number

The number with unit

Number—

Returns

Number —

The result number without unit

Example

$number: gtw-sass.strip-unit(10px);

Used by