Sufio uses style variables to store values such as colors, fonts, and sizes, allowing you to reuse these values throughout your document. Variables make it easy to update your template, as changing a variable’s value automatically updates all instances where that variable is used.
Style variables in Sufio are defined using the $ symbol followed by the variable name.
The color of the document background. The default background color for all templates is white (#ffffff).
The text direction of the document language.
For most languages, this value is ltr (left-to-right). Languages such as Arabic and Hebrew use the value rtl (right-to-left).
The name of the primary font.
You can change the font on the Design → Typoghraphy page in your Sufio account.
The name of the secondary font, used for document headings—if supported by the selected document template.
You can change the font on the Design → Typoghraphy page in your Sufio account.
The text size zoom applied to all text in the document.
In most templates, this style is applied to the .document root element, ensuring that all text elements in the document are resized proportionally.
You can adjust the Font Size setting on the Design → Typography page in your Sufio account. The default setting of 100% corresponds to a $font-zoom value of 1.0.
The value of this variable depends on the text direction of the document language.
For left-to-right languages, such as English or German, the value is left. For right-to-left languages, such as Arabic and Hebrew, the value is right.
Use the $left variable instead of left as a value for various CSS alignment properties such as align and float. This will ensure that the documents are displayed correctly in all languages.
You should also use #{$left} instead of left in the names of CSS properties such as margin-left and padding-left.
The value of this variable depends on the text direction of the document language.
For left-to-right languages, such as English or German, the value is right. For right-to-left languages, such as Arabic and Hebrew, the value is left.
Use the $right variable instead of right as a value for various CSS alignment properties such as align and float. This will ensure that the documents are displayed correctly in all languages.
You should also use #{$right} instead of right in the names of CSS properties such as margin-right and padding-right.