Sass interpolation, annotation, number drama type, String, value type, and sass Interpolation

Sass interpolation, annotation, number drama type, String, value type, and sass Interpolation

Interpolation #{}
One of the main reasons for using the CSS Preprocessor language is to use Sass for a better structure. For example, you want to write more clean, efficient, and object-oriented CSS. Interpolation in Sass is an important part. Example:

1 $properties: (margin, padding);2     @mixin set-value($side, $value) {3         @each $prop in $properties {4         #{$prop}-#{$side}: $value;5     }6 }7 .login-box {8     @include set-value(top, 14px);9 }

It can make the variables and attributes work perfectly. The above code is compiled into CSS:

1 .login-box {2     margin-top: 14px;3     padding-top: 14px;4 }

When you want to set the attribute value, you can use a string to insert it. Another useful usage is to build a selector. It can be used as follows:

1 @mixin generate-sizes($class, $small, $medium, $big) {2     .#{$class}-small { font-size: $small; }3     .#{$class}-medium { font-size: $medium; }4     .#{$class}-big { font-size: $big; }5 }6 @include generate-sizes("header-text", 12px, 20px, 40px);

Compiled CSS:

1 .header-text-small { font-size: 12px; }2 .header-text-medium { font-size: 20px; }3 .header-text-big { font-size: 40px; }

# {} Syntax is not available everywhere and cannot be called in mixin
Interpolation can be used in @ extend.

 1 %updated-status { 2     margin-top: 20px; 3     background: #F00; 4 } 5 .selected-status { 6     font-weight: bold; 7 } 8 $flag: "status"; 9 .navigation {10     @extend %updated-#{$flag};11     @extend .selected-#{$flag};12 }

The above Sass code can be run and can be dynamically inserted into. class and % placeholder. They cannot accept parameters such as mixin. the CSS compiled by the above Code:

1 .navigation {2     margin-top: 20px;3     background: #F00;4 }5 .selected-status, .navigation {6     font-weight: bold;7 }

 

 

 

Note
There are two ways to annotate Sass:
1. Use"/*", End use"*/"
2. Use the"//"
The difference between the two is that the former will be displayed in the compiled CSS, and the latter will not be displayed in the compiled CSS.

 

 

 

Data Type

SassScript supports six main data types:

• Number (for example1.2,13,10px)
• Text string, regardless of whether there are quotation marks (for example"foo",'bar',baz)
• Color (for exampleblue,#04a3f9,rgba(255, 0, 0, 0.5))
• Boolean value (for exampletrue,false)
• Null Value (for examplenull)
• Value List, separated by spaces or commas (,).1.5em 1em 0 2em,Helvetica, Arial, sans-serif)

SassScript also supports all other CSS attribute value types, such as Unicode range and! Important Declaration. However, it does not perform special processing on these types. They are only treated as strings without quotation marks.

 

 

String

CSS provides two types of strings:

A string with quotation marks, for example"Lucida Grande"Or'http://sass-lang.com'; A string without quotation marks, such sans-serifOrbold.

The CSS file type will not be changed during compilation. There is only one exception. When the # {} interpolation Statement (interpolation) is used, a quotation mark string will be compiled as a string without quotation marks, which facilitates the mixing of instructions (mixin) the selector name referenced in.

1 @mixin firefox-message($selector) {2     body.firefox #{$selector}:before {3         content: "Hi, Firefox users!";4     }5 }6 @include firefox-message(".header");

Compiled:

1 body.firefox .header:before {2     content: "Hi, Firefox users!"; 3 }

 

 

 

Value List
The so-called Value List (lists) refers to how Sass processes: margin: 10px 15px 0 0 0 or: font-face: Helvetica, Arial, sans-serif in CSS.
A series of values separated by spaces or commas, as shown in the preceding figure.

In fact, an independent value is also considered as a value list-containing only one value list.

The Sass list function (Sass list functions) provides more functions for the Value list:

The Value List can contain a Value List. For example, 1px 2px and 5px 6px are values that contain 1px 2px and 5px 6px. If the two-layer Value List inside and outside uses the same separation method, wrap the inner layer with parentheses, so you can also write it as (1px 2px) (5px 6px ). When the value list is compiled into CSS, Sass does not add any parentheses, because CSS does not allow this. (1px 2px) (5px 6px) and 1px 2px 5px 6px are the same in the compiled CSS file, but they have different meanings in the Sass file, the former is a list of values that contain two value lists, while the latter is a list of values that contain four values.
You can use () to indicate an empty list, so that it cannot be directly compiled into CSS. For example, if you compile font-family: (), Sass will report an error. If the value list contains an empty value list or a null value, the null value is cleared during compilation, for example, 1px 2px () 3px or 1px 2px null 3px.