Sass Study Notes

The difference between sass and SCSS

Sass is written with strict indentation syntax rules, without curly braces ({}) and semicolons (;), scss and CSS are more similar

Sass is not supported in the process of compiling "GBK" encoding. So when you create a Sass file, you need to set the file encoding to "Utf-8

Sass overriding the default variable value is before he re-declares the value of the variable (! Default

Mixed macros: @mixin font (used when variables are needed)

@include Font

Sass does not intelligently merge the same style code blocks together when calling the same mixed macro. This is also the Sass of the mixed macro of the most shortcomings.

Inheritance and extension: @extend. class; (no need to use variables, but the declared base class, whether or not called, will appear in CSS)

@extend called placeholders, the compiled code merges the same code together

Placeholder:% (does not need to use the variable, but the declared base class, not called, will not appear in the CSS)

The code of the%placeholder declaration will not generate any code if it is not called by the @extend

Interpolation: #{}

@each ... Statement

When the operation is carried out, the unit should be the same as the unit. However, when multiplying, with units, two units of the same words, there will be errors, as long as one of the band value on it. In the case of division, the "/" symbol, if there are other operators, will take effect, if not, remember to enclose the parentheses, otherwise it will not take effect, in addition, in the Sass division operation, when the division operation with the variable, the "/" symbol will automatically be recognized as division. However, when the division operation, if two values with the same unit value, the division operation will get a numeric value without units

Value List

(1) Nth functions (nth function) can directly access an item in a list of values;

(2) The Join function (join functions) can link multiple value lists together;

(3) Append functions (Append function) can add values to the list of values;

(4) @each rule (@each rule) enables you to add a style to each item in the list of values.

@for Cycle

@for $i from <start> through <end>

@for $i from <start> to <end>

$i represents a variable

Start indicates the starting value

End indicates the ending value

The difference between the two is that the keyword through includes the end number, and to does not include the end number.

@while

Stop looping until you encounter false

@while $types > 0 {

. while-#{$types} {

Width: $type-width + $types;

}

$types: $types-1; Self-reduction

}

@each Cycle

@each $var in <list>

function function

(1) String function

(2) Number function

(3) List function

(4) Color function

(5) Introspection function

(6) Ternary functions, etc.

(1) String function: A function to handle a string

Unquote ($string): Delete quotation marks in a string; only the first and last quotation marks (double or single quotes) are deleted

QUOTE ($string): Adds quotation marks to a string.

The To-upper-case () function converts the lowercase letter of a string to uppercase

The To-lower-case () function converts a string to a lowercase letter

(2) Number function

Percentage ($value): Converts a number without units to a percentage value;

Round ($value): Rounds the value to a nearest integer;

Ceil ($value): Converts a decimal greater than itself to the next integer;

Floor ($value): Removes a number from his decimal part;

ABS ($value): Returns the absolute value of a number;

Min (s ...) : Find the minimum value between several values;

Max (s ...) : Find the maximum value between several values;

Random (): Gets the stochastic number

List functions

(1) Length ($list): Returns the length value of a list;

(2) nth ($list, $n): Returns a label value specified in a list ($n must be an integer greater than 0)

(3) Join ($list 1, $list 2, [$separator])

Connecting two columns to a list, more than 2 will make an error, but most of the time it takes more than two lists to connect to a list, this time you need to combine multiple join () functions together. Parameter $separator, this parameter is mainly used to give list function connection list value is, use the delimiter, the default value is auto, in addition to the default value of auto, there are comma and space two values, where the comma value specifies the list item values in the list are separated by commas (,), The space value specifies that the list item values in the list are separated by a space ().

(1) There is only one list item in the first list, and the delimiter used by the join () function for each list item in the list item that is merged will be used in the second list item according to the

(2) If a space is used between each value in the first list in a list

(3) If the list item in the two list is less than 1 o'clock, it will be separated by a space

(4) Append ($list 1, $val, [$separator]): Place a value at the end of the list;

1) If the list has only one list item, then the inserted value will be separated from the original value by a space.

2) If the list item in the list is a space-delimited list item, the inserted list item is also separated by a space;

3) If the list items in the list are comma-separated list items, the inserted list items are also separated by commas.

4) Of course, in the Append () function, you can display the settings $separator parameters,

If the value is comma, the list items are separated by commas

If the value is space, the list item will be separated by a space

(5) Zip ($lists ...) : Combine several lists into a multi-dimensional list;

1) When using the zip () function, each single list value must be the same, the same type

2) Zip (1px 2px 3px,solid dashed dotted,green blue red) build

1px solid green, 2px dashed blue, 3px dotted red

(6) Index ($list, $value): Returns the position value of a value in the list. Index (1px solid red, red)

Introspection function

(1) type-of ($value): Returns the type of a value

• Number is a numeric type. (with units and no units can be)
• string literal.
• BOOL is a Boolean type.
• Color is of type

(2) unit (): Returns the unit of a value, if there is an operation, the addition and subtraction to the same unit, multiplication can be multiple units

