Sass (Syntactically Awesome Stylesheets) - a module included in Haml . Sass is a CSS- based metalanguage designed to increase the level of CSS code abstraction and simplify cascading style sheet files.
| Sass | |
|---|---|
| Type of | Compiling Template Handler |
| Developer | Nathan Weizenbaum , Chris Eppstein , Hampton Catlin |
| operating system | Cross-platform |
| First edition | |
| Latest version | 3.5.5 |
| License | MIT License |
| Website | sass-lang.com |
Sass has two syntaxes:
- sass - differs in the absence of curly braces, in it the nested elements are implemented using indents;
- SCSS ( Sassy CSS ) - uses curly braces, just like CSS itself.
Content
- 1 Nested Rules
- 2 Variables in CSS
- 3 See also
- 4 Literature
- 5 Links
Nested Rules
One of the key features of Sass is nested rules that make it easy to create and edit nested selectors.
# header
background : # FFFFFF
. error
color : # FF0000
a
text-decoration : none
& : hover
text-decoration : underline
Will be broadcast in:
# header {
background : #FFFFFF ;
}
# header . error {
color : # FF0000 ;
}
# header a {
text-decoration : none ;
}
# header a : hover {
text-decoration : underline ;
}
CSS Variables
Sass adds constants and impurities to CSS. This makes it easier to maintain data integrity within a large set of styles. Constants allow you to set a value and use it inside styles. Using impurities, the same thing can be done with a block of style attributes.
$ linkColor : # 00F
a
color : $ linkColor
Will be broadcast in:
a {
color : # 00F ;
}
An example of the use of impurities, similarity of functions:
@mixin border-radius ( $ radius , $ border , $ color ) {
-webkit-border-radius : $ radius ;
-moz-border-radius : $ radius ;
-ms-border-radius : $ radius ;
border-radius : $ radius ;
border : $ border solid $ color
}
.box { @ include border-radius ( 10px , 1px , red ); }
Will be broadcast:
. box {
-webkit- border-radius : 10 px ;
-moz- border-radius : 10 px ;
-ms- border-radius : 10 px ;
border-radius : 10 px ;
border : 1 px solid red ;
}
See also
- Less
- Postcss
Literature
- Alex Libby Instant SASS CSS How-to . - Packt , 2013. - 80 p. - ISBN 9781782163794 .
- Ben Frain Sass and Compass for Designers . - Packt , 2013. - 274 p. - ISBN 9781849694551 .
- Hampton Catlin, Michael Lintorn Catlin. Pragmatic Guide to Sass . - Pragmatic Bookshelf, 2011 .-- 112 p. - ISBN 9781934356845 .
- Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, Adam Stacoviak. Sass and Compass in Action. - Manning Publications , 2013. - 300 p. - ISBN 9781617290145 .
- Brian Hogan, C. Warren, M. Weber, C. Johnson, A. Godin. Chapter 5. Workflow → Recipe 28. Modular style sheets using Sass. // Book of a web programmer: the secrets of professional website development . - Peter . - S. 197-203. - 288 p. - (Programmer's library). - 2000 copies. - ISBN 978-5-459-01510-2 .
- Antony Kennedy, Inayaili de Leon. Ch. 9. Dynamic CSS → SASS // Pro CSS for High Traffic Websites . - Apress , 2011 .-- P. 279-293. - 432 p. - (Expert's voice in web design). - ISBN 9781430232896 .
- Jennifer Niederst Robbins. Ch. 18. CSS Techniques → Sass and LESS // Learning Web Design. Fourth Edition. - O'Reilly , 2012 .-- P. 433. - 621 p. - ISBN 978-1-449-31927-4 .
- Alex Starostin. Improve CSS development with Sass . IBM developerWorks (May 28, 2013). Date of treatment December 14, 2013.
- Ragnar Kurm. Compile Your Style: Structuring and automating CSS . Web & PHP Magazine. Date of treatment December 14, 2013.
- Jeremy Hixon. An Introduction To LESS, And Comparison To Sass . Smashing Magazine (September 9, 2011). Date of treatment March 31, 2012. Archived May 16, 2012.