真 题 : LEVERAGING SASS MIXINS FOR CLEANER CODE

Without a doubt, one of the most powerful and valuable features of Sass is the ability to package existing code into reusable blocks called mixins.

Mixins are like macros

Mixins are the Sass equivalent of macros in other programming languages. If you’ve programmed before, you can think of them as functions, procedures, or methods, but they’re not technically any of these concepts, since their function is to generate code at compile time, not execute it at run time.

How Mixins Work

Compass was created by Chris Eppstein, a member of the SASS core team, and is a very rich style framework that includes a number of defined mixins, functions, and extensions to SASS.

Compass project is full of mixins to make your life easier. From CSS3, to typography, to layout, to image processing, Compass makes it easy to write bulletproof CSS across browsers. We like to think of Compass as a standard library for Sass.

CSS3 support in Compass is perhaps the most shocking aspect of the project. Compass offers a variety of CSS3 mixins that make it easy to take advantage of these new features in a way that works across browsers.

For example, a border-RADIUS mixin allows you to use the new border-RADIUS property in a concise way:

a.button {
  background: black;
  color: white;
  padding: 10px 20px;
  @include border-radius(5px);
}

Output:

a.button {
  background: black;
  color: white;
  padding: 10px 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

Looking at the output, you can see that the border-RADIUS mixin outputs six lines of code. These six lines allow you to use border-RADIUS in all modern Web browsers. (The cool part is that if you wrote this code yourself, you probably wouldn’t include support for Opera (-o) or Konquerer (-khtml), but Compass gives you all that for free!)

Above, I’m using the @include directive to tell Sass that I want to call a mixin. After that is the name of the mixin, border-RADIUS. Pass mixed arguments with parentheses. Border-radius mixin has only one parameter. In this case, 5px is passed as the value of the first parameter.

Writing Your Own

Let’s look at the source of the border-RADIUS mixin above. For illustrative purposes, I’ll show you a simplified version of a mixin. The actual version of Compass is a little more complicated, but this will give you a good idea of how to write your own version:

@mixin border-radius($radius) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

The declaration begins with the @mixin directive, followed by the name of the mixin. In this case, the name of border-radius. mixin can contain any combination of alphabetic and numeric characters without Spaces. And then enclosed in parentheses (…) The list of parameters accepted by the mixin in. The mixin above has only one parameter, $radius. You can use multiple arguments, as long as they are separated by commas.

Next is enclosed in braces {… }. The definition of a mixin can contain any combination of CSS properties. You can even declare other rules (using selectors) that will be mixed into the CSS along with the properties.

In this case, the border-RADIUS mixin contains a set of CSS properties that set the value of the border-RADIUS property for all major browsers that implement it with a browser-specific prefix, And set the final border-RADIUS attribute to future-proof this attribute, as it has been formally accepted as part of the CSS3 specification.

The $RADIUS parameter or variable is used to set the value of each CSS property. With this technique, you can pass a value to the mixin, which is repeated four times in the output. This reduces the likelihood that you will enter the wrong values for one or more browser-specific properties if you enter them manually instead of using mixins, and also saves a lot of typing.

Here’s another example of a mixin in SAP Spartacus:

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. // Makes the @content apply to the given breakpoint and wider. @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { $min: breakpoint-min($name, $breakpoints); @if $min { @media (min-width: $min) { @content; } } @else { @content; }}

Consumption code:

Default Arguments

You can improve this mixin by adding a default value to the $RADIUS parameter, as shown below:

@mixin border-radius($radius: 5px) {
  ...
}

This makes the $RADIUS parameter optional. So you can call a mixin without it like this:

@include border-radius;

This prints the properties with default values in the declared parameter list. In this case, 5px, because that’s what we declared above.

Another very useful trick is to declare a variable up front and use it as the default value for a mixin:

$default-border-radius: 5px ! default; @mixin border-radius($radius: $default-border-radius) { ... }

This is especially useful for code that you share across projects. Set the default value by modifying the global variable and override it as needed.

Keyword Arguments

As of Sass 3.1, the last mixin feature is keyword arguments. Keyword arguments are especially useful when mixins accept multiple arguments. If the parameter is the default value, you can use the parameter name to set the specific value of the parameter without passing the values of the other parameters.

Using with the @if condition, we can make a better version of the border-RADIUS mixin:

@mixin border-radius($radius: 5px, $moz: true, $webkit: true, $ms: true) {
  @if $moz    { -moz-border-radius:    $radius; }
  @if $webkit { -webkit-border-radius: $radius; }
  @if $ms     { -ms-border-radius:     $radius; }
  border-radius: $radius;
}

The above code conditionally outputs Firefox, Safari, and Internet Explorer code based on the values of $moz, $webKit, and $ms, respectively. Since all parameters have default values, you can turn off support for Internet Explorer by calling mixin, as shown below:

@include border-radius($ms: false);

This is much simpler than calling the mixin with each argument without a name:

@include border-radius(5px, true, true, true);

With keyword arguments, you don’t even have to call mixins with arguments in the order they are declared:

@include border-radius($ms: false, $radius: 10px);

conclusion

That concludes the overview of Sass mixins. To get a better idea of how to use them in your code, I recommend that you look at the source code of a mature Sass project, such as Compass, that contains more than 200 mixins that you can use to learn many great techniques. In addition, the Compass document actually includes a “View source” link that makes it easy to view the code of any mixin to see what it does. You can first look at the actual implementation of border-RADIUS.

More of Jerry’s original articles can be found in “Wang Zixi “: