SASS study notes

SASS study notes

A total of two practice projects will be written, the finished product can be seen at https://goldenaarcher.com/scss-study , and the code is at https://github.com/GoldenaArcher/scss-study .

What is SASS

SASS is CSS preprocessing, which provides variables (although CSS is also provided now, but SASS is more flexible), nesting, mixin, function, import and extension, etc., which can efficiently reuse code. SASS includes SASS and SCSS, both of which support nesting, mixin and variables, the main differences are:

• grammar

  The syntax of SCSS is closer to CSS, while SASS does not apply {}and ;, and relies on indentation to define the structure (somewhat similar to python)

  Therefore, the typesetting of SASS must be more concise and beautiful. Relatively speaking, it may not be suitable for those who just switched from CSS to SASS

• compatibility

  SCSS is closer to the syntax of CSS, so the compatibility is relatively better, and it is more suitable as a transition from CSS to SASS. Of course, for not very complex projects, using SCSS itself is enough

  The support of SASS is relatively stronger, but because of compatibility and syntax issues, the popularity is relatively low

• learning curve

  SASS is higher than SCSS

This note is mainly about learning SCSS.

Base

configuration

As the preprocessing of CSS, SASS cannot be run directly in the browser, so you need to download the corresponding package to convert the written SASS into CSS so that the browser can parse it.

Compilation can be done through an editor, or by using node dependencies, the latter is used here, the way is to download sass, and package.jsonadd the following code in :

{
    
    
  "scripts": {
    
    
    "watch": "sass scss/:css/ -w"
  }
}

In this way, the content in the folder sasswill scssbe compiled and saved cssin the folder. -wThe flag of ’ represents the monitoring status. It will monitor the changes in the scss folder and recompile.

The overall structure of the project is roughly as follows:

In sassaddition to , there are more notorious ones node-sass. Although node-sassis still being maintained, and currently supports node20, and the regular SCSS functions can be compiled, but node-sassthe compatibility is really problematic... Anyway, I am in I have a lot of problems trying to run node-sass on Windows.

Another SASS configuration method has cv in sass simple configuration , which uses more packages, and I haven't seen much about what it does specifically, but if you want a more complete project configuration, you can take a look at this.

variable

The variables of scss $start with . I think the current CSS support for variables is quite good, but considering compatibility issues, it will be more convenient to use SCSS uniformly. The specific usage methods are as follows:

// 定义
$color-dark: #262626;
$color-black: #000;
$color-primary: #d3ab55;
$color-secondary: #bbb;
$color-white: #fff;

$font-dancingScript: 'Dancing Script', cursive;
$font-josefinSans: 'Josefin Sans', sans-serif;
$font-nunito: 'Nunito', sans-serif;

// 使用
body {
  // local scope也可以重写变量
  // 想要在本地重写global变量可以使用下面的语法：
  // $color-white: #eee !global;
  background-color: $color-dark;
}

It compiles as follows:

body {
    
    
  background-color: #262626;
}

You can see $color-darkthat has been compiled instead of using variables directly, so if you want compatibility with older browsers, it will be more convenient to use SCSS variables.

For theme colors (primary, secondary, warning, success), font size, and breakpoint, it is generally recommended to use globally defined variables. In project 1 of the hand practice, variables are used to define the color and font, but the media query does not, probably because of the feeling while writing...?

nesting

Nesting is a point that I find very convenient to use SCSS, such as the following HTML structure:

<nav class="navbar">
  <input type="checkbox" name="check" id="check" class="checkbox" hidden />
  <div class="hamburger-menu">
    <label for="check" class="menu">
      <div class="menu-line menu-line-1"></div>
      <div class="menu-line menu-line-2"></div>
      <div class="menu-line menu-line-3"></div>
    </label>
  </div>
</nav>

To select navbar > hamburger > menu, and apply styles individually, CSS is written as:

.navbar {
    
    
}

.navbar .hamburger {
    
    
}

.navbar .hamburger .menu {
    
    
}

@media (max-width: 760px) {
    
    
  .navbar .hamburger {
    
    
  }

  .navbar .hamburger .menu {
    
    
  }
}

