Sass is introduced

Sass is a CSS preprocessor. Sass is a CSS extension language that can help reduce CSS duplication and save development time.

Sass is fully compatible with all versions of CSS.

Sass used to be written with indentation, which most developers were not used to. Fortunately, the third generation of Sass changed the writing method and changed the suffix from Sass to SCSS.

Benefits of using Sass

  • Avoid download requests

    When importing other CSS in CSS, an HTTP request is sent, and this request is not concurrent, which wastes resources at a certain latitude. And in Sass, Sass compiles all CSS into one CSS file and does not initiate a download request.

  • Save code (more on that later)

    The nested writing of Sass and the method of defining variables and functions can save a lot of code.

  • Easy maintenance (more on that later)

    Sass can define global variable files where you can write specific colors or paths. You can also define @mixin mixin to bring public code globally.

The installation of Sass

In general, we install Sass in one of the three front-end frameworks. However, here we can do our own exercises by installing Sass locally.

Sass NPM install -g SassCopy the code
// Convert the SCSS file to a CSS file. Note that the path here is the current path sass test.scss test.cssCopy the code

Sass basics

Define variables

Sass variables can store the following information: strings, numbers, color values, Booleans, lists, and NULL values.

// If you have a programming mind, you can understand the following code at a glance
// Sass defines variables using the $sign.
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;

p {
    color:$myColor;
    font-size:$myFontSize;
    font-family: $myFont;
}
Copy the code

It is worth noting that defining variables in Sass is also scoped. Yes, global scope and block-level scope are also available in Sass. Of course, we usually use global scopes, but block-level scopes can also be used! Global becomes global and is not expanded here.

Nested rules and attributes

  • Sass can be nested to simplify code writing

    div {
    color:red;
    p {
     padding:6px; }}Copy the code

  • Many CSS properties have the same prefix, such as: font-family, font-size, etc. We can use nested properties to write them (must add 🙂 :

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

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

    Note that this notation does not appear in the outermost layer, so the outermost layer has a P tag.

  • & identifier

    Connect the parent selector directly, and generally connect the pseudo-class

    p{&:hover{
        color:blue; }}Copy the code

Import the style

@import 'filename';
Copy the code

The CSS @import directive creates an additional HTTP request each time it is invoked. However, the sass@import directive includes the file in THE CSS without additional HTTP requests.

You do not need to specify the file suffix when you include files. Sass automatically adds the file suffix.scss. Alternatively, you can import CSS files.

Sass imports and compiles SCSS files that are not local (with an underscore at the beginning of the file name, such as _test). Local SCSS files are only imported, not compiled. The difference is that the import will import variables and mix, the imported file can be used, imported file CSS style does not compile, take effect.

Mixed with

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

The @include directive introduces mixins into documents.

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

Generated CSS code

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

  • Mixin can also include mixin (no presentation)

  • Mixing can pass variables (variables can have default values)

    /* This code should make sense */
// Mix to receive two parameters
@mixin bordered($color.$width:1px) {
    border: $width solid $color;
}

.myArticle {
    // Call mixin and pass two arguments
    @include bordered(blue, 1px);  
}
Copy the code

  • Mixing variable parameters

    Sometimes, when it is not clear how many arguments a mixin or a function should take, we can use… To set variable 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);
}
Copy the code

    Generated CSS code

    .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

  • Mixing in browser prefixes

    We can also mix in properties or selectors in mixin. At this point, the variable must be wrapped in #{}.

    @mixin home($class.$direction) {. # {$class} {margin- # {$direction} :5px; }}div{
    @include home(div,left); 
}
Copy the code

    The generated CSS

    .test .div {
    margin-left: 5px;
}
Copy the code

inheritance

@extend is a good example of code reuse.

The @extend directive tells Sass that the styles of one selector are inherited from another.

.button-basic  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report  {
  @extend .button-basic;
  background-color: red;
}
Copy the code

The generated CSS

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

.button-report  {
  background-color: red;
}
Copy the code

operation

Sass supports addition, subtraction, multiplication, division, and rounding operations (+, -, *, /, %).

function

There are some functions that can be used in Sass, but most of them are rarely used. Here are some of them, but if you want to see all of them, please go to the Sass website or the tutorial for beginners.

There are several types of Sass functions in general: string, number, list, map, selector, Introspection, and color.

  • Use the @for directive to repeat output styles within the limits 
    // Set the 3rd to 4th div child nodes of the home class to the specified style
// Similarly, the loop has the @while directive, which I won't repeat here
@for $i from 3 through 4 {
    .home{>div:nth-child(#{$i}) {
            / /...}}}Copy the code
  • Use map and each for style management 
    // Generate different selector classes by combining each traversal, map data types, @mixin/@include mixers, and #{} interpolation, with different background images in each selector class
$img-list: (
    (accessimg, $papers-access),
    (folderimg, $papers-folder),
    (bmpimg, $papers-bmp),
    (xlsimg, $papers-excel),
    (xlsximg, $papers-excel),
    (gifimg, $papers-gif),
    (jpgimg, $papers-jpg),
    (unknownimg, $papers-unknown));@each $label.$value in $img-list {
    .com-hwicon__# {$label} {
        @include commonImg($value); }}Copy the code
  • Custom function 
    @function double($n) {@return $n * 2;
}

#sidebar {
    width: double(5px);
}
Copy the code

Style code review and validation

Validation rules

You can use the stylelint plug-in for CSS detection. Please refer to the official website for details.

Style repair

Please refer to stylefmt website for details.

Sass use tips

  • Define global variables so that projects can be quickly “skinned” or adjusted later.

    Global variable files should start with _, so Sass will only import but not compile (the CSS inside will not work), and it will be obvious at a glance that this is a global variable file. Of course we can also put the image path in the global variable file (Sass can also do path concatenation).

  • Using @mixin, when the page has a common style, can be referred to the global, can reduce the code and easy maintenance. However, when it comes to the overall situation, developers may not be easy to find at the first time, so we can use the way of mixing. You can either use a global style or give the developer a tag.

    Of course, the best file names will also start with _, for the above reasons.

Sass doubts

  • What is the difference between @mixin and @extend?

    Both interfuse and inheritance are for code reuse. The biggest difference between interfuse and inheritance is that interfuse can bring parameters, while inheritance cannot. We also use mixins spontaneously when defining global variables (inheritance is fine).