HTML and CSS Reference
In-Depth Information
Sass
Sass (
S
yntactically
a
wesome
s
tyle
s
heets) is a scripting language that is interpreted into Cascading Style Sheets. Sass
has two syntaxes: the original syntax (“the indented syntax”, typically with the file extension
.sass
), and the newer
syntax, known as SCSS (with the extension
.scss
). The original syntax is similar to the syntax of Haml, applying
indentation to separate code blocks and newline characters to separate rules. SCSS uses block formatting similar to
that of CSS, braces to denote code blocks, and semicolons to separate lines within a block [25].
LESS
LESS is another CSS preprocessor to make CSS more maintainable, themable, and extendable [26]. LESS is influenced by
Sass and the SCSS syntax. LESS is a nested metalanguage, meaning that any valid CSS code is also valid LESS code (sharing
the same semantics). LESS provides programming mechanisms such as variables, nesting (selectors inside other selectors),
mixins, operators (addition, subtraction, division, and multiplication of property values and colors to create complex
relationships between properties), and functions (manipulation of values through JavaScript). A distinctive feature of LESS
compared to other CSS preprocessors is that LESS allows real-time compilation via
less.js
within the browser. LESS can
be used on the client-side or the server-side, or compiled into CSS. The file extension of LESS files is
.less
.
Stylus
The third most popular CSS preprocessor is Stylus, a dynamic style sheet language influenced by Sass and LESS [27].
Stylus runs on the Node platform [28]. In Stylus, colons, semicolons, commas, and braces are optional. Stylus supports
variables, interpolation, mixins, arithmetics, type coercion, dynamic importing, conditionals, iteration, selector
nesting, parent referencing, variable function calls, lexical scoping, functions, optional compression, character
escaping, and robust error reporting. The typical file extension for Stylus files is
.styl
.
Summary
In this chapter, you learned how to separate presentation from content, which is imperative in web site
standardization. You know the syntax of Cascading Style Sheets, the language used by virtually every web site. You
have mastered the use of CSS selectors and can apply them in your daily work to control the appearance of exactly
those elements or sets of elements that need to be styled. By now you know how to use the cascading feature of CSS
with confidence, which makes it possible to create CSS files that are optimal in length and easy to maintain. You also
know how to ensure backward-compatibility by applying a fallback mechanism and properties supported even by
older browsers. You learned that XML files can be styled not only by CSS but also by using XSL.
In the next chapter, you will learn about the standardization issues of server-side scripting and web applications.
References
1.
Dahlström E, Dengler P, Grasso A, Lilley C, McCormack C, Schepers D, Watt J, Ferraiolo
J, Jun F, Jackson D (eds) (2011) Styling with CSS. In: SVG 1.1 (2
nd
Edn). World Wide Web
October 2014
2.
Chavchanidze G (2004) Formatting Mathematical Articles with Cascading Style Sheets.
Accessed 20 October 2014
3.
Bos B, Carlisle D, Chavchanidze G, Ion PDF, Miller BR (2011) A MathML for CSS Profile.
W3C Recommendation. World Wide Web Consortium.
http://www.w3.org/TR/mathml-for-css/
.
Accessed 20 October 2014
Search WWH ::
Custom Search