SCSS is written as:

.navbar {
  .hamburger {
    @media (max-width: 760px) {
    }

    .menu {
      @media (max-width: 760px) {
      }
    }
  }
}

I personally prefer this nested writing method, especially when some styles rely on selecting multiple class selectors to increase the weight of overriding styles, which can indeed save some code. The media query is also nested here, and it is more convenient to find the implementation code of responsive.

extend

extend is a relatively powerful method, and its implementation and usage are as follows:

.full-space {
  width: 100%;
  height: 100%;
}

.header {
  @extend .full-space;
}

The compiled result is:

.full-space,
.header {
    
    
  width: 100%;
  height: 100%;
}

If there are multiple styles that extend the same style, SCSS will also pack them together instead of repeating the CSS, such as:

.full-space {
  width: 100%;
  height: 100%;
}

.header {
  @extend .full-space;
}

.footer {
  @extend .full-space;
}

Corresponding CSS:

.full-space,
.header,
.footer {
    
    
  width: 100%;
  height: 100%;
}

mixin

Mixins are another powerful part of SCSS, which can be used as follows:

@mixin textStyles($transform: uppercase) {
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: $transform;
}

.main-name {
  font-family: $font-nunito;
  font-size: 50px;
  color: $color-secondary;
  @include textStyles;
}

The compiled result is:

.main-name {
    
    
  font-family: 'Nunito', sans-serif;
  font-size: 50px;
  color: #bbb;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}

There are two biggest differences with extend:

1. mixins can accept arguments
2. mixin will add the defined styles to the current selector

In general, if the code of a style is fixed and will not change, and you want to reduce the size of CSS, then you can use extend. On the contrary, if you want a more dynamic code and need to rely on incoming variables to modify, you can use mixin. Another case that is more suitable for using mixin is transition. Generally, the duration, application style and delay are not the same. At this time, mixin can be used to reduce the amount of code during programming.

When mixin provides a default value, it is optional to pass no value. If no value is passed, SCSS will use the default value. If you don't provide a default value, it seems that you will report an error...

function

function can implement some calculations, such as:

@function fontSize($size: 12px) {
  @return $size * 2;
}

For some small projects, the use of function may not be very convenient, but for some large projects, especially the margin and padding have defined responsive projects, using function will be much more convenient.

SCSS also has some preset functions, such as colors darken, lightednnumbers, etc. percent, and mathematics min, maxetc., for development.

placeholder selector

Using extendwill create an empty class, using placeholder selector can solve this problem, the usage is as follows:

%full-space {
  width: 100%;
  height: 100%;
}

.header {
  @extend %full-space;
}

.footer {
  @extend %full-space;
}

Corresponding CSS:

.header,
.footer {
    
    
  width: 100%;
  height: 100%;
}

import & partials

partial means that the SCSS file name is named using _the naming convention as a prefix, for example _base.scss, so that SCSS will not generate an extra _base.scssfile. Then use importthe keyword main.scssto import the corresponding package in , and _base.scssthe style of can be added to main.scss, such as:

• _base.scss

  $color-dark: #262626;
  $color-black: #000;
  $color-primary: #d3ab55;
  $color-secondary: #bbb;
  $color-white: #fff;
  
  $font-dancingScript: 'Dancing Script', cursive;
  $font-josefinSans: 'Josefin Sans', sans-serif;
  $font-nunito: 'Nunito', sans-serif;
  

• main.scss

  @import 'base';
  @import 'layout';
  @import 'components';
  

Because baseis imported first, layoutand componentcan also use basevariable names defined in .

Some fun CSS tricks

use checkboxes

The checkbox itself can use HTML5 , and at the same time use the selector, so that the event hiddencan be completed without JSonclick

hamburger icon

This has two special effects when clicked:

The first 90-degree flip is easier to understand, and the second is also implemented with CSS. Simply put, it is to set the transparency of the middle line to 0, and at the same time, the left and right lines are rotated by a certain angle from the left to the right according to the z-axis. , to obtain the following arrow shape:

Then transform-origin: right;use it together.

This usage is really clever.