This article mainly talks about the css precompiler sass and less;

Sass

Sass (Syntactically Awesome Stylesheets) is a css preprocessor that can help developers reuse css code development and save development time. For installation methods, see Sass on the official website. The most mature, stable and powerful CSS extension language in the world | Sass Chinese website

gem install sass  // mac安装sass

Compiling the sass file requires the command sass:

sass input.scss output.css // 单文件转换
sass --watch input.css:output.css // 单文件监听编译
sass --watch app/sass:public/stylesheets // 监听整个文件夹

In addition, the compiled css file supports four layout methods (--style xxx method):

nested

expanded

compact

compressed

Sass adds advanced functions such as variables, nesting, mixing, and importing on the basis of CSS syntax;

It supports two syntax formats, scss (Sassy css) and the earliest sass format (indentation format). The former uses .scss as the file extension and is more commonly used; the latter uses .sass as the file extension and uses "indentation" Instead of "curly braces" to indicate that the attribute belongs to a certain selector, use "newline" instead of "semicolon" to separate attributes. This article will use the first method that is more commonly used to cooperate with the expanded typesetting method as an explanation~

nested rules

Sass allows one set of css styles to be nested into another set of styles, and the inner style uses its outer selector as the parent selector:

parent selector &

When nesting css rules, sometimes it is necessary to directly connect the parent selector with the child selector. For example, when adding a pseudo-style to a selector, it needs to be close to the selector, such as a: hover, you need to use the parent selector at this time:

In this way, the compiled style will become ul li:hover instead of ul li hover;

& must be the first character of the selector, followed by a suffix to generate a compound selector, such as:

attribute nesting

Some css properties follow the same namespace, such as font-family/font-size, both use font as the namespace of the property. For such properties, sass syntax can also be used:

note

Sass also supports single-line comments // and multi-line comments /* */, where multi-line comments will be included in uncompressed css, and single-line comments will not appear in the compiled css file;

Use ! as the first character of a multi-line comment, then the comment will also be included in the css in the compressed format;

variable

The variable starts with $, and the assignment method is the same as the css attribute writing method, which can be called directly when using:

Variables support block-level scope. Variables defined in nested rules can only be used in nested rules (local variables), and variables not defined in nested rules can be used anywhere (global variables). Converting a local variable to a global variable can add a !global declaration:

Interpolation

This syntax can be used to use variables in the syntax, using #{$var} , where $var is a variable;

type of data

Support 6 data types: number/string/color/boolean/control/array list/maps

Enter the following command on the command line to start the command line writing of sass:

sass -i

Numbers can contain units, such as 12px is a number;

The data type can be checked using the type-of() syntax;

Strings support two types: quoted strings and unquoted strings

Array lists refer to a series of values separated by spaces or commas in css , such as margin: 10px 15px 0 0 or font-face: Helvetica, Arial, sans-serif, lists have length, nth, join, append, index methods ~

length

length is used to detect the length of the list, similar to the length of the array;

ntho is used to access an item in the list and receives two parameters. The first parameter is a list to be searched, and the second parameter is the number of items to be searched (the list index starts from 1 by default~)

join

join connects two lists together and receives three parameters. The first two parameters are certain lists, and the third parameter is that each object is connected by comma (comma)/space (space) or automatic (auto). If not specified, the default is a space;

append

append can add a new value at the end of the lists, receiving two parameters, the first parameter is a list, and the second parameter is the new value to be added

index

index is used to find the index position of a value in lists (the index starts from 1 by default), and receives two parameters, the first parameter is a list, and the second parameter is a value to be found

Maps are similar to arrays in js, they exist as key-value pairs, and are usually wrapped with ():

There are length, map-get, map-keys, map-values, map-has-key, map-merge, map-remove methods in maps~

length

length is used to get the length of a map, that is, how many key-value pairs there are;

map-get

The map-get method is used to get the value of a key in a map, and receives two parameters, the first parameter is a map, and the second parameter is the key to be searched;

map-keys

The map-keys method is used to get all key values in a map, receiving a parameter and a map

map-values

The map-values method is used to get all the values in a map, receiving a parameter and a map

map-has-key

The map-has-key method is used to find whether a key is contained in a map and returns a Boolean value

map-merge

The map-merge method is used to connect two maps together, receiving two parameters, both in the form of maps;

map-remove

map-remove is used to remove a key-value pair of a map, and receives multiple parameters: one is a map, and the second is the key to be removed

operation

number crunching

