Skip to main content

@media, @const and @mixin

@media rule

The @media at-rule may be placed at the top level of CSS file, inside @set at-rule and nested inside any other conditional group at-rule.

@media <condition> {
... style rules ...
}

A <condition> declaration in Sciter may accept

  1. Single media variable name, like @media print {...} or
  2. Expression combining multiple conditions @media print or handheld {...}

@media queries

caution

Format of media queries in Sciter is, at some extent, incompatible with W3C media queries.

This W3C media query

@media screen and (max-width: 600px) {
...
}

in Sciter is this

@media screen and (width < 600px) {
...
}

Syntax:

@media <expr> { ...rules }

where <expr> is

  1. name - name of built-in media variable or application defined media variable;

  2. <expr> and <expr> - logical AND of two boolean expressions;

  3. <expr> or <expr> - logical OR of two boolean expressions;

  4. <expr> < <expr>

  5. <expr> > <expr>

  6. <expr> == <expr>

  7. <expr> <= <expr>

  8. <expr> >= <expr>

    Comparison expressions

  9. ( <expr> ) - expressions can be grouped to avoid ambiguity.

Built-in Media Variables

NameDescription
widthwindow width
heightwindow height
min-widthminimal width if defined in window-min-size else - zero
min-heightminimal height if defined in window-min-size else - zero
max-widthmaximal width if defined in window-max-size else - desktop width
max-heightmaximal height if defined in window-max-size else - desktop height
aspect-ratiowidth/height ratio of the window
monitorsnumber of connected monitors/displays
device-widthprimary display width
device-heightprimary display height
device-aspect-ratiodevice-width / device-height
orientation-portrait= device-height > device-width
orientation-landscape= device-height < device-width
colorsnumber of bits per pixel
resolutionnumber of dots per inch
resolution-dpcmnumber of dots per centimeter
physical-resolution(MacOS) backend number of dots per inch
high-contrasttrue if OS uses high-contrast theme now
has-pentrue if the machine has pen device
has-mousetrue if the machine has mouse device
has-mouse-wheeltrue if the machine has wheel on mouse device
has-horizontal-mouse-wheeltrue if the machine has horizontal wheel on mouse device
has-touch-screentrue if the machine has touch screen
has-pen-screentrue if the machine has pen screen
has-multi-touchtrue if the machine has multi-touch screen
screen-readertrue if screen reader is running now
slow-machinetrue if OS reports "slow machine" environment (not reliable)
composition-supportedtrue if OS supports composition (blur behind windows)
dropdown-animation-supportedtrue if user prefers animation in dropdowns
menu-animation-supportedtrue if user prefers animation in menus
tooltip-animation-supportedtrue if user prefers animation in tooltips
ui-blurbehindalias of composition-supported
ui-ambiencestring, either "dark" or "light"
ui-accented-window-decorationWindows, true if window chrome is using accent colors
engine"sciter"
engine-version-minornumber
engine-version-majornumber
scitertrue
osstring, name of the OS
platformstring: "Windows"
desktoptrue for desktop window
handheldtrue for mobile device
printtrue in print and print preview environments
Windowstrue on Windows
MacOStrue on MacOS
Linuxtrue on Linux
windowlesstrue when running windowless Sciter.Lite

@const

The @const at-rule

@const name : <value> [... <value>];

allows to define constants that can be used by their names (prepended by @) instead of values:

@const BACKGROUND: no-repeat url(...) 50% 50%;
...
body {
background: @BACKGROUND;
}

@mixin

The @mixin at-rule allows to define set of properties and apply them by name prepended by @.

mixin declaration
@mixin mname {
name1: <value>; /* properties */
name2: <value>; /* of the set */
...
}

and the usage:

mixin usage
some {
@mname;
color: black;
...
}

parametric @mixin

The @mixin at-rule with parameters allows to define set of properties and apply them by name prepended by @.

mixin declaration
@mixin mname(paramName1[... , paramNameN]) {
name1: @paramName1;
name2: @paramName2;
name3: <value>;
...
}

and the usage:

mixin usage
some {
@mname(val1,val2);
color: black;
...
}

Example, defining set of properties for a button:

mixin declaration
@mixin LIKE-BUTTON(color) {
display:inline-block;
background-color: @color;
border: 1px solid #000;
border-radius: 3px;
padding: 0.5em 1em;
}

with such defintion we can use it in various rules:

a[href] {
@LIKE-BUTTON(#ff0000);
display:block; /*even it was defined in the mixin
we can redefine it after */
}