Please check the official documentation for authoritative content

1. What is SCSS/SASS

Sass is the earliest CSS preprocessor language and has more power than LESS. At the beginning, the indent syntax was not accepted by developers, so it was not widely used. However, thanks to its powerful functions and the great promotion of Ruby on Rails, it was gradually used by more developers.

Sass is a CSS preprocessor language written in Ruby. It was born in 2007 and is the earliest mature CSS preprocessor language. Originally designed to work with HAML, it has the same indented style as HAML.

Sass, also known as SCSS, started with the third generation, abandoning the indentation style and being fully backward compatible with normal CSS code.

The difference between

  • Different file suffixes, ‘.sass’/’.scss’
  • SASS is written in strict indented syntax, without braces and semicolons; The syntax of SCSS is similar to CSS writing syntax.

2. Use variables

  • Variable declarations

    $highlight-color: #F90;
Copy the code

    The above declares a variable $highlight-color with a value of #F90

  • Variable reference

    $nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

/ / the compiled

nav {
  width: 100px;
  color: #F90;
}
Copy the code

    If $nav-color is defined outside the regular block, all regular blocks in the file can use this variable. $width is defined in the nav rule block, and this variable can only be used in this rule block.

    In fact, and JS global variables and function internal variables are used in the same way.

    At the same time, variables can be declared with values of other variables.

    $highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
Copy the code

  • Variable name compatibility

    Variable names in SCSS are compatible with both underscore and underscore links. Variables declared with underscore can be referenced with underscore, and vice versa.

    $link-color: blue;
a {
  color: $link_color;
}

/ / the compiled

a {
  color: blue;
}
Copy the code

    Successfully referenced $link-color with $link_color.

3. Nested rules

  • Rule blocks nest rules fast

    The desired CSS

    #content article h1 { color: # 333 }
