Native Preset

Native (default) preset is a prepared configuration for Stylify CSS that consist of predefined macro, screens and helpers. The code behind the NativePreset can be found in the @stylify/stylify repository.

Inside the preset

Predefined macro

This macro allows you to use CSS-like syntax matching 678 CSS properties available in Chrome, Safari, Mozilla, Opera and Edge. Check out the syntax guide.

List of all available selectors can be found in the @stylify/stylify repository


There are static shortcuts like tosm, sm, md, ... and dynamic screens like minw, maxw, rng, ... that generates media queries based on the value you choose when using them. The values and units you use are up to you.

Don’t forget that screens can be combined using logical operands && (and) and || (or) like maxw320px&&maxh667px:color:blue.

tosm@media (max-width: 639px)tosm:color:blue
sm@media (min-width: 640px)sm:color:blue
tomd@media (max-width: 767px)tomd:color:blue
md@media (min-width: 768px)md:color:blue
tolg@media (max-width: 1023px)tolg:color:blue
lg@media (min-width: 1024px)lg:color:blue
toxl@media (max-width: 1279px)toxl:color:blue
xl@media (min-width: 1280x)xl:color:blue
to2xl@media (max-width: 1535px)to2xl:color:blue
2xl@media (min-width: 1536px)2xl:color:blue
to3xl@media (max-width: 1919px)to3xl:color:blue
3xl@media (min-width: 1920px)3xl:color:blue
minw@media (min-width: custom)minw640px:color:blue
maxw@media (max-width: custom)maxw639px:color:blue
minh@media (min-height: custom)minh668px:color:blue
maxh@media (max-height: custom)maxh667px:color:blue
rng@media (min-width: custom) and @media(max-width: custom)rng640px-1023px:color:blue
screen@media screenscreen:color:blue
onlyScreen@media only screenonlyScreen:color:blue
portrait@media (orientation: portrait)portrait:color:blue
landscape@media (orientation: landscape)landscape:color:blue
dark@media (prefers-color-scheme: dark)dark:color:blue
light@media (prefers-color-scheme: light)light:color:blue


Screens are automaticaly sorted. The sorting function can be changed (see configuration).

asc - from smallest to largest, mobile first approach
desc - from largest to smallest, desktop first approach
  • without media query
  • min-width => asc
  • min-height => asc
  • max-width => desc
  • max-height => desc
  • min-device-width => asc
  • min-device-height => asc
  • max-device-width => desc
  • max-device-height => desc
  • light mode => according to above
  • dark mode => according to above
  • print => according to above
  • others


Native preset ships with a few helpers that can simplify the development process. When passing an argument that contains ,, you must add quotes to that argument using ^ (^ is replaced by quote, see syntax page).

When passing an argument into the helper, you can use variables like $myVariable.

Lighten color

This helper expects a color in a hex or rgb format and and makes the color lighter. The color is returned in a hex format.


Darken color

This helper expects a color in a hex or rgb format and and makes the color darker. The color is returned in a hex format.


Color to RGB

This helper expects a color in a hex or rgb format. It returns in the rgb format. If alpha canal is passed as second argument, it returns the rgba format.

color:colorToRgb(#000) => is converted into rgba(0, 0, 0);
color:colorToRgb(#000,0.1) => is converted into rgba(0, 0, 0, 0.1)
color:colorToRgb(^rgb(0,0,0)^,0.1) => is converted into rgba(0, 0, 0, 0.1)