That’s the sass logo, you need to have a basic knowledge of HTML and CSS to get started!

What is SASS?

Sass (Syntactically Awesome Stylesheets) is a cascading style sheet language originally designed by Hampton Catlin and developed by Natalie Weizenbaum.

  1. Sass is a CSS preprocessor.
  2. Sass is a CSS extension language that can help us reduce repetitive CSS code and save development time.
  3. Sass is fully compatible with all versions of CSS.
  4. Sass extends CSS3 by adding rules, variables, mixins, selectors, inheritance, built-in functions, and more.
  5. Sass generates well-formatted CSS code that is easy to organize and maintain.
  6. The Sass file suffix is.scss or.sass.

The syntax format of saas

There are two syntax formats for Sass. You can use the file suffix to distinguish between files with.scss and.sass. The syntax is different!

  • SCSS syntax

SCSS grammar is from the cSS3 grammar based on the expansion, and CSS3 grammar common, but on this basis to add sASS features, this writing method is also the most simple, and more widely used!

/* Define variable */ 
$font-stack:    Helvetica, sans-serif;
$primary-color: # 333;

body {
/* Call the variable */ 
  font: 100% $font-stack;
  color: $primary-color;
}
Copy the code
  • Sass syntax

Sass uses indentation instead of curly braces, and “line breaks” instead of semicolons to separate properties. Many people find this easier to read and faster to write than SCSS. No special requirements!

/* Define variable */ 
$font-stack:    Helvetica, sans-serif
$primary-color: # 333

body
  font: 100% $font-stack
  color: $primary-color
Copy the code

Sass installation

The browser does not recognize.scss and.sass files, so we need to install sass to convert them into CSS files.

NPM install

At present, front-end development cannot be separated from NodeJS and NPM. The simplest and most common installation method is to install through NPM method, and then cooperate with front-end engineering construction tool gulp or other can be quickly started.

npm install -g sass
Copy the code

Saas variable

Sass variables use the $sign:

$variablename: value;
Copy the code

Variables can store strings, numbers, color values, booleans, lists, and null values

After the variable is declared, we can use it in our code:

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}
Copy the code

Sass scope

The scope of the Sass variable only works at the current level, as shown below: h1 is internally defined green, and p is red.

$myColor: red;    // Global variables

h1 {
  $myColor: green;   // If you modify the global and call it internally, it is only useful in h1, which is the local scope
  color: $myColor;
}

p {
  color: $myColor;  // The mycolor variable is still the value of the global variable
}
Copy the code

! global

Of course we can use Sass! The global keyword sets the variable to be global:

$myColor: red;

h1 {
  $myColor: green ! global;// Global scope
  color: $myColor;
}

p {
  color: $myColor;
}
Copy the code

Note: When a local variable is used! After global, the programming global scope overwrites the original global variable value of the same name.

Sass nested rules and attributes

Sass nested CSS selectors are similar to HTML’s nested rules. As shown in the following example, it follows the nested hierarchy of HTML element nodes

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none; }}Copy the code

Sass nested CSS properties

There are many properties in CSS that have the same day chase, such as: font-family, font-size and font-weight, text-align, text-transform, and text-overflow.

In Sass, we can write them using nested attributes:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}
Copy the code

To convert the above code to CSS code, look like this:

font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;
Copy the code

The Sass file was imported

Like CSS, Sass supports the @import directive.

The @import directive lets us import other files and so on.

The CSs@import directive creates an additional HTTP request each time it is invoked. But the sass@import directive includes the file in the CSS and does not require an additional HTTP request.

The syntax of the sass@import directive is as follows:

@import filename;
Copy the code

Note: You do not need to specify a file suffix to include a file. Sass automatically adds the.scss suffix.

In addition, you can also import CSS files.

After the import, we can use variables such as the import file in the main file.

For the following instance, import the variables. SCSS, colors. SCSS, and reset. SCSS files.

@import "variables";
@import "colors";
@import "reset";
Copy the code