Support +, -, *, /, % operations, also support relational operations <, >, >=, <=, equality ==, not equal! = operation, and and, or or, not not operation;

Of particular note is the / operator, which is often used:

Support abs(), round(), ceil(), floor(), max(), min() methods, the usage is the same as in js;

string operation

+ is used to connect two strings, and if the left side of + is a string with quotation marks, the result of the operation after + is a string with quotation marks, otherwise, if the left side of + is a string without quotation marks, the result of the operation after + is no quotation marks String (the following display is quoted, just for the reason of display);

- , / methods will be included in the string, using * will report an error;

Change the case to uppercase respectively to-upper-case (uppercase), to-lower-case (lowercase);

The str-index() method is used to find the index value of a character in a string, and receives two parameters, the first parameter is a string, and the second parameter is a character to be searched;

str-length is used to check how many characters a string has, receiving a parameter

str-insert is used to insert a string into a string, and receives three parameters, the first parameter is a string, the second parameter is the string to be inserted, and the third parameter is the insertion position;

@-Rule vs Directive

Sass supports all css3@-rules, as well as sass-specific instructions;

@mixin

Mixin directives are used to define reusable styles

grammar:

@mixin xxxmixin(参数1， 参数2, ....) {
    // 样式
}

@mixin alert {
    color: #f0f0f0;
    font-size: 12px;
}

@mixin warning($color, $font) {
    color: $color;
    font-size: $font
}

@import

sass extends the function of @importd, allowing it to import sass and sass files, and the imported files will be merged into the same css file;

@include 'xxxsass文件'

Mixins should also be used by reference:

In addition, if you need to import scss or sass files, but do not want to compile them into css files, you can add an underscore before the file name of the file (this method is called Partials), and sass will recognize that the file does not need to be compiled . No need to underline when importing

For example, if you name the file _color.scss, sass will not compile the file, and use:

@import 'color' // 若为sass或scss为扩展名，则不用加扩展名，此处也不用加_

@extend

extend allows the style of a selector to inherit the style of another selector;

The style of the subclass selector of the inherited selector will be inherited into @extend;

The same selection can extend multiple selectors. If the styles are the same, the last one introduced shall prevail;

.school-name {
    @extend .name;
    @extend .header;
    background-color: yellow;
}

@if

For conditional judgment, the @if statement can be followed by multiple @else if statements, or @else statements;

@for

The @for instruction can repeat the output format within a limited range, and change the output result each time as required. This instruction includes two formats:

@for $var from <start> through <end> {

} // 第一种使用方式

@for $var from <start> to <end> {

} // 第二种使用方式

The difference between the two is that when using through, it traverses the values including <start> and <end>, and the other way does not include the value of <end>; $var can be any variable~

@each

@each is equivalent to traversing lists (equivalent to traversing arrays)

@each $var, $val2, $val3,..., in $list {
 // 可接收多个参数$val
}

@while

The @while instruction is the same as in js;

@while 条件 {

}

@function

As the name implies, it is used for function functions and returns using @return;

@function xxxfunction(参数1, 参数2, ....,参数n) {

}

@warn/@error

@warn/@error is used to prompt developers, generally used together with the interpolation method, @warn will not compile errors, @error will compile errors;

Less

Less is also a preprocessing method, the address in bootstrap is Less Quick Start| Less.js Chinese Documentation- Less Chinese Website

First install it in the node environment, and then compile it with lessc:

npm install less -g // 安装less
lessc less/style.less css/style.css  // 将less文件编译成css文件

Many of its usages are the same as Sass, here is a brief introduction to the differences:

Variables are declared using @

Mixins

In less, the class selector or id selector definition is used mixedly, and the class selector or id selector is introduced when using it, and the mixed can pass in parameters~

There are 8 ways:

① Ordinary mixing, which means that the statement that defines the mixing will also be compiled into css as output:

②Mix without output, that is, where the mix is defined will not be compiled

③Mix with parameters

You can pass default parameters;

Or specify parameter passing (namespace):

Escaping

Sometimes you may not want to compile the statements in less, but want to output the code in less as it is, then you will use the escaping method, and the grammatical form is ~"non-escaping statement" ;

interpolation

In less, if a variable is used as a selector name or url, the syntax is @{variable name}, and the variable name is the name without @;

inherit

Inheritance uses the &:extend (selector to inherit) syntax:

If you want to inherit all the properties under a certain selector, you can use the all parameter;

Sass and Less of CSS Preprocessor