Sass Study Notes

Differences between sass and scss

Sass is written based on strict indented syntax rules, without braces ({}) and semicolons (;). The scss and css syntax are similar.

Is "GBK" encoding supported during Sass compilation. Therefore, when creating an Sass file, you must set the file encoding to "UTF-8 ".

Sass overwrites the default variable value before it re-declares the variable value (! Default)

Hybrid macro: @ mixin font (used when a variable is needed)

@ Include font

When Sass calls the same hybrid macro, it cannot intelligently combine the same style code block. This is also the biggest disadvantage of Sass hybrid macros.

Inheritance and Extension: @ extend. class; (used when variables are not needed, but the declared base class will appear in css no matter whether it is called or not)

@ Extend call placeholder. The compiled code will combine the same code.

Placeholder: % (used when variables are not needed, but the declared base class is not called and will not appear in css)

% Placeholder declared code. If it is not called by @ extend, no code will be generated

Interpolation :#{}

@ Each... in... statement

The Unit must be the same for calculation. However, when performing a multiplication operation, if the two units are the same, an error occurs, as long as one of them has a value. When performing Division operations, the "/" symbol will take effect if there are other operators. If not, remember to enclose the brackets. Otherwise, it will not take effect. In addition, in Sass division, when a variable is used for division, the "/" symbol is automatically recognized as division. However, during division, if two values have the same unit value, a value without unit is obtained after division.

Value List

(1) nth function can directly access an item in the Value List;

(2) The join function can link 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.

@ For Loop

@ 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 that the keyword "through" indicates that the number includes "end", while "to" indicates that the number does not include "end.

@ While

The loop will not be stopped until false.

@ While $ types> 0 {

. While-# {$ types }{

Width: $ type-width + $ types;

}

$ Types: $ types-1; // auto-Subtraction

}

@ Each loop

@ Each $ var in

Function

(1) string functions

(2) numeric Functions

(3) List Functions

(4) color functions

(5) Introspection function

(6) ternary Functions

(1) string functions: functions used to process strings

Unquote ($ string): Delete the quotation marks in the string. Only the quotation marks (double quotation marks or single quotation marks) before and after the string can be deleted)

Quote ($ string): Enclose strings with quotation marks.

The To-upper-case () function converts lowercase letters of a string To uppercase letters.

The To-lower-case () function converts a string To lowercase letters.

(2) numeric Functions

Percentage ($ value): converts a number without unit into a percentage value;

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 ...) : Find the minimum value between several values;

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

Random (): returns a random number.

List Functions

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

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

(3) join ($ list1, $ list2, [$ separator])

Concatenates two columns into a list. If there are more than two columns, an error occurs. However, in many cases, not only the two lists are connected into a list, but multiple join () functions are used together. The $ separator parameter is used to connect the List Value of the list function. It uses the separator number. The default value is auto. Besides the default value auto, there are two values: comma and space, the comma value specifies that the list item values in the list are separated by commas (,), and the space value specifies that the list item values in the list are separated by spaces.

(1) There is only one list item in the first list, then the Separator Used for each list item in the list item merged by the join () function will be based on

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

(3) If the list items in the two lists are smaller than 1, they will be separated by spaces.

(4) append ($ list1, $ val, [$ separator]): put a value at the end of the list;

1) if the list contains only one list item, the inserted values and the original values are separated by spaces.

2) If the list items in the list are separated by spaces, the inserted list items are also separated by spaces;

3) if the list items in the list are separated by commas (,), the inserted list items are also separated by commas.

4) Of course, in the append () function, you can set the $ separator parameter,

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

If the value is space, the list items are separated by spaces.

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

1) when using the zip () function, each single list of values must be the same, the same type

2) zip (1px 2px 3px, solid dashed dotted, green blue red) generation

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): return the type of a value

• Number is Numeric. (Both units with and without units are supported)
• String is a string type.
• Bool is boolean.
• Color is color

(2) unit ($ number): returns the unit of a value. If there is an operation, the addition and subtraction must be the same unit, and the multiplication and division can be multiple units.

(3) unitless ($ number): checks whether a value has a unit and returns a boolean value.

(4) comparable ($ number-1, $ number-2): checks whether two values can be added, subtracted, and merged, and returns a boolean value. Only the same unit or one with no unit is allowed, or the same unit is the same

Miscellaneous function (ternary)

If ($ condition, $ if-true, $ if-false) // $ condition is a boolean value.

Map (Data Map/json appears in pairs of key: value)

Add a namespace to $ to declare map. Followed by a parentheses (), the data is given in the form of key: value, where key and value appear in pairs, and each pair is separated by commas, the last group is not followed by a comma.

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

    )

);

Sass Maps Functions

(1) map-get ($ map, $ key): returns values related to map based on the given key value.

Returns the value of $ key in $ map based on the $ key parameter. If $ key does not exist in $ map, null is returned.

(2) map-merge ($ map1, $ map2): combines two maps into a new map.

(3) map-remove ($ map, $ key): deletes 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 values in the map.

(6) map-has-key ($ map, $ key): determines whether a map has a corresponding value based on the given key value. If yes, true is returned; otherwise, false is returned.

(7) keywords ($ args): return a function parameter, which can be used to dynamically set the key and value.

@ Mixin map ($ args ...){

@ Debug keywords ($ args );

}

@ Include map (

$ Dribble: # ea4c89,

$ Facebook: #3b5998,

$ Github: #171515,

$ Google: # db4437,

$ Twitter: #55 acee

);

RGB color Function

Enable Sass function compute: sass-I

(1) rgb ($ red, $ green, $ blue): Creates a color based on the values of red, green, and blue;

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

(3) rgba ($ red, $ green, $ blue, $ alpha) // translate an rgba color, which is the same as the untranslated value.

(4) rgba ($ color, $ alpha) // convert a Hex color to rgba color

(5) red ($ color): Obtain the red value from a color;

(6) green ($ color): Obtain the green value from a color;

(7) blue ($ color): Obtain the blue value from a color;

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

$ WeightIs the merged proportion (weight options). The default value is 50%, and the value range is 0 ~ Between 1. It is measured by the percentage of each RGB. Of course, transparency also has a certain weight. The default proportion is 50%, which means that the two colors each account for half. If the specified proportion is 25%, this means that the proportion of the first color is 25%, and the proportion of the second color is 75%.

HSL Functions

(1) hsl ($ hue, $ saturation, $ lightness): Creates a color using values of hue, saturation, and brightness;

(2) hsla ($ hue, $ saturation, $ lightness, $ alpha): By hue, saturation, lightness, and transparency) to create a color;

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

(4) saturation ($ color): gets the saturation value from a color;

(5) lightness ($ color): obtains the brightness value from a color;

(6) adjust-hue ($ color, $ degrees): Creates a new color by changing the color value;

The second value can be a degree or a percentage.

(7) lighten ($ color, $ amount): Creates a new color by changing the brightness of the color;

(8) darken ($ color, $ amount): by changing the brightness value of the color, the color is dimmed and a new color is created;

(9) saturate ($ color, $ amount): Creates a new color by changing the color saturation value to make the color more saturated.

(10) desaturate ($ color, $ amount): Creates a new color by changing the color saturation value to make the color less saturated;

(11) grayscale ($ color): turns a color into gray, equivalent to desaturate ($ color, 100% );

(12) complement ($ color): returns a complementary color, equivalent to adjust-hue ($ color, 180deg );

(13) invert ($ color): returns a reversed color. The values are red, green, and blue, but the transparency remains unchanged.

Opacity Function

(1) alpha ($ color)/opacity ($ color): gets the color transparency value;

(2) rgba ($ color, $ alpha): Change the transparency of the color;

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

Take two parameters. The first parameter is the original color, and the second parameter is the transparency value you need to add. The value range is mainly from 0 ~ Between 1. When the transparency value is greater than 1, 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.

Allows transparent values to be subtracted. When the calculated result is smaller than 0, it is calculated as 0, indicating full transparency.

@ Media

(1) If the @ media command is used in the style, it bubbles to the outside

@ At-root jump out of the root element

Not nested, style independent

@ Debug debugging

@ Warn

@ Error