A summary of learning about SASS

Objective

Sass is a 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.

Sass offers four compile-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.

Import file

@import command to import external files.

@import "Path/filename.scss";

If you import a. css file, it is equivalent to the import command for the CSS.

Comments

Sass There are two types of annotations, one is the standard CSS notation *//and the other is a single-line comment in the form of a//double-diagonal bar, but this single-line comment is not translated.

1 variables

Sass allows variables to be used, all variables start with $

Common variables

Can be used globally when defined.

Default variables

The default variable for SASS only needs to be appended with!default to the value.

The default variables for sass are generally used to set default values and then overwrite them as required, and the way to overwrite them is simple, just to re-declare the variables before the default variables.

The value of the default variable can be very useful for component development.

Special variables

In general, the variables we define are attribute values that can be used directly, but must be used as #{$variables} If the variable is a property or, in some special cases, inferior.

Multi-valued variables

Multi-valued variables are categorized as list type and map type, simply speaking, the list type is a bit like an array in JS, and the map type is a bit like the object in JS.

Global variables

Adding!global after the variable value is a global variable. This is not currently available, but will be formally applied in the version after Sass 3.4. The current range of sass variables has been criticized, so there is this global variable.

2 Nesting (Nesting)

The nesting of sass consists of two kinds: one is the nesting of selectors, the other is the nesting of attributes. What we generally talk about or use is the nesting of selectors.

In selector nesting, you can use & to represent the parent element selector

Attribute nesting: The so-called attribute nesting refers to some properties that have the same starting word, such as border-width,border-color, that begin with border.

. Fakeshadow {  border: {    style:solid;    Left: {      width:4px;      Color: #888;    }    Right: {      width:2px;      Color: #ccc;}}  }

@at new features in-root:sass3.3.0 to jump out of nested selectors.

3 Mixing (mixin)

In sass, you use @mixin to declare a blend, you can pass parameters, the parameter names start with a $ symbol, multiple arguments are separated by commas, or you can set a default value for a parameter. The declared @mixin is called by the @include.

Multiple parameter Mixin

The value can be passed directly to the call, such as @include the number of incoming parameters is less than the number of @mixin definition parameters, then in order, the following insufficient use of the default value, such as insufficient no default value error. In addition, you can optionally pass in parameters, using parameter names and values at the same time.

Multi-Set Value parameter Mixin

If a parameter can have more than one set of values, such as Box-shadow, transition, and so on, then the parameter needs to be added three points after the variable, such as $variables ....

@content @content is introduced in sass3.2.0, which can be used to solve the problems caused by CSS3 @media. It allows the @mixin to accept an entire block of styles, and the accepted style begins with the @content. Sass style//-------------------------------                     @mixin max-screen ($res) {@media only screens and  (max-width: $ Res)  {    @content;  }} @include Max-screen (480px) {  body {color:red}}//css style//-------------------------------@media only Screen and ( max-width:480px) {  body {color:red}}

* * @mixin the style parsed after the @include call exists in the form of a copy, and the following inheritance is present in the form of a joint declaration, so from 3.2.0, it is recommended to pass the parameters with the @mixin, rather than passing the parameter class using the following inheritance%. **

4 inheritance

In Sass, selector inheritance allows the selector to inherit all styles from another selector, and a joint statement. Using the selector inheritance, use the keyword @extend, followed by the selector that needs to be inherited.

Placeholder Selector%

The placeholder selector% can be defined after Sass 3.2.0. The advantage of this selector is that if you do not call then there will be no redundant CSS files, avoid the previous in some basic files pre-defined a lot of basic style, and then the actual application whether or not to use the @extend to inherit the corresponding style, will parse out all the styles. The placeholder selector is defined as the% identity, and is called by the @extend.

The presence of a placeholder selector makes the CSS file more concise and controllable, without superfluous. So you can use it to define some of the underlying style files and then invoke the corresponding CSS as needed.

Sass style//-------------------------------%ir{  color:transparent;  Text-shadow:none;  background-color:transparent;  border:0;} %clearfix{  @if $lte 7 {    *zoom:1;  }  &:before,  &:after {    content: "";    display:table;    Font:0/0 A;  }  &:after {    clear:both;  }} #header {  h1{    @extend%ir;    width:300px;  }}. ir{  @extend%ir;} CSS style//-------------------------------#header h1,.ir{  color:transparent;  Text-shadow:none;  background-color:transparent;  border:0;} #header h1{  width:300px;}

You cannot temporarily @extend code snippets outside of @media in the @media, and you will be able to do so later.

5 functions

Sass defines a number of functions to use, and of course you can define your own functions to start with @fuction. Sass's official function link is: Sass fuction, the actual project we use the most should be the color function, and the color function in the lighten dodge and darken deepened as the most, its call method is lighten ($color, $amount) and darken ($color, $amount), their first argument is a color value, and the second parameter is a percentage.

Pixels to Rems @function pxtorem ($px) {  @return $px/$baseFontSize * 1REM;}

6 arithmetic

Sass has the characteristic of arithmetic, can subtraction arithmetic to numeric value (for example: number, color, variable, etc.). Note that you leave a space before or after the operator, or you will get an error. Also, be aware of the operating unit

7 Condition judgment and circulation

@if judgment

@if can be used on a single condition or in combination with @else multiple conditions

Three eyes judgment

if ($condition, $if _true, $if _false)

For loop

The For Loop has two forms: @for $var from

@each Cycle

The syntax is: @each $var in

Multiple fields list data loop

//sass style//-------------------------------$animal-data: (Puma, Black,  Default), (Sea-slug, blue, pointer), (Egret, White, move), @each $animal, $color, $cursor in $animal-data {. #{$animal}-icon    {Background-image:url ('/images/#{$animal}.png ');    border:2px solid $color;  cursor: $cursor;  }}//css style//-------------------------------. Puma-icon {background-image:url ('/images/puma.png ');  BORDER:2PX solid black; Cursor:default;  }.sea-slug-icon {background-image:url ('/images/sea-slug.png ');  BORDER:2PX solid blue; Cursor:pointer;  }.egret-icon {background-image:url ('/images/egret.png ');  border:2px solid white; Cursor:move; }