The use of CSS preprocessing language--less and Sass

We generally use less and sass is generally compiled into the CSS we are familiar with the import use, of course, not compiled, directly in the browser to use

I am accustomed to use koala to compile, simple smart convenient, Hbuilder also comes with the compiler function, but to manual, more trouble

First, let's take a look at less.

"Variables in less"1. Declare the variable using the @ variable name: variable value; 2. Variable type in variable name >>less: ① Number Class 1 10px② string: unquoted string red and quoted string "Gdak" ③ Color class red #000000 RGB () ④ Value list type, Use a comma or space-delimited >> variable usage principle: Multiple frequently occurring values, values to be modified are set to variables3. Mixing (mixins)① non-mixed declaration:. name{} Call: The selector calls the ② with parameters mixed with no default value declaration:. Name (@param) {} call:. Name (Parvalue); Parvalue can not omit the default value declaration:. Name (Param:value ()) {} Call: Name (parvalue), Parvalue can omit >> no argument mix compiles the class selector with the same name in the CSS; the argument does not4.Less Matching modeUse a blend to match, similar to the IF structure: declaration. Name (condition one, parameter) {}.name (condition two, parameter) {}.name (@_, parameter) {} called:. Name (condition value, parameter value), matching rule: Based on the condition value provided at the time of invocation, To find the matching mixin execution, where @_ represents the part that will always need to be executedoperations in 5.Less*+-/can carry units without color operation, red and green blue divided into three groups of calculation, the group can be carried, non-interference between groups.nesting in 6.Less: preserves the code structure in HTML,Nested default descendant selectors, if a descendant selector is required, adds >& to the previous layer in front of the descendant, &:hover represents the hover event of the previous layer

Section P{Color:Red;Background-color:Blue;text-align:Center;}Section ul{padding:0px;List-style:None;}Section ul Li{float: Left;margin:10px;width:100px;text-align:Center;Border:1px solid #000000;}Section ul li:hover{Background-color:Yellowgreen;}

Of course, one of the things we're most optimistic about less is that it's nested just like it's going to write this long code, using less to write as shown in the code below, is it a lot more comfortable to look at, and compile it with the compiler to show the top code?

 Section{p{Color:Red;Background-color:Blue;text-align:Center; }ul{padding:0px;List-style:None;li{Float: Left;margin:10px;width:100px;text-align:Center;Border:@bod;&:hover{Background-color:yellowgreen; }        }    }}

Let's take a look at the sass.

1. Variables in the SassUse the $ variable name: variable value declaration variable if the variable name needs to be nested within the string, use the # Brace wrap:operations in 2.sass will also operate the unit, with the final unit in mind:Example: 10px*10px=100px*pxNesting in 3.sass: nested nested properties of selectors nesting pseudo-class nestingNested ul{li{}} descendants of the selector ul{>li{}} descendants & represents the previous layer Div{ul{li{&=-=div ul Li}}} property nested: There must be a property name between the braces: for example boder:{color:red;} Pseudo-Class nesting: ul{li{&:hover{"ul Li:hover"}}}4. Mixed macros, inheritance, placeholders① Mixed macro: Declares @mixin name ($param: value) {} Call: @include name (value) when declared, can have arguments without parameters, with default values, but calls must conform to the LIFE specification >> advantages: You can pass the parameters, does not generate the same name class>> disadvantage: Copy the Code of the mixed macro into the selector for that ② inheritance: declaration:. class{} Call: @extend .class>> Advantage: Inherited identical code is extracted into the assembly selector, reducing redundant code ,>> disadvantage: Unable to pass the parameter, will generate a Class③ placeholder with the same name in the CSS: declaration:%class{} Call: @extend%class>> Advantage: Inherit the same code, will refer to the set selector, does not produce the same name as the class selector ;>> Disadvantage: Unable to carry out the argument to sum up: when you want to pass parameters with a mixed macro, when there is a ready-to-use class with inheritance, do not need to use the parameter class time placeholder5.if Conditional structure:@if condition {} @else condition {}6.FOR Cycle Structure@for $i from 1 to 10{} does not contain 10, @for $i from 1 through 10{} with 10;7.while Cycle Structure$J: 1; @while $j <10{.while Well {$j}{boder: well {$j}px solid red;} $j: $j +1;}8.each Loop Traversal@each item in A,b,c,d{//item denotes each item}9. Function:@function func ($length) {$length: $length; @return $length;} Call: Func (10px);

I believe we can see the difference between sass and less, the definition of the variable less with the @ character, sass with the $ character of course, sass can use if conditional structure, loop structure, the definition of the function is much bigger than the lower. So generally still use sass to write, for future Rainy day

The use of CSS preprocessing language--less and Sass