(3) unitless (): Determines whether a value has a unit, returns a Boolean value

(4) Comparable (-1,-2): Determines whether two values can be added, reduced, and merged, returning a Boolean value. The same unit or a non-unit can be, or the same type of unit

Miscellaneous function (Ternary)

if ($condition, $if-true, $if-false)//$condition is a Boolean value

Map (Data map/json with Key:value)

Declare the map with a $ plus namespace. followed by a parenthesis (), the data is given in the form of Key:value, where key and value are paired, and each pair is separated by a comma (,), where the last group has no comma behind it.

Map can be nested with each other

$theme-color: (

Default: (

bgcolor: #fff,

Text-color: #444,

Link-color: #39f

),

Primary: (

bgcolor: #000,

Text-color: #fff,

Link-color: #93f

),

Negative: (

bgcolor: #f36,

Text-color: #fefefe,

Link-color: #d4e

)

);

Functions of Sass Maps

(1) Map-get ($map, $key): Returns the associated value in map based on the given key value.

Returns the value of the value corresponding to the $key in the $map, based on the $key parameter. A null value is returned if the $key does not exist in the $map

(2) Map-merge ($map 1, $map 2): Merges two maps into a new map.

(3) Map-remove ($map, $key): Removes a key from the map and returns a new map.

(4) Map-keys ($MAP): Returns all keys in the map.

(5) Map-values ($MAP): Returns all the value in the map.

(6) Map-has-key ($map, $key): Determines if the map has a corresponding value value based on the given key value and returns False if it returns true.

(7) Keywords ($args): Returns the parameter of a function that can be dynamically set to key and value.

@mixin map ($args ...) {

@debug keywords ($args);

}

@include Map (

$dribble: #ea4c89,

$facebook: #3b5998,

$github: #171515,

$google: #db4437,

$twitter: #55acee

);

RGB color function

function calculation of opening Sass: Sass-i

(1) RGB ($red, $green, $blue): Create a color based on the three values of red, green, and blue;

(2) Rgba ($red, $green, $blue, $alpha): Creates a color based on red, green, blue, and transparency values;

(3) Rgba ($red, $green, $blue, $alpha)//Convert an RGBA color to the same value as the non-translatable

(4) Rgba ($color, $alpha)//Convert a hex color to Rgba color

(5) Red ($color): Gets the red value from one color;

(6) Green ($color): Gets the green value from one color;

(7) Blue ($color): Gets the blue value from one color;

(8) Mix ($color-1, $color -2,[$weight]): Mix the two colors together.

The $weight is the scale of the merge (select weight), the default value is 50%, and the range of values is 0~1. It is measured as a percentage of each RGB, and of course transparency has a certain weight. The default scale is 50%, which means that the two colors are in half, if the specified scale is 25%, which means that the first color is 25%, and the second color is a percentage of 75%.

HSL function

(1) HSL ($hue, $saturation, $lightness): Creates a color from the values of Hue (hue), saturation (saturation), and brightness (lightness);

(2) Hsla ($hue, $saturation, $lightness, $alpha): Creates a color from the values of Hue (hue), saturation (saturation), brightness (lightness), and transparency (alpha);

(3) Hue ($color): Gets the hue (hue) value from a color;

(4) Saturation ($color): Gets the value of saturation (saturation) from a color;

(5) Lightness ($color): Gets the luminance (lightness) value from a color;

(6) Adjust-hue ($color, $degrees): Create a new color by changing the hue value of a color;

The second value can be a number of degrees, or it can be a percentage

(7) Lighten ($color, $amount): By changing the luminance value of the color, to lighten the color, create a new color;

(8) Darken ($color, $amount): By changing the luminance value of the color, darken the color and create a new color;

(9) Saturate ($color, $amount): Create a new color by changing the saturation value of the color to make the color more saturated

(Desaturate) ($color, $amount): Create a new color by changing the saturation value of the color so that the color is less saturated;

(one) grayscale ($color): Turns a color into gray, equivalent to Desaturate ($color, 100%);

Complement ($color): Returns a supplemental color equivalent to Adjust-hue ($color, 180deg);

(+) Invert ($color): Invert an inverted color, the red, green, and blue values are reversed, and the transparency is the same.

Opacity function

(1) Alpha ($color)/Opacity ($color): Gets the color transparency value;

(2) Rgba ($color, $alpha): Change the color transparency value;

(3) opacify ($color, $amount)/fade-in ($color, $amount): Make the color more opaque;

Accept two parameters, the first parameter is the original color, the second parameter is the transparency value you need to increase, and its value range is mainly between 0~1. When the transparency value increases to more than 1 o'clock, it is calculated as 1, indicating that the color does not have any transparency.

(4) Transparentize ($color, $amount)/fade-out ($color, $amount): Make the color more transparent.

Let the transparency value do subtraction, when the calculated result is less than 0 will be calculated as 0, indicating full transparency

@media

(1) If the @media instruction is used in the style, it will bubble out to the outside

@at-root jump out of the root element

Not nested, style Independent

@debug debugging

@warn

@error

Sass Study Notes