Sass BASICS (IV) and sass Basics

Sass BASICS (IV) and sass Basics

When you want to set the attribute value, you can use a string to insert it. Another usage is to build a selector.
@ Mixin generate-sizes ($ class, $ small, $ medium, $ big ){
. # {$ Class}-small {font-size: $ small ;}
. # {$ Class}-medium {font-size: $ medium}
. # {$ Class}-big {font-size: $ big ;}
}
@ Include gencerate-sizes ("header-text", 12px, 20px, 40px );
Compiled css
. Header-text-small {font-size: 12px ;}
. Header-text-medium {font-size: 20px ;}
. Header-text-big {font-size: 40px ;}
The first restriction, which may delete interpolation for Sass variables.
$ Margin-big: 40px;
$ Margin-medium: 20px;
$ Margin-small: 12px;
@ Mixin set-value ($ size ){
Margin-top: $ margin-# {$ size };
}
. Login-box {
@ Include set-value (big );
}
The above code is compiled,
Error style. scss (Line 5: Undefined variable: "$ margin -".)
Therefore, the # {} syntax cannot be available everywhere, and you cannot call it in mixin.
@ Mixin updated-status {
Margin-top: 20px;
Background: # F00;
}
$ Flag: "status ";
. Navigation {
@ Include updated-# {$ flag}
}
The above Code also reports an error when being compiled into css;
Error style. scss (Line7: Invalid css after "... nclude updated-*": expected "}", was "# {$ flag };"
Fortunately, interpolation can be used in @ extend. For example:
% Updated-status {
Margin-top: 20px;
Background: # f00;
}
. Selected-status {
Font-weight: bold;
}
$ Flag: "status ";
. Nacigation {
@ Extend $ updated-# {$ flag };
@ Extend. selected-# {$ flag };
}
Compiled css
. Navigation {
Margin-top: 20px;
Background: # f00;
}
. Selected-status,. navigation {
Font-weight: bold;
}
Note
There are two ways to comment in Sass:
1. Similar to the css annotation method, start with "/*" and end with "*/"
2. Use "//" similar to the JavaScript annotation Method
// Define a placeholder
% Mt5 {
Margin-top: 5px;
}
/* Call a placeholder */
. Box {
@ Extend % mt5;
}
Compiled css
. Box {
Margin-top: 5px;
}
/* Call a placeholder */

Data Type
Sass and JavaScript language types also have their own data types. Sass contains the following data types.
Number: for example, 1, 2, 13, 10px,
String: A string with or without quotation marks, such as "foo", 'bar', baz;
Color: such as blue, #04a3f9, rgba (0.5, 0 );
Boolean values: true, false, for example;
Null: for example, null;
Value List: separated by space or comma, for example, 1.em 1em 0.2em Helvetica, Arial, sans-serif.

SassScrip also supports other css property values, such as Unicode ranges or! Important Declaration. However
Sass does not treat these attribute values specially and is considered as a string without quotation marks.


String
SassS supports two types of CSS strings:
Quoted strings, such as "Lucida Grande", 'HTTP: // sass-lang.com ';
Unquoted strings, such as sans-serifbold.
When the # {} interpolation Statement (interpolation) is used, a string with quotation marks will be compiled as a string without quotation marks,
This makes it easy to reference the selector name in the mixin command.
@ Mixin firefox-message ($ selector ){
Body. firefox-message ($ selector ){
Content: "Hi Firefox users! ";
}
}
@ Include firefox-message (". header ");
Compiled:
Body. firefox. header: before (content "hi, Firefox users! ";)
Value List
The so-called Value List (lists) refers to how Sass comes out of css;
Margin: 10px 15px 0 0
Or:
Font-face: Helvetica, Arial, sans-serif
A series of values separated by spaces or commas, as shown in the preceding figure.
The Sass list function (Sass list functions) provides the Value list function (Sass level-1 will be explained)
1. the nth function can directly access an item in the Value List;
2. The join function can join multiple value lists;
3. The append function can add value to the value list;
4. @ each rule (@ each rule) adds a style to each item in 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.
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.
Addition
In css, only the calc () function is feasible so far, but in Sass, the operation is only one of the basic features in Sass.
Can be used for various mathematical calculations.
(1), Addition
Addition is an operation in Sass. addition operations can be performed on variables or attributes. For example:
. Box {
Width: px + 8in;
}
Compiled css
. Box {
Width; 788px;
}
When different types of units are carried, an error is reported during Sass calculation.
For example:
. Box {
Width: 20px + 1em;
} Or the error "Incompatible units: 'em 'and 'px '."
Subtraction
$ Full-width: 960px;
$ Sidebar-width: 200px;
. Content {
Width: $ full-width-$ sidebar-width;
}
The compiled css is as follows:
. Content {width: 760px}
Similarly, when different types of units are encountered during computation, an error is reported during compilation.
$ Full-width: 960px;
. Content {
Width: $ full-width-1em;
}
The compiler reports the error "Incompatible units: 'em 'and 'px.
Multiplication
The multiplication operation in Sass is slightly different from the addition and subtraction operations described above, although it also supports multiple units (such as em, px, %)
For example:. box {
Width: 10px * 2px;
}
"20px * px isn't a valid CSS value." error message is returned during compilation.
The above instance can be modified:
. Box {
Width: 10px * 2;
}
Compiled css
. Box {
Width: 20px;
}
Division
Let's take a look at a simple example.
. Box {
Width: 100px/2;
}
The compiled css is as follows:
. Box {
Width: 100px/2;
}
You only need to add:
. Box {
Width :( 100px/2)
}
Compiled
. Box {
Width: 50px;
}
The following example:
. Box {
Width: 100px/2 + 2in;
}
Compiled css
. Box {
Width: 242px;
}
In sass division, the "/" symbol is automatically recognized as a division when the variable is used for Division.
$ Width: 1000px;
$ Nums: 10;
. Item {
Width: $ width/10;
}
Compiled css
. Item {
Width; 100px;
}

. List {
Width: $ width/$ nums;
}
Compiled css
. Item {
Width: 100px;
}
. List {
Width: 100px;
}
Variable Calculation
In addition to numerical values, Sass also supports variable calculation,
For example:
$ Content-width: 720px;
$ Content-width: 220px;
$ Gutter: 20px;
. Container {
Width: $ conter-width + $ sidebar-width + $ gutter;
Margin: 0 auto;
}
Compiled css
. Container {
Width: 960px;
Margin: 0 auto;
}
Numeric operations
In Sass operations, numeric operations are more common. Numbers include the preceding descriptions, including addition, subtraction, multiplication, division, and so on.
For example:
. Box {
Width :( (220px + 720px)-11*20)/12;
}
Compiled css
. Box {
Width: 60px;
}
Color Calculation
All Arithmetic Operations Support color values and are segmented. That is to say, the red, green, and blue color segments are calculated separately.
For example:
P {
Color: #010203 + #040506;
}
Calculation formula: 01 + 04 = 05, 02 + 05 = 07 and 03 + 06 = 09,
The compiled css is:
P {
Color: #050709;
}
Arithmetic Operations can also combine numbers and color values, and also perform segmentation operations.
P {
Color: #010203*2;
}
The formula is 01*2 = 02, 02*2 = 04, and 03*2 = 06.
P {
Color: #020306;
}
Character operations
In Sass, you can add the symbol "+" to connect strings. For example
$ Content: "Hello" + "" + "Sass! ";
. Box: before {
Content: "# {$ content }";
}
Compiled css
. Box: before {
Content: "Hello Sass! ";
}
In addition to string Join Operations in variables, you can also directly connect strings together through +.
Div {
Cursor: e +-resize;
}
Compiled css
Div {
Cursor: e-resize;
}
Note: If a string with quotation marks is added with a string without quotation marks (that is, the string with quotation marks is on the left side of the + symbol ),
The result is a string with quotation marks. Similarly, if a string without quotation marks is added with a quotation mark
String (the string without quotation marks is on the left side of the + symbol), and the result is a string without quotation marks.
For example:
P: before {
Content: "Foo" + Bar;
Font-family: sans-+ "serif ";
}
Compiled css;
P: before {
Content: "foo Bar ";
Font-family: sans-serif;
}