@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

Name	Description
width	window width
height	window height
min-width	minimal width if defined in window-min-size else - zero
min-height	minimal height if defined in window-min-size else - zero
max-width	maximal width if defined in window-max-size else - desktop width
max-height	maximal height if defined in window-max-size else - desktop height
aspect-ratio	width/height ratio of the window
monitors	number of connected monitors/displays
device-width	primary display width
device-height	primary display height
device-aspect-ratio	device-width / device-height
orientation-portrait	= device-height > device-width
orientation-landscape	= device-height < device-width
colors	number of bits per pixel
resolution	number of dots per inch
resolution-dpcm	number of dots per centimeter
physical-resolution	(MacOS) backend number of dots per inch
high-contrast	true if OS uses high-contrast theme now
has-pen	true if the machine has pen device
has-mouse	true if the machine has mouse device
has-mouse-wheel	true if the machine has wheel on mouse device
has-horizontal-mouse-wheel	true if the machine has horizontal wheel on mouse device
has-touch-screen	true if the machine has touch screen
has-pen-screen	true if the machine has pen screen
has-multi-touch	true if the machine has multi-touch screen
screen-reader	true if screen reader is running now
slow-machine	true if OS reports "slow machine" environment (not reliable)
composition-supported	true if OS supports composition (blur behind windows)
dropdown-animation-supported	true if user prefers animation in dropdowns
menu-animation-supported	true if user prefers animation in menus
tooltip-animation-supported	true if user prefers animation in tooltips
ui-blurbehind	alias of composition-supported
ui-ambience	string, either "dark" or "light"
ui-accented-window-decoration	Windows, true if window chrome is using accent colors
engine	"sciter"
engine-version-minor	number
engine-version-major	number
sciter	true
os	string, name of the OS
platform	string: "Windows"
desktop	true for desktop window
handheld	true for mobile device
print	true in print and print preview environments
Windows	true on Windows
MacOS	true on MacOS
Linux	true on Linux
windowless	true 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 */ 
}