Shulou(Shulou.com)06/03 Report--

This article mainly explains "the use of mixed macros in CSS's Sass framework". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's way of thinking to study and learn "the use of mixed macros in CSS's Sass framework".

The focus of my discussion is on the data type map, especially the wonderful way to merge maps using instructions such as @ content,@at-root and unique-id (). One of these is the mixed macro design pattern, which solves some practical problems with Sass by using the @ extend directive and placeholder selector:

Since placeholder extensions are often introduced at the beginning of the code, they should be placed at the top of the code without being affected by other factors

Prefer @ include or @ extend? The answer given here is @ include.

The core of self-conscious hybrid macros is to dynamically generate related styles by creating or extending placeholder selectors. When it is first called by passing parameters, there is a map variable that records the relevant parameters. Then, when called with the same parameter again, the operation to extend the same placeholder is performed instead of generating duplicate code.

In the following code, there are some mixed macros that have the same parameters and some parameters that are unique or specific. Then in the resulting CSS, you will find that parts with the same parameters will use the extended method, that is, the way to merge selectors; parts with unique or specific parameters will still generate independent selector styles.

SCSS source code and test data:

CSS Code copies content to the clipboard

/ / examples of self-conscious hybrid macros

/ / define a global map to save information about mixed macros

My-mixin-info: ()

/ / define mixed macros with any form of parameters

@ mixin my-mixin ($pos1, $pos2, $map: (), $rest...) {

/ / capture some or all of the parameters as needed

$my-args: ($pos1, $pos2, $map)

/ / find these parameters through key ($my-args) in the global map

$id: map-get ($my-mixin-info, $my-args)

/ / if id is found

@ if $id {

/ / extend the id

@ extend% # {$id}

/ / generate any specific style

Specific: inspect ($rest)

}

/ / otherwise

@ else {

/ / create a new id

$id: unique-id ()

/ / integrate the id into the map of the mixed macro

$my-mixin-info: map-merge ($my-mixin-info, ($my-args: $id)! global

/ / generate placeholders at the top of the style

@ at-root {

% # {$id} {

/ / generate a common style

Common: inspect ($my-args)

}

}

/ / extend the placeholder

@ extend% # {$id}

/ / generate any specific style

Specific: inspect ($rest)

}

}

.test {

@ include my-mixin (1,2, (), 4,5)

}

.test2 {

@ include my-mixin (1,2)

}

.test3 {

@ include my-mixin (1,2, (), 6,7)

}

The generated CSS code:

CSS Code copies content to the clipboard

.test {

Specific: 4, 5

}

.test, .test2, .test3 {

Common: 1,2, ()

}

.test2 {

Specific: ()

}

.test3 {

Specific: 6, 7

}

The secret technique of flexible parameter transfer of mixed macros-- Null

In the Sass hybrid macro, we can pass it a list of parameters to make it easy to configure relevant properties quickly. For example, the following hybrid macro contains four parameters that define the display,padding and margin of the element.

CSS Code copies content to the clipboard

@ mixin display ($disp, $padding, $l-margin, $r-margin) {

Display: $disp

Padding: $padding

Margin-left: $l-margin

Margin-right: $r-margin

}

When we call this mixed macro, we must pass a reasonable value for each parameter, or an error will occur.

This often forces developers to pass values for non-essential variables or even reset unnecessary initial values. So, how can we avoid having to pass a value for each variable?

Optional parameters in mixed macros

If we provide a default value for the parameter, the parameter becomes optional:

@ mixin display ($disp, $padding:0, $l-margin:0, $r-margin:0) {

...

}

In this way, the $padding,$l-margin and r-margin parameters become optional when the mixed macro is called again. However, there is another problem: mixed macros that use default parameters sometimes generate styles that are not concise, with some redundancy or even a lot of repetitive code compared to what developers think.

Null

The good news is that Sass supports null, which helps greatly improve the experience of using optional parameters in hybrid macros.

By using null, some styles can be excluded and will not be generated into the final CSS style unless we assign a value to it when we call the mixed macro. Let's override the above mixed macro using null as the default value:

CSS Code copies content to the clipboard

@ mixin display (

$disp

$padding: null

$r-margin: null

$l-margin: null) {

Display: $disp

Padding: $padding

Margin-left: $l-margin

Margin-right: $r-margin

}

This way of use is perfect! We can still define arbitrary optional parameters without generating redundant CSS code. If you pass two parameters to the mixed macro, it will only generate the corresponding CSS style.

CSS Code copies content to the clipboard

.nav _ _ item {

@ include display (inline-block, $l-margin: 20px)

}

Null in Operation

Keep in mind that using null in an operation will throw an error. Examples are as follows:

CSS Code copies content to the clipboard

@ mixin display (

$disp

$padding: null

$l-margin: null) {

Display: $disp

Padding: $padding

Margin-left: $l-margin

Margin-bottom: $l-margin * 2

}

.nav _ _ link {

@ include display (inline-block, 10px)

}

This returns an error message: Invalid null operation: "null times 2". The reason is that because $l-margin is not defined, all numerical operations cannot be performed.

Thus it can be seen that Sass's null has a powerful effect on the redundant output of mixed macros.

Thank you for your reading, these are the contents of "the use of mixed macros in CSS's Sass framework". After the study of this article, I believe you have a deeper understanding of the use of mixed macros in CSS's Sass framework, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.