The Gospel of non-front-end developers---CSS preprocessing language less&sass

write in front:It is well known that CSS is a non-procedural language, no variables, functions, scope (scope), in the previous interface style design, the need to write a large number of seemingly illogical code, inconvenient maintenance and expansion, is not conducive to repeated calls, especially for some UI designers and other non-front-end development engineers, It is often difficult to write well-organized and maintainable CSS code because of the lack of CSS authoring experience. In order to facilitate the development of the front-end workload, sass and less should be born.

Introduction to Less

The first, less is a separate file, can be understood as the upgrade version of the CSS, completely in accordance with CSS writing is no problem, but it provides a lot of convenient things, can save a lot of code volume.

The second, the HTML only recognize CSS, so need to support some software to parse less into CSS, reference time, direct reference to CSS is good. Gulp,koala are common, and koala seem simple and convenient. A variety of ways to smoothly translate the written code into standard CSS code.

What is SASS?

Sass (syntactically Awesome Style Sheets) is a relatively new programming language, Sass for web front-end development, you can use it to define a new set of grammar rules and functions to enhance and enhance the CSS. With this new programming language, you can create complex designs in a small amount of code in the most efficient way possible. It improves and enhances the ability of CSS, adding variables, parts and functions to these features. And this only makes sass a part of the weapon!

The main difference between less and sass is how they are implemented, less is based on JavaScript, so it's handled on the client side.

On the other hand, Sass is based on Ruby and is then processed on the server side.

Part I.: Less

 //This comment is not compiled into a CSS file/* This comment can be compiled into a CSS file */  "less basic syntax" 1, DECLARE variable: @ Variable name: variable value; use variable: @ variable name;>>> The principle of variable use: Set the values that occur frequently/later require bulk modification/The value involved in numeric operations, and recommend variable declarations. Variable types in >>>less: property values that appear in CSS can be used in less as variable names ①, numeric classes: 123 1px② with units without units, string types: Quoted "hahaha" without the quoted red #ff0000 ③, Color class: Red #ff0000 RGB (255,255,0) ④, Value list type: Multiple values separated by commas or spaces 10px solid red2, Mixed (mixins): ①, non-parametric mixed declaration:. class{} using: In the selector, Use. class to call ② directly, with no default mixed declaration:. Class (@param) {} using:. Class (Paramvalue) ③, with parameter mixed declaration of default values:. Class (@param: 10px) {} using::. Class ( Paramvalue) or. Class () >>> if the declaration does not assign a default value to the parameter, then the call must be assigned a value, otherwise the error! >>> no-parameter blending is actually a normal class selector. will be compiled into a CSS file. In the case of a mixed argument, the compilation will not be compiled into a CSS file; 3. Match default in less: ① declaration: @pipei (condition one, parameter) {} @pipei (condition two, parameter) {} @pipei (@_, parameter) {}② called: @pipei (value of the condition, value of the parameter) { }③ matching rules: According to the condition values entered at the time of invocation, to find the matching mixed execution; The @_ option executes regardless of whether it matches. 4. @arguments Special variables @arguments in a blend represents all the parameters that are mixed in. The arguments are separated by a space between multiple arguments: border (@width, @style, @color) {border @arguments; >>border: @width, @style, @color}5, The subtraction operation in less is all variables and values in less, and can be performed with a +-*/operation. It should be noted that when the color of the operation, red and green blue is divided into three groups to operate, the group of separate operations, non-interference between groups. 6. Embedded in lessSet: less allows the CSS selector to be nested in the structure of the HTML code Section{>p{}ul{&:hover}}①, the selector in less, by default the descendant selector. If you need a descendant selection, you need to precede the >②, & symbol to indicate the previous layer selector. For example, &amp in the above, which means section ul:hover 

Part II: Sass

Sass: It can be used to develop Web page styles, but it can't be programmed. In other words, CSS is basically a designer's tool, not a programmer's tool. In the programmer's eyes, CSS is a very troublesome thing. It has no variables, there are no conditional statements, just a line of simple description, it is rather cumbersome to write.

