Sass BASICS (5)-Mr. Lemon

Sass BASICS (5)-Mr. Lemon @ If
@ If is a SassScript that can process style Blocks Based on conditions. if the condition is true, a style block is returned. Otherwise
False returns another style block. In Sass, in addition to @ if, @ else if and eles can also be used together.
For example:
// SCSS
@ Mixin blockOrHidden ($ boolean: true ){
@ If $ boolean {
@ Debug "$ boolean is # {$ boolean }";
Display: block;
}
@ Else {
@ Debug "$ boolean is # {$ boolean }";
Display: none;
}
}
. Block {
@ Include blockOrHidden;
}
. Hidden {
@ Include blockOrHidden (false );
}
Compiled css
. Block {
Display: block;
}
. Hidden {
Display: none;
}
@ For loop (upper)
In the Sass @ for loop, there are two methods of oil:
@ For $ I from Through
@ For $ I from To
$ I indicates a variable
Start indicates the start value.
End indicates the end value.
The difference between the two is a keyword. "through" indicates that the number includes "end", while "to" indicates that the number does not include "end.
The following code first uses the through keyword.
@ For $ I from 1 throug 3 {
. Item-# {$ I }{
Width: 2em * $ I;
}
}
Compiled css
. Item-1 {
Width: 2em;
}
. Item-2 {
Width: 4em;
}
. Item-3 {
Width: 6em;
}
Example of a to Keyword:
@ For $ I from to 3 {
. Item-# {$ I} {width: 2em * $ I ;}
}
Compiled css:
. Item-1 {
Width: 2em;
}
. Item-2 {
Width: 4em;
}
@ For loop (lower)
@ For the application generates code for each grid class in the grid system.
// Scss
$ Grid-prefix: span! Default;
$ Grid-width: 60px! Defaulet;
$ Grid-gutter: 20px! Defaulet;

% Grid {
Float: left;
Margin-left: $ grid-gutter/2;
Margin-right: $ grid-gutter/2;
}
@ For $ I from 1 through 12 {
. # {$ Grid-prefix} # {$ I }{
Width: $ grid-width * $ grid-gutter * ($ I-1 );
@ Extend % grid;
}
}
Compiled css
. Span1,. span2,. span3,. span4,. span5
,. Span6,. span7,. span8,. span9,. span10,
,. Span11,. span12 {
Float: left;
Margin-left: 10px;
Margin-right: 10px;
}
. Span1 {
Width: 60px;
}
. Span2 {
Width: 140px;
}
. Span3 {
Width: 220px;
}
. Span4 {
Width: 300px;
}
. Span5 {
Width: pixel PX;
}
. Span6 {
Width: 400px;
}
. Span7 {
Width: 540px;
}
. Span8 {
Width: 620px;
}
. Span9 {
Width: 700px;
}
. Span11 {
Width: 860px;
}

