When writing CSS in a normal project, using only native CSS can seem pretty overwhelming. With the help of SCSS it does reduce the stress, at least to look comfortable.

Here I will just summarize some of the more common uses. Some of the more advanced uses can be found on the official website. (Most examples are from the official website)

Is different from less

SCSS (.scss or.sass) and LESS (.less) are different except for the suffix name.

Less is Javascript based and Sass was originally Rudy based but is no longer maintained. The current Dart Scss is based on Dart, and the official Dart Scss is now recommended.

Also, in Less, variables start with @, and Sass starts with $.

Scss is different from Sass

In the early days, Sass was used to write CSS in indent format, which uses.sass as the suffix.

SCSS is written in the same format as CSS and is syntactically compatible with CSS3, which uses.scss as the suffix.

Based on the CSS function extension

The most obvious extension is the ability to write CSS in nested form, for example:

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: # 000000; }}Copy the code

Can be compiled as:

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: # 000000; 
}
Copy the code

And with & as the parent selector, you can use the nested outer parent selector directly

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }}}Copy the code

Compile as follows:

#main {
  color: black; 
}
#main a {
  font-weight: bold; 
}
#main a:hover {
  color: red; 
}
Copy the code

Use the variable

In Sass, variables start with $, followed by the variable name.

$main-fonts: Arial, sans-serif;
$headings-color: green;

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}
Copy the code

Create reusable CSS with @mixin

Add the name and style after @mixin, and then use @include to make it available elsewhere.

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
Copy the code

And you can add parameters.

@mixin box-shadow($x.$y.$blur.$c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

div {
  @include box-shadow(0px.0px.4px.#fff);
}
Copy the code

Control instruction

Although control commands don’t seem to be used very often, they are available in case of emergency. It is mainly used in conjunction with mixins.

@ the if and the @ the else

@mixin border-stroke($val) {
    @if $val==light {
      border: 1px solid black;
    }
    @else if $val==medium {
      border: 3px solid black;
    }
    @else if $val==heavy {
      border: 6px solid black;
    }
    @else {
      border: none; }}#box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
}
Copy the code

@for

Limited control over repeated output.

The #{} is similar to a template string in JavaScript.

Here are two ways to write it:

  1. Start through End: thisincludingEnd symbol.
  2. Start to finish: thisDo not includeEnd symbol.
<style type='text/scss'>@for $i from 1 through 6 { .text-#{$i} { font-size: 15 * $i; }}</style>

<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>
Copy the code

@each

Similar to for, but this direct traversal of values.

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}
Copy the code

This code will be converted to:

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}
Copy the code

@while

@while can do much more complicated things than @for.

$i: 6;
@while $i > 0 {
  .item-# {$i} { width: 2em * $i; }
  $i: $i - 2;
}
Copy the code

Compiled into:

.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }
Copy the code

@import

@import allows it to import SCSS or Sass files.

Imported files are merged and compiled into the same CSS file. In addition, variables or mixins contained in the imported file can be used in the imported file.

@import "foo.scss";
/ / or
@import "foo";
Copy the code

If you need to import an SCSS or Sass file that you don’t want to compile to CSS, just underline the file name so that Sass knows it’s a small part of CSS and doesn’t convert it to a CSS file. There is no need to add an underscore to the import statement.

For example, naming the file _colors.scss will not compile the _colour.css file.

@import "colors";
Copy the code

In the example above, the _colors.scss file is actually imported

Note that there can be no files with the same name that are underlined and not underlined at the same time. The files that are underlined will be ignored.

@extend

@extend can borrow CSS rules from one element and reuse them on another.

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}
Copy the code

Write in the last

When using SCSS in a project, it often depends on the environment and can’t be installed. You need to use an older version of SCSS. But Rudy Sass is no longer maintained. See Ruby Sass is no longer maintained

Not only Rudy Sass, but also LibSass is Deprecated. For details, see LibSass is Deprecated.

We no longer recommend LibSass for new Sass projects. Use Dart Sass instead.

LibSass is no longer recommended for new Sass projects. Use Dart Sass instead. (Google Translate smells good)

Those are the official words

The current Dart Sass is fine, and the official recommendation is the Dart Sass.

In addition, the functions of less and SCSS are similar, so you can use them as you like in your project.

Links:

  • Dart Sass
  • Less

If there are any inaccuracies, please let us know in the comments section