Naturally, someone started adding programming elements to the CSS, which is called"CSS Preprocessor"(CSS preprocessor). Its basic idea is to use a special programming language, Web page style design, and then compiled into a normal CSS file.first, what is SassSASSis a kind of CSS development tool, provides many convenient writing, greatly saves the designer time, makes the CSS development, becomes simple and maintainable.Second, useSass files are ordinary text files, which can be directly used in CSS syntax. The file suffix name is. scss, meaning sassy CSS. The following command allows you to display the CSS code for the. scss file conversion on the screen. (Assume that the file name is test.) If you want to save the displayed results as a file, followed by a. css file name.the SASS offers four variant style options: * Nested: Nested indentation of the CSS code, which is the default value. * Expanded: no indented, extended CSS code. 　* Compact: A concise form of CSS code. * Compressed: Compressed CSS code. In a production environment, the last option is generally used. Sass--style Compressed Test.sass test.cssthe above operation can be achieved with the help of the koala software. in the sass://Note one: Compile-time will not be compiled into the CSS file;/*Note and two: in non-compressed compression mode, it is compiled into a CSS file. */ /*!Note Three: Add an exclamation point to/* to indicate that this is an "important note." This line of comments is retained even in compression mode compilation, and can often be used to declare copyright information. */three, basic usage3.1 VariablesSass allows the use of variables, with all variables starting with $. If a variable needs to be embedded in a string, it must be written in the#{}. 3.2 Calculation functionSASS allows you to use a calculation in your code:3.3 NestingNesting in scss: nested pseudo-class nesting of selectors nested properties① selector nested: ul{li{}}Nested defaults are descendant selectors. If you need a descendant selection, you need to precede the selector with >; to use & to represent the selector of the previous layer in the selector {}② pseudo-Class nesting: li{&:hover{}}In the {} of the selector, use & Mate with Pseudo-class events③ attribute nesting: font:{size:18px;}For property names with attributes that are separated into multiple segments, you can use property nesting, and the first half of the property name must follow: Then use {wrap the latter half}eg:Sass allow selectors to be nested. For example, the following CSS code: can be written: attributes can also be nested, such as the Border-color property, can be written as: Note that the border must be followed by a colon. Within a nested code block, you can use & to reference the parent element. For example, A:hover pseudo-class, can be written as:Iv. Reuse of code : Mixed macros, inheritance, placeholders: ① Mixed macros: Use @mixin to declare mixed macros, use @include in other selectors to call mixed macrosEg: @mixin hunhe{}. class{@include Hunhe};eg: @mixin hunhe ($param) {}. class{@include hunhe (value)};eg: @mixin Hunhe ($ Param:value) {}. class{@include hunhe ()}; >>> declaration can have parameters or can have no parameters. >>> can have assignments or no assignments when called. >>> but calls must conform to the requirements of the claim, which is the same as the less mix. Pros: You can pass a parameter without having a class disadvantage with the same name: The call will copy all the code in the mixed macro into the selector, producing a lot of duplicate code.② Inheritance: Declare an ordinary class, and use extend in other selectors to inherit the class;Eg:. class1{}. class2{@extend. Class1} Pros: Extract the same code to the set selector to reduce redundant code. Cons: ① cannot be passed, ② will generate an extra class③ placeholder: Use the% declaration% placeholder and the @extend inheritance placeholder in other selectors;%class{}. class2{@extend%class1} Pros: ① Extract the same code to the set selector, reducing redundant code. ② does not generate an extra class disadvantage: cannot pass the argumenteg:4.1 InheritanceSASS allows a selector to inherit from another selector.　　For example, existing Class1:. Class1 {border:1px solid #ddd;　　　　}class2 to inherit Class1, use the @extend command:. class2 {@extend. Class1;　　font-size:120%; }4.2 MixinMixin a bit like a C-language macro,is a code block that can be reused. Use@mixin Command, define a block of code. @mixin left {float:left;　　margin-left:10px; } Uses@include command, call this mixin. div {@include left;　　The power of}mixin is that you can specify parameters and default values. @mixin Left ($value: 10px) {Float:left;　　Margin-right: $value;　　When used, add parameters as needed: div {@include left (20px); }4.3 color functionsSASS provides a number of built-in color functions to generate series colors. Lighten (#cc3, 10%)//#d6d65c Darken (#cc3, 10%)//#a3a329 grayscale (#cc3)//#808080 complement (#cc3)//#33c4.4 Inserting files@import command to insert an external file.　　@import "Path/filename.scss"; if you insert a. css file, it is equivalent to the import command for the CSS. @import "Foo.css";v. Advanced usage5.1 article StatementsIf conditional structure: The conditional structure needs to be written in the selector, and the conditional structure's curly braces directly wrap the style attributes. @if Condition {} @else {}5.2 Loop StatementsSASS supports for loop: @for $i from 1 to $color 0{}//not including 10@for $i from 1 through $color 0{}//Includes ten while loop: $i: 0; @while $i <10{$i: $i + 1;} Each loop traversal: @each $item in a,b,c,d{//$item represents each of the a,b,c,d}5.3 Custom FunctionsSass allows users to write their own functions. [This article refer to Ruan Yi Feng about sass of the relevant explanation]

The Gospel of non-front-end developers---CSS preprocessing language less&sass