Sass is partially compiled

If you don’t want to compile a Sass code file into a CSS file, you can add an underscore at the beginning of the file name. This will tell Sass not to compile it into a CSS file.

Important: However, we do not need to add an underscore in the import statement.

The following instance creates a _colors. SCSS file, but does not compile to _colors. CSS:

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Copy the code

If you want to import this file, you do not need to use the underscore:

@import "colors";

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}
Copy the code

Note: Do not place underlined and ununderlined files of the same name in the same directory. For example, _color. SCSS and color. SCSS cannot exist in the same directory at the same time, otherwise the underlined files will be ignored.

Sass @ mixins with @ include

The @mixin directive allows us to define a style that can be reused throughout the stylesheet.

The @include directive can introduce mixins into a document.

Define a mixin

Mixins are defined by the @mixin directive.

Syntax: @mixin name {property: value; property: value; . }

The following example creates a mixin named “important-text” :

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}
Copy the code

Note that the Sass link symbol – is the same as the underscore symbol _, that is, @mixin important_text {} is the same mixin as @mixin important_text {}.

Using mixed with

The @include directive can be used to include a mixin, as shown below:

.danger {
  @include important-text;
  background-color: green;
}
Copy the code

To convert the above code to CSS code, look like this:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}
Copy the code

Note: Mixin can also contain mixin, the introduction syntax is the same!

Pass variables to mixin

Mix in parameters that can be received.

We can pass variables to mixin.

Define a mixin that can receive parameters:

/* receive two parameters */
@mixin bordered($color.$width) {
  border: $width solid $color;
}

.myArticle {
  @include bordered(blue, 1px);  // The call is mixed in, passing two arguments \
}

.myNotes {
  @include bordered(red, 2px); // The call is mixed in, passing two arguments \
}
Copy the code

The mixin parameters for the above example are the properties (color and width) that set the border.

To convert the above code to CSS code, look like this:

.myArticle {
  border: 1px solid blue;
}

.myNotes {
  border: 2px solid red;
}
Copy the code

You can also define default values for mixed arguments in the following syntax format:

@mixin sexy-border($color.$width: 1in) {
  border: {
    color: $color;
    width: $width; style: dashed; }}p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
Copy the code

To convert the above code to CSS code, look like this:

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}
Copy the code

Variable parameter

Sometimes, when it is not clear how many arguments a mixin or function takes, we can use… To set the variable parameters.

For example, a mixin used to create a box-shadow can take any number of box-shadows as parameters.

@mixin box-shadow($shadows...). { -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px # 666.2px 6px 10px # 999); The \}Copy the code

To convert the above code to CSS code, look like this:

.shadows {
  -moz-box-shadow: 0px 4px 5px # 666.2px 6px 10px # 999;
  -webkit-box-shadow: 0px 4px 5px # 666.2px 6px 10px # 999;
  box-shadow: 0px 4px 5px # 666.2px 6px 10px # 999;
}
Copy the code

Use the browser prefix mixin

It is also very convenient to use the browser prefix mixin, as shown in the following example:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.myBox {
  @include transform(rotate(20deg));
}
Copy the code

To convert the above code to CSS code, look like this:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
Copy the code

Sass@extend and inheritance

The @extend directive tells Sass that the style of one selector is inherited from another.

Using @extend is useful if one style is almost identical to another, with only a few differences.

In the following Sass instance, we create a basic button style. Button-basic. Then we define two button styles. Button-report and. The main difference is the background color and the font color, but everything else is the same.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

.button-submit  {
  @extend .button-basic;
  background-color: green;
  color: white;
}
Copy the code

To convert the above code to CSS code, look like this:

.button-basic..button-report..button-submit {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report  {
  background-color: red;
}

.button-submit  {
  background-color: green;
  color: white;
}
Copy the code

With @extend, we don’t need to specify multiple classes in the HTML button tag class=”button-basic button-report”, we just need to set class=”button-report” class.

@extend is a great example of code reuse.