Mixins can also specify default values for their arguments using the normal variable-setting syntax. Then when the mixin is included, if it doesn’t pass in that argument, the default value will be used instead. For example:
mixins_w_default_arguments.scss
Mixins can take arguments SassScript values as arguments, which are given when the mixin is included and made available within the mixin as variables.
When defining a mixin, the arguments are written as variable names separated by commas, all in parentheses after the name. Then when including the mixin, values can be passed in in the same manner.
In the following exmaple, the Mixin is included in the document with the @include directive. This takes the name of a mixin and arguments passed into it, and includes the styles defined by that mixin into the current rule.
Sometimes it makes sense for a mixin to take an unknown number of arguments. In the following example we are creating a mixin for box shadows that takes any number of shadows as arguments. In this situation, Sass supports variable arguments, which are arguments at the end of a mixin declaration that take all leftover arguments and package them up as a list.
Mixins allow you to define styles that can be re-used throughout the stylesheet without needing to resort to non-semantic classes like .float-left. Mixins can also contain full CSS rules, and anything else allowed elsewhere in a Sass document.
Mixins are defined with the @mixin directive. It’s followed by the name of the mixin and optionally the arguments, and a block containing the contents of the mixin.
In the following example, the Mixin is included in the document with the @include directive.
mixins.scss
Sometimes you’ll write styles for a class that you only ever want to @extend, and never want to use directly in your HTML. This is especially true when writing a Sass library, where you may provide styles for users to @extend if they need and ignore if they don’t.
If you use normal classes for this, you end up creating a lot of extra CSS when the stylesheets are generated, and run the risk of colliding with other classes that are being used in the HTML. That’s why Sass supports “placeholder selectors” (for example, %foo).
Placeholder selectors look like class and id selectors, except the # or . is replaced by %. They can be used anywhere a class or id could, and on their own they prevent rulesets from being rendered to CSS.
selector_inheritance_w_silent_extend.scss
For more information and examples as to how the @extend directive works, be sure to read Sass Extends: be aware of the loop.
There are often cases when designing a page when one class should have all the styles of another class, as well as its own specific styles. The most common way of handling this is to use both the more general class and the more specific class in the HTML.
The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector. For example:
selector_inheritance_w_extend.scss
For more information and examples as to how the @extend directive works, be sure to read Sass Extends: be aware of the loop.
When using global variables, it is important to note that as variables are redefined within the cascade, this will in turn effect the value passed into the preceding variables.
$border-radius: 5px !default;
.block-01 {
border-radius: $border-radius;
}
.block-02 {
The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties.
Variables are only available within the level of nested selectors where they’re defined.
.block {
$var: red;
background-color: $var;
}
@media directives in Sass behave just like they do in plain CSS, with one extra capability: they can be nested in CSS rules.
If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.
SCSS
.box {
width: 800px;
@media only screen and (max-width: 320px) {
width: 97%;
Sometimes it is necessary to prefix the rule you are engineering with another selector that appears higher up in the DOM. This becomes particularly useful when working with tools like Modernizer.
In this case, you can explicitly specify where the parent selector should be inserted by placing the selector before the & character.
SCSS
.box {
box-sizing: border-box;
width: 800px;
padding: 30px;
Sometimes it is necessary to extend selectors within a rule. For example, you may need extend the styling of a button to designate a fail state.
In this case, you can explicitly specify where the parent selector should be inserted using the & character.
SCSS
button {
background: gray;
border: 1ps solid black;
border-radius: 5px;