. Span12 {
Width: 940px;
}
Change the above example to @ for through ::
// Scss
@ For $ I from 1 to 13 {
. # {$ Grid-prefix} # {$ I }{
Width: $ grid-width * $ I + $ grid-grutter * ($ I-1 );
@ Extend % grid;
}
}
There is no much difference between the two Sass codes, but in @ Different values. Works with through The value is 12,
The traversal end value is also 12, and Same value. Works with The value is 13, and the end value is 12,
Yes The value of a pair minus 1.
@ While LOOP
@ While the command also requires a SassScript expression (like other commands) and generates different style blocks until the expression value is false.
Stop the loop. This is similar to the @ for command. If the condition after @ while is true, the command is executed.
For example:
// SCSS
$ Types: 4;
$ Type-width: 20px;
@ While $ types> 0 {
. While-# {$ types}
Width: $ type-width + $ types;
}
$ Types: $ types-1;
Compiled css
. While-4 {
Width: 24px;
}
. While-3 {
Width: 23px;
}
. While-2 {
Width: 22px;
}
. While-1 {
Width: 21px;
}
@ Each loop
@ Each loop is used to traverse a list and retrieve the corresponding values from the list.
@ Each:
@ Each $ var in
For example:
@ Mixin author-images {
@ Each $ author in $ list {
. Photo-# {$ author }{
Background: url ("/images/avatars/zookeeper Authorizer .png") no-repeat;
}
}
}
. Anthor-bio {
@ Include author-images;
}
Compiled CSS
. Author-bio. photo-adam {
Background: url ("/images/avatars/adam.png") no-repeat;
}
. Author-bio. photo-john {
Background: url ("/images/avatars/john.png") no-repeat;
}
. Author-bio. photo-wynn {
Background: url ("/images/avatars/wynn.png") no-repeat;
}
. Author-bio. photo-mason {
Background: url ("/images/avatars/mason.png") no-repeat;
}
. Author-bio. photo-kuroir {
Background: url ("/images/avatars/wynn.png") no-repeat;
}
Sass Functions
Functions mainly include.
String Functions
Numeric Functions
List Functions
Color Functions
Interospection Function
Ternary functions.
String function-unquote () function
String functions, as the name suggests, are used to process strings. String functions of Sass must include two types.
Unquote ($ string): removes quotation marks from a string.
Quote ($ string): Enclose strings with quotation marks.
1. unquote () function.
The unquote () function is mainly used to delete string quotation marks. If this string is not enclosed in quotation marks, the original string is returned.
// SCSS
. Test1 {
Content: unquote ('Hello Sass! ');
}
. Test2 {
Content: unquote ("'Hello Sass! ");
}
. Test3 {
Content: unquote ("I'm Web Designer ");
}
. Test4 {
Content: unquote ("'Hello Sass! '");
}
. Test5 {
Content: unquote ('"Hello Sass! "');
}
. Test6 {
Content: unquote (Hello Sass );
}
Compiled css code
// Css
. Test1 {
Content: Hello Sass !; }
. Test2 {
Content: 'Hello Sass !; }
. Test3 {
Content: I'm Web Designer ;}
. Test4 {
Content: 'Hello Sass! ';}
. Test5 {
Content: "Hello Sass! ";}
. Test6 {
Content: Hello Sass !; }
The unquote () function can only delete the quotation marks (double quotation marks or single quotation marks) before and after the string, but cannot delete the quotation marks in the middle of the string.
If the character is not enclosed in quotation marks, the return value is the string itself.
String functions-quote () Functions
The quote () function is opposite to the unquote () function. It is mainly used to enclose strings with quotation marks. If the string contains quotation marks
Will be replaced with double quotation marks.
// SCSS
. Test1 {
Content: quote ('Hello Sass! ');
}
. Test2 {
Content: quote ("Hello Sass! ")
}
. Test3 {
Content: quote (ImWebDesigner );
}
. Test4 {
Content: quote ('');
}
Compiled css code
// Css
. Test1 {
Content: "Hello Sass! ";
}
. Test2 {
Content: "Hello Sass! "
}
. Test3 {
Content: "ImWebDesigner ";
}
. Test4 {
Content :"";
}
When you use the quote () function, you can only add double quotation marks to a string, and the string contains single quotation marks or spaces,
It must be enclosed in single or double quotation marks. Otherwise, an error will be reported during compilation.
String functions-To-upper-case (), To-lower-case ()
1. To-upper-case (), To-lower-case ()
To-upper-case ()
// SCSS
. Test {
Text: to-upper-case (aaaaa );
Text: to-upper-case (aA-aAAA-aaa );
}
Compiled css code
// CSS
. Test {
Text: AAAAA;
Text: AA-AAAA-AAA;
}
2. To-lower-case ()
The To-lower-case () function is the opposite of the To-upper-case () function, which converts a string To a lowercase letter.
// SCSS
. Test {
Text: to-lower-cass (AAAAA );
Text: to-lower-case (aA-aAAA-aaa)
}
Compiled css code;
// Css
. Test {
Text: aaaaa;
Text: aa-aaaa-aaa;
}
Introduction to digital functions
The array functions in Sass provide a series of functions for numbers:
Percentage ($ value): converts a number without a unit to a percentage:
Round ($ value): rounds a value to a nearest integer;
Ceil ($ value): converts a decimal point greater than itself to the next integer;
Floor ($ value): removes a number from its decimal part;
Abs ($ value): returns the absolute value of a number.
Min ($ numbers...) to find the minimum value between several numbers:
Max ($ numbers...) to find the maximum value between several values
Random number obtained by random.
Digital functions-percentage ()
1. percentage ()
The percentage () function converts a number without a unit into a percentage:
> Percentage (. 2)
20%
> Percentage (2px/10px)
20%
> Percentage (2em/10em)
20%
>
. Footer {
Width: percentage (. 2)
}
The compiled css code;
. Footer {
Width: 20%;
}
Number function-round () function
The round () function rounds a number to a nearest integer;
> Round (12.3)
12
> Round (12.5)
13
> Round (1.499999)
1
> Round (20%)
20%
> Round (3.9em)
4em
> Round (2.3px)
2px
> Round (1px/3px)
0
> Round (3px/2em)
2px/em

. Footer {
Width: round (12.3px)
}
Compiled css
. Footer {
Width: 12px;
}
Number function-ceil () function
The ceil () function converts a number to an integer closest to itself. This function converts any decimal of itself to an integer greater than or equal to 1 of itself, that is, it only serves as an input.
> Ceil (2.0)
2
> Ceil (2.1)
3
> Ceil (2.6)
3
> Ceil (2.3%)
3%
> Ceil (2.5px)
3px
> Ceil (2px/3px)
1
> Ceil (2%/3px)
1%/px
> Ceil (1em/5px)
1em/px

. Footer {
Width: ceil (12.3px );
}
Compiled css code:
. Footer {
Width: 13px;
}
Digital functions-floor () Functions
The floor () function is opposite to the ceil () function, which mainly removes a number from its decimal part. And do not do any carry, that is, do only give up, do not do into the calculation.
> Floor (2.1)
2
> Floor (2.5)
2
> Floor (3.5%)
3%
> Floor (10.2px)
10em
> Floor (10.2px)
10px
> Floor (10.8em)
10em
> Floor (2px/10px)
0
> Floor (3px/1em)
3px/em
. Footer {
Width: floor (12.3px );
}
Compiled css code
. Footer {
Width: 12px;
}

Numeric functions-abs () Functions
The abs () function returns the absolute value of a number.
> Abs (10)
10
> Abs (-10)
10
> Abs (-10px)
10px
> Abs (-2em)
2em
> Abs (-. 5%)
0.5%
> Abs (-1px/2px)
0.5
. Footer {
Width: abs (-12.3px)
}
Compiled css code:
. Footer {
Width: 12px;
}
Number function-min () function, max () function
The min () function is used to find the smallest one among multiple numbers. This function can be used to set any number of parameters.
> Min (1%, 3.300%)
1%
> Min (1px, 2, 3px)
1px
> Min (1em, 2em, 6em)
1em
However, if two different types of units appear in the min () function at the same time, an error message is returned.
> Min (1px, 1em)
SyntaxError: Incompatible units: 'em 'and 'px '.
Max () function
The max () function is the same as the min function. The difference is that the max () function is used to obtain the maximum value of a series of books.
> Max (1, 5)
5
> Max (1px, 5px)
5px
Similarly, if the max () function has different units, an error is returned:
> Max (1, 3px, 5%, 6)
SyntaxError: Incompatible units: '%' and 'px '.
Numeric functions-random () Functions
The random () function is used to obtain a random number.
> Random ()
0.03886
> Random ()
0.66527
> Random ()
0.8125
> Random ()
0.26839
> Random ()
0.85065
List Functions
List functions mainly include the use of LIST Parameters in the following forms.
Length ($ list): returns the length value of a list:
Nth ($ list, $ n): returns a tag value specified in the list.
Join ($ list1, $ list2, [$ separator]): put a value at the end of the list;
Zip ($ lists...); combine several lists into a multi-dimensional list:
Index ($ list, $ value) returns the position value of a value in the list.
Length () function
The length () function is mainly used to return several values in a list. Simply put, it is used to return the values in the list:
> Length (10px)
1
> Length (10px 20px (border 1px solid) 2em)
4
> Length (border 1px solid)
3
The list parameters in the length () function are separated by spaces. comma is not allowed. Otherwise, an error occurs in the function;
> Length (10px, 20px, (border 1px solid), 2em)
SyntaxError: wrong number of arguments (4 for 1) for 'length
Nth ($ list, $ n)
The nth () function is used to specify the value of a position in the list. However, in Sass, the nth () function is different from other syntax. 1 is the first tag value in the list.
2 refers to the second tag value in the list.
> Nth (10px 20px 30px, 1)
10px
> Nth (Helvetica, Arial, sans-serif), 2)
"Arial"
> Nth (1px solid red) border-top green, 1)
(1px "solid" # ff0000)
In the nth ($ list, $ n) function, $ n must be an integer greater than 0;