#content article p { margin-bottom: 1.4 em }
#content aside { background-color: #EEE }
Copy the code

    You can see that there is too much repetition in the CSS code above.

    Nested overwrites using SCSS

    #content {
  article {
    h1 { color: # 333 }
    p { margin-bottom: 1.4 em }
  }
  aside { background-color: #EEE}}Copy the code

    It’s actually quite intuitive, and shouldn’t need much explanation…

    In addition, both attributes and rule blocks can exist in the same hierarchy

    #content {
  background-color: #f5f5f5;
  aside { background-color: #eee}}Copy the code

  • The parent selector identifies &

    The previous nesting rules are convenient for implementing descendant selectors, but not feasible in cases where pseudo-classes are required.

    article a {
  color: blue;
  :hover { color: red }
}
Copy the code

    The result of this code is article a :hover. Note that there is a space between a and :hover, which applies not to the a tag itself, but to its descendants.

    Use the parent selector to identify &

    article a {
  color: blue;
  &:hover { color: red }
}
Copy the code

    The compiled result is article a:hover, & replaced directly by the parent selector.

    In addition, additional selectors can be added before &.

    article a {
  color: blue;
  body &:hover { color: red }
}
Copy the code

    The compiled result is body article A :hover.

  • Group selector

    There are two cases:

    • Rules within the block
      .container {
  h1.h2.h3 {margin-bottom:.8em}}Copy the code

      Compile the results

      .container h1..container h2..container h3 { margin-bottom:.8em }
Copy the code
    • Outside the rules of block
      nav.aside {
  a {color: blue}
}
Copy the code

      Compile the results

      nav a.aside a {color: blue}
Copy the code

    Admittedly, group selectors are handy, but you need to be careful when you have a lot of nesting layers.

  • Use subcomposition/same-level composition selectors

    • Subcombination selector >

      A > B: Selects all B elements whose parent is element A

    • Layer adjacent combination selector +

      A + B: Selects all B elements immediately following A

    • The whole combination selector of the same layer ~

      A ~ B: Select each B element after A element

    article{~article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: # 333 }
    dd { color: # 555 }
  }
  nav + & { margin-top: 0}}Copy the code

    Compile the results

    article ~ article { border-top: 1px dashed #ccc }
article > section { background: #eee }
article dl > dt { color: # 333 }
article dl > dd { color: # 555 }
nav + article { margin-top: 0 }
Copy the code

  • Nested properties

    This is an interesting feature, not only CSS selectors, but also properties that can be nested.

    Nested property rules:

    The rules for nested attributes are as follows: break the attribute name from the underscore -, add a colon: after the root attribute, and then a {} block in which the child attribute portion is written. Just like CSS selectors nested, sass undoes your sub-attributes one by one, connecting the root and sub-attributes with a hyphen -.

    Key points: the hyphen is broken and the colon is added after the main attribute:

    For example, many of the attributes related to border conform to the border-* rule. By using attribute nesting, you can reduce the duplication of attribute names.

    nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc; }}Copy the code

    Compile the results

    nav {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}
Copy the code

    Sometimes we use abbreviations of attributes, such as border: 1px solid red. If we use nested attributes with abbreviations, we can use the following form:

    nav {
    border: 1px solid #ccc {
        left: 0px;
        right: 0px; }}Copy the code

    Border is both the property and the main property of the property nesting, which still needs to use the colon:, and the parameter of the property is written after the colon, followed by the rule block of the property nesting.

4. Import the SCSS file

Once you have more SCSS code, you need to modularize it for easier maintenance.

Sass improves the @import rule of CSS:

One particularly uncommon feature of CSS is the @import rule, which allows you to import other CSS files within one CSS file. The consequence, however, is that the browser will only download additional CSS files when @import is executed, which makes the page load very slow. Sass also has an @import rule, but the difference is that sass’s @import rule imports the relevant CSS files when they are generated.

In CSS, @import is imported at execution time, whereas sass is imported when CSS files are generated.

  • SASS local file

    Sass files that are designed to be imported by other files without the need to generate separate CSS files are called local files.

    The file name of a local file starts with an underscore (_). You can omit the underscore (_) at the beginning of the file name when importing the file.

  • Default variable value

    Use! The default label

    Meaning:

    If the variable is declared, use the declared value; otherwise, use the default value.

    Usage Scenarios:

    If you write a sass library file that can be imported by someone else via @import, you might want the importer to customize some values in the sass library file.

    Practical application:

    Assume the contents of the SASS local file:

    $fancybox-width: 400px! default;.fancybox {
    width: $fancybox-width;
}
Copy the code

    $fancybox-width = 400px; $fancybox-width = 400px;

    If we do not want to use the default variable value, we should declare the same variable before importing the sass local file.

    Key:! Default tag, declared before import

  • Nested import

    Unlike native CSS, sass allows the @import command to be written inside CSS rules. In this mode, when the corresponding CSS file is generated, the local file is directly inserted into the place where it is imported in the CSS rule.

    Local file _blue_theme.scss

    aside {
  background: blue;
  color: white;
}
Copy the code

    Master file

    .blue-theme {@import "blue-theme"}
Copy the code

    Equivalent to SCSS below

    .blue-theme {
  aside {
    background: blue;
    color: #fff; }}Copy the code

    Compare this to putting the contents of a local file directly into the import location.

  • Importing native CSS

    Sass is compatible with native CSS and also supports native css@import.

    When using @import, sass will try to find the corresponding Sass file.

    The native css@import is generated in three cases:

    • The name of the imported file ends with.css.
    • The name of the imported file is a URL (such as www.sass.hk/css/css.css) from which the Corresponding service provided by the Google Fonts API is available;
    • The name of the imported file is the URL () value of the CSS.

    That is, if the imported file is the original CSS file, the native css@import is used.

    Solution: Change the original CSS file to the.scss suffix.

    Don’t worry about changing the suffix syntactically, sASS syntax is fully CSS compatible.

5. Silent comments

CSS standard comment format /*… * /

Comments in CSS files are visible to people browsing the site, but sometimes we don’t want to expose them to the outside world, just write them for ourselves.

In this case, you can use sass’s comment syntax, //, silent comment, comment content does not appear in the generated CSS file.

You can use the comment syntax of CSS and SASS in the SCSS file to determine whether different comment contents are displayed in the CSS file.

body {
  color: # 333; // This comment content does not appear in the generated CSS file
  padding: 0; /* This comment content will appear in the generated CSS file */
}
Copy the code

Use // does not appear, use /* */ will appear.

Special circumstances:

When comments appear in places that native CSS does not allow, such as in CSS properties or selectors, SASS will not know how to generate them to the appropriate location in the corresponding CSS file, and they will be erased.

6. Mixer

When we want to use the same attribute value in multiple places, we can use variables; But if we want to use the same code in multiple places, we need to use a mixer.

Large block style reuse via SASS mixers.

  • Mixer use

    • Defined by @mixin

      @mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code

      Defines a mixer named rounded- Corners.

    • Use it via @include

      notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
Copy the code

      The results for

      .notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
Copy the code

      That is, the content of the code introduced directly into the mixer.

  • Selector and identifier in mixer

    The selector can be used in the mixer, as well as the parent selector identifier &

    @mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px; }}Copy the code
    ul.plain {
  color: # 444;
  @include no-bullets;
}
Copy the code

    The results for

    ul.plain {
  color: # 444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}
Copy the code

  • The mixer transmits parameters

    The previous examples reuse code directly from the mixer, but you can use it more flexibly by passing parameters to the mixer.

    The declaration form is very similar to that of a js function.

    Defining mixer

    @mixin link-colors($normal.$hover.$visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }}Copy the code

    $name:value specifies the value to be passed

    a {
  @includelink-colors(blue, red, green); } ora {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}
Copy the code

    The results for

    a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
Copy the code

  • Default Parameter Value

    A parameter can be given a default value in the mixer, which can be not only an attribute value, but also a reference to other parameters.

    @mixin link-colors(
    $normal.$hover: $normal.$visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }}Copy the code

    Call @include link-colors(red)

7. Selector inheritance

Inheritance is a concept familiar to anyone who has worked with object-oriented programming languages.

In SASS, it’s selector inheritance

Selector inheritance means that one selector can inherit all styles defined for another selector.

.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

The results for

.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

The child selector inherits all the styles of the parent selector.