Variable Arguments Sometimes it makes sense for a mixin to take an unknown number of arguments. For example, a mixin for creating box shadows might take any number of shadows as arguments. For these situations, Sass supports “variable arguments,” which are arguments at the end of a mixin declaration that take all leftover arguments and … Read more
Compass adjusts the way partials are imported. It allows importing components based solely on their name, without specifying the path. Before you can do @import ‘compass’;, you should: Install Compass as a Ruby gem: gem install compass After that, you should use Compass’s own command line tool to compile your SASS code: cd path/to/your/project/ compass … Read more
It isn’t in the documentation because it simply isn’t implemented. What you want to do can be done with the @while directive. $i: 1; @while $i < 100 { // do stuff $i: $i + 2; }
On Sass 3.4: .semantic { @at-root { ul#{&} { padding: 0; margin: 0; } p#{&} { margin: 0; } } } Generates: ul.semantic { padding: 0; margin: 0; } p.semantic { margin: 0; } @at-root moves the block to the top-level. This has several uses (see link) but here it’s being used to keep take … Read more
For those of you who came here looking for a way of importing a CDN as a sass @import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246 This is how you do it (using bootstrap as an example): styles.scss @import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);
At the risk of oversimplification, Compass is a framework while Sass is a language abstraction. You write Sass code (and compile it to standard CSS) within the Compass context. SCSS is simply the most recent syntax of the Sass language. It was created for the sole purpose of being more CSS-like in its syntax, as … Read more
SASS supports all CSS3 selectors. Sibling + selector is one of them. But it does not bring some extra features. It means you can do .first { + .second { font-size: smaller; } } But you can’t impact a parent with it… P.S. It seems to be a feature of CSS4.
Exactly. In Sass you could have something like this… div { background: green; p { background: red; &:hover { background: blue; } &:active { background: blue; } } } …which when converted to CSS would become this: div { background: green; } div p { background: red; } div p:hover { background: blue; } div … Read more
Disabling through comments Update per December 2016 according to the docs this will now be possible using this syntax: Disable more than 1 rule for entire file // sass-lint:disable border-zero, quotes p { border: none; // No lint reported content: “hello”; // No lint reported } Disable a rule for a single line p { … Read more
$small: 300px; $medium: 900px; .smth { //some CSS @media screen and (max-width: $small) { //do Smth } @media screen and (min-width: $medium) { //do Smth } } Something like this?