You can use SassScript variables in selectors and property names using #{} interpolation syntax.
It’s also possible to use #{} to put SassScript into property values. In most cases this isn’t any better than using a variable, but using #{} does mean that any operations near it will be treated as plain CSS.
mixins_w_expressions_in_selectors_property_names_interpolation.scss
Lists are how Sass represents the values of CSS declarations like margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif. Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.
On their own, lists don’t do much, but the [Sass list functions][list-function] make them useful. The [nth function][nth-function] can access items in a list, the [join function][join-function] can join multiple lists together, and the [append function][append-function] can add items to lists. The [@each rule][each-rule] can also add styles for each item in a list.
[Read more on lists][read-more] [list-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#list-functions [nth-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#nth-instance_method [join-function]: http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html#join-instance_method [append-function]: http://sass-lang.com
| <!doctype html> | |
| <html class="no-js" lang=""> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <link rel="stylesheet" href="app.css"> | |
| </head> | |
| <body> | |
| <p class="text-color">Hello world! Simple IE selector limit test scenario</p> | |
| </body> |
| .block { | |
| width: 100%; | |
| height: 100px; | |
| background-color: orange; | |
| font-size: 0; } | |
| .cube { | |
| width: 20%; | |
| height: 100%; | |
| background-color: blue; |