Less1. Comments://This comment cannot be compiled into a CSS file/* This comment can be compiled into a CSS file */ 2, less basic syntax (1), declaring variable: @ variable name: Variable value using variable: @ variable name >>> The basic principle of the use of variables: Multiple frequent occurrences of the value, need to be uniformly modified at a later stage, involved in the value of numeric operations, the recommended variable >>>less variable type ① numeric class: 123 without units, with units of 1px② string type: Without the quotation marks of red #FF0000 quoted "Hahhaha" ③ Color class: Red #FF0000 RGB (255,255,0) ④ Value list connection type: Multiple values separated by commas or spaces, 10px solid red (2), mixed (mixins) ① non-parametric mixed declaration:. class{} call: In the selector, use the. class; The direct call to ② has no default value mixed declaration:. Class (@param) {} call:. Class (Paramvalue), ③ has the default value mixed declaration:. Class (@param: Default) {} call:. Class ( Paramvalue); Or. Class (); >>> if the parameter is not assigned a default value when it is declared, the call must be assigned a value, otherwise the error >>> no argument mix is actually a normal class selector that will be compiled into a CSS file; , at compile time, does not appear in the CSS file (3), less in the match default ① declaration @pipei (Condition 1, parameter) {} @pipei (condition 2, parameter) {} @pipei (@_, parameters) {} ② call: @pipei (the value of the condition, The value of the parameter) {} ③ match rule: According to the condition value entered at the time of the call, to find the matching mixed execution @_ means that no matter whether the match succeeds or not, the option to execute is (4), @arguments the special variable in the mix, @arguments Represents a mixture of all parameters passed in, separated by a space between multiple parameters in the @arguments. Border (@width, @style, @color) {border: @arguments;-//border: @width @ Style @color;} The subtraction in (5), less, and all the variables and values in less, can be+-*/operation it is important to note that when the color value operation, red and green blue are divided into three groups of operations. Individual operations within the group, non-interference between groups (6), less nested less allows the CSS selector to nest in nested #section{>p{}ul{&:hover{}}}①less in the structure of the HTML code, which is the descendant selector by default. If you need a descendant selector, you need to precede the >②& symbol to represent the & 's previous layer selector, such as the above &, which represents #section ul:hover , SASS1, comments//Comment One: Compile-time will not be compiled to CSS /* Note II in the file: in non-compressed compression mode, it is compiled into a CSS file */ /*! Note Three: Important note ——— Various compression modes, will be compiled into the CSS file */ 2, SCSS basic Syntax (1), variables in scss ① declaration variables: $ variable Name: variable value, &NBSP;SCSS, allows the variable to be nested in the string, but the variable must use the well {} parcel eg:border-well {$position}: 10px solid yellow; (2), SCSS in the operation, will take the unit to operate, the use of the final unit should be aware of the correct eg:height: $width/10; Height: $width *10; (3), nested in SCSS: nested Pseudo-class nested ① selectors nested ul{li{}} nested default using descendant selectors, if you need a descendant selector, you can add > in the selector in the {}, using the & represents the previous layer selector ② pseudo-class nesting: li{&:hover{}} in the selector {}, using & Mate Pseudo-class event, you can represent the pseudo-class ③ attribute nesting of the current selector: font:{size:16px; Weight:bold;family: "Microsoft Jas Black"; Style: "Italic";}; Attribute nesting can be used for attributes where the attribute name has-split into multiple segments; The first half of the property name must follow: {} before you can use {} The second half of the package property (4), mixed macro, inheritance, placeholder ① mixed macro: Use the @mixin to declare a hybrid macro, use @include in other selectors to call the hybrid macro @mixin hunhe. class{@ InchClude Hunhe; } @mixin Hunhe (@param). class{@include Hunhe (value);} @mixin Hunhe (@param: Value). class{@include Hunhe ();} >>> declaration, can have parameters, or can have no parameters; Parameters can have default values, or they can have no default values, but when invoked, they must conform to the same requirements as those in less >>> advantages: ① can pass a parameter ② does not produce class>>> disadvantage with the same name: When called, all the code in the mixed macro Copy to selector, resulting in a lot of duplicate code ② inheritance: Declare a normal class, use @extend in other selectors to inherit this class.class1{}. class2{@extend. Class1; >>> Pros: Extract the same code to the set selector to reduce redundant code >>> drawbacks: ① cannot pass a parameter ② generates an extra Class ③ placeholder: Use the% declaration placeholder, @extend inherit placeholders in other selectors Character%class1{}. class2{@extend%class1;} >>> Advantages: ① The same code, extract to the assembly selector, reduce redundant code; ② does not generate an unnecessary class>>> disadvantage: Cannot pass the parameter (5), IF condition structure: The condition structure needs to write in the selector, The brace of the conditional structure wraps the style attribute @if the condition {} @else {} (6), the For Loop @for $i from 1 to 10{}//Does not contain 10@for $i from 1 through 10{}//contains 10 (7 ), while Loop $i:0, @while $i <10{$i: $i + 1;} (8), each loop traversal @each $item in a,b,c,d{//$item represents each of the a,b,c,d}
Less and SCSS basic syntax
