scss concept and use

SCSS (Sassy CSS) is a preprocessor language for CSS. It provides more functions and flexibility based on CSS, making the writing and management of style sheets more efficient and convenient.

Here are some advantages of SCSS:

Variables: SCSS allows you to use variables to store values such as color and font size, making it more convenient and maintainable to adjust these values uniformly throughout the style sheet.
Nested Rules: You can use nested rules in SCSS to organize styles, making the code structure clearer. For example, you can write the pseudo-class style of an element in the style block of its parent element instead of writing it in multiple places.
Mixins: Mixins are a way to combine a set of style properties into a reusable block. This avoids writing the same style code repeatedly, improving code reusability and readability.
Inline Imports: You can combine multiple SCSS files into one file through the @import rule. This helps to split the stylesheet into logical units and can be flexibly organized and managed as needed.
Inheritance (Extend): SCSS supports style inheritance through the @extend keyword, which can make the style sheet more modular and maintainable.
Operations: SCSS allows mathematical operations such as addition, subtraction, multiplication and division to be performed in style sheets, which is very helpful for handling calculations of some dynamic styles.
Modularity: The characteristics of SCSS make style sheets more modular and structured, which can better manage and maintain styles, especially in large projects.

In summary, SCSS not only retains all the functions of CSS, but also introduces advanced features such as variables, nesting, mixing, and importing. These features enable developers to write and manage style sheets more efficiently. It is one of the commonly used tools in modern front-end development.

Comparison between scss and css

grammar:

CSS: Basic Cascading Style Sheets syntax, rules are defined through selectors, properties, and values.
SCSS: SCSS is a preprocessor language for CSS that provides more features and syntax, such as variables, nested rules, mixins, imports, etc., which make style sheet writing more flexible and efficient.

Readability and maintainability:

CSS: In larger projects, CSS files can become very lengthy and difficult to maintain due to the lack of structure and modularity.
SCSS: SCSS supports variables and nested rules, which make the code more readable and maintainable. By using variables and mixins, you can reduce the writing of repeated code, and nested rules can more clearly express the hierarchical relationship of the HTML structure.

Function extension:

CSS: Standard CSS can only do basic style definition and selector matching.
SCSS: SCSS introduces advanced features such as mixing, inheritance, and calculations. These features make style sheets more flexible and powerful, and can better cope with complex style requirements.

compatibility:

CSS: CSS is supported directly by browsers, without the need for an additional compilation step.
SCSS: SCSS needs to be converted into a normal CSS file through a compiler before it can be understood and applied by the browser.

learning curve:

CSS: Learning CSS is relatively simple, you just need to understand the basic combination of selectors, properties and values.
SCSS: Learning SCSS requires mastering its unique syntax and functions, such as variables, mixins, nesting, etc., which requires a certain learning and adaptation process.

In summary, SCSS provides more tools and features to simplify the writing and maintenance of style sheets than ordinary CSS, and is especially suitable for the development of large and complex projects. However, for small projects or simple style requirements, ordinary CSS may be more direct and convenient.

Use of scss

Before learning scss, install two plug-ins in vscode to convert scss into ordinary CSS files for subsequent learning!

Search for sass in the plugin store, download the following two plugins and restart vscode!

Declaring variables

Declaring variables in SCSS is very simple. You can use the $ symbol to define a variable.

Here is a simple example showing how to declare and use variables in SCSS:


// 定义变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

In the example above, we define two variables, $primary-color and $secondary-color, to store the primary and secondary colors respectively. We can then use these variables in style rules to keep the colors consistent and easy to modify throughout the stylesheet.

When a SCSS file is compiled into a regular CSS file, all variables will be replaced with their corresponding values, so the final generated CSS file will not contain any variable declarations.

Distinguishing default variables

In SCSS, you can use default variables to ensure that a variable has a fallback value when it is not defined. This is particularly useful when dealing with theming or configuring styles.

Here is an example of how to declare and use a default variable:


// 声明变量，并设置默认值
$primary-color: #3498db !default;
$secondary-color: #2ecc71 !default;
 
// 使用变量
body {
  background-color: $primary-color;
}
 
a {
  color: $secondary-color;
}

In the example above, we have used the !default tag to define default values. This means that if $primary-color or $secondary-color are not defined elsewhere before the SCSS file is included, they will use the specified default values (#3498db and #2ecc71). If these variables have been defined before the file is included, the default values will be ignored.

The benefit of using default variables is that it allows you to provide alternate values for variables without overwriting defined variables. This is particularly useful for creating themes or sharing variables across multiple style files.

Distinguish between global variables and local variables

Global variables: Global variables are variables declared outside a selector or outside a mixin/function. They are accessible throughout the stylesheet, and if the same global variable is defined in multiple files, their values will remain consistent.
Local variables: Local variables are variables defined inside a selector or inside a mixin/function. They can only be used within the scope in which they are defined and are no longer valid after leaving that scope.

Note: Local variables override global variables

When you redeclare a variable in a local scope with the same name as a global variable, the local variable overrides the value of the global variable. This allows defining different variable values for specific selectors or mixins without affecting the global scope.

Use the !global keyword to make a local variable a global variable.

SCSS provides the !global keyword, which allows you to explicitly declare a local variable as a global variable. This causes the value of the local variable to be promoted to the global scope where it is declared, overwriting any existing global variable with the same name.

Example:


// 全局变量
$primary-color: #3498db;
 
.button {
  // 局部变量，覆盖全局变量
  $primary-color: #cc582e;
  background-color: $primary-color; // 使用局部变量值
}
 
// 使用 !global 将局部变量变为全局变量
$primary-color: #cddb34;
 
.button {
  // 使用 !global 将局部变量变为全局变量
  $primary-color: #2ecc71 !global;
}
 
body {
  background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
}

In the first example, the local variable $primary-color inside the .button selector overwrites the value of the global variable. In the second example, by using the !global keyword, the local variable inside the .button selector is turned into a global variable, thus affecting the variable value in the global scope.

Nested syntax

Selector nesting

Basic nesting

Selector nesting allows you to nest style rules for child selectors inside parent selectors, for example:


// SCSS代码
.navbar {
  background-color: #333;
  padding: 10px;
 
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
 
    li {
      display: inline-block;
      margin-right: 10px;
 
      a {
        text-decoration: none;
        color: #fff;
 
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

In the above code, the .navbar selector contains a nested ul, li, and a child selector. This nested structure makes the style rules clearer and easier to manage.

Nested parent selector references (&)

In SCSS, the & symbol is used to reference the parent selector, which is especially useful in the case of pseudo-classes or pseudo-elements. For example, use &:hover to reference the parent selector of the current selector and add the :hover state style.


.button {
  background-color: #3498db;
  color: #fff;
  padding: 8px 16px;
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
 
  &:hover {
    background-color: #2980b9;
  }
}

Nesting considerations

Selector depth: Avoid deep selector nesting, as it may increase style specificity, leading to style overrides and maintenance difficulties.
Readability: When using nested selectors, be careful to keep the code readable and clear, and avoid overly complex nested structures.
Performance: Nested structures may increase the size of the generated CSS file, but can usually be optimized through proper organization and writing of styles.

Nested nesting

SCSS allows multiple levels of selector nesting, for example:


.container {
  .row {
    .col {
      width: 100%;
    }
  }
}

Nested attributes

In SCSS, in addition to selector nesting, there is also the feature of attribute nesting, which is another feature that makes style sheets neater and easier to manage. Attribute nesting allows related properties to be organized together, similar to the form of an object.

Basic attribute nesting

Property nesting can be used to put related properties in a code block, for example:


.navbar {
  font: {
    family: Arial, sans-serif;
    size: 16px;
    weight: bold;
  }
  margin: {
    top: 10px;
    bottom: 15px;
  }
  padding: {
    left: 20px;
    right: 20px;
  }
}

In the above example, font, margin, and padding blocks contain related properties. This organization makes the properties in each block clearer and easier to modify and maintain.

Nesting considerations

Supported properties: Not all CSS properties support nesting, usually those that can accept key-value pairs, such as font, margin, padding, border, etc.
Readability: When using attribute nesting, ensure the readability and clarity of the code, and avoid excessive nesting and complex structures.
Nested properties: You can also nest other properties within nested properties to further organize and structure your styles.

inherit

In SCSS, inheritance is a very useful feature that allows one selector to inherit the style rules of another selector. This feature can reduce repeated CSS code and make the style sheet more modular and easier to maintain.

Basic Usage

Use the @extend keyword to implement selector inheritance. For example:


%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success-message {
  @extend %message-shared;
  background-color: lightgreen;
}
 
.error-message {
  @extend %message-shared;
  background-color: lightcoral;
}

In the example above, %message-shared is a placeholder selector that defines a set of common styles. .success-message and .error-message inherit the styles of %message-shared and add their own background colors.

Inheritance considerations

Selector order: Inheritance can generate a long list of selectors, which may affect the precedence of styles. Make sure that when using @extend, the order and position of the selectors are correct to avoid unnecessary precedence issues.
Restriction: The inherited selector must appear after the inherited selector. This means that if you define a selector in your SCSS file and use @extend to inherit its style in subsequent code, this inheritance will only take effect after the definition.
Placeholder selectors vs class selectors: Placeholder selectors starting with % are usually better suited for inheritance than direct class selectors because they do not generate redundant selectors after compilation. Class selectors generate duplicate styles in every place where they are used, increasing file size and complexity.

Application Scenario

Inheritance is particularly suitable for selectors with common characteristics, such as button components, message prompt boxes, etc. Through inheritance, the same style rules can be reused in different scenarios while keeping the code clean and maintainable.

In summary, inheritance in SCSS is a powerful tool that can help you avoid style duplication and keep your code modular and clear, but you need to pay attention to the order and position of selectors when using it, and use placeholder selectors reasonably to maximize its effect.

Placeholder%

The placeholder % is a special selector in SCSS, which is usually used to define style rules that can be inherited but will not generate actual CSS output. Specifically:

Defining placeholders


%placeholder-selector {
  // 样式规则
}

In the above example, %placeholder-selector is a placeholder selector that starts with %. It defines a set of style rules, but the corresponding selector name does not appear in the compiled CSS.

Inheritance Placeholder


.some-class {
  @extend %placeholder-selector;
  // 可选的额外样式
}

Using the @extend keyword allows .some-class to inherit the styles of %placeholder-selector. This means that .some-class will apply all the style rules defined in %placeholder-selector and generate the corresponding CSS output.

Advantages and applicable scenarios

Reduce duplication: Placeholder selectors make it possible to define a common set of style rules and reuse them via inheritance when needed, avoiding code duplication.
Modularity: Placeholder selectors help with code modularity and maintainability, especially in larger projects, by improving the structure of your stylesheets.
Avoid redundancy: Compared to using class selectors, placeholder selectors do not generate redundant selectors, thereby reducing the size of CSS files.

Precautions

Order and position: When using @extend to inherit a placeholder selector, the inherited placeholder selector must be defined before the selector that uses it, otherwise it may cause unexpected style hierarchy problems.
Mixing: You can use placeholder selectors in combination with regular class selectors, but be careful to avoid unexpected CSS output.

In summary, the placeholder selector % is a powerful tool in SCSS that can help developers improve the reusability and maintainability of style sheets while reducing unnecessary CSS redundancy.

@mixin

In SCSS, mixins are another very powerful feature that allows a set of style rules to be encapsulated in a reusable code block and then referenced where needed. Unlike placeholder selectors, mixins can directly generate CSS output, so it is suitable for situations where the same style needs to be used in multiple places.

Defining Mixture


@mixin mixin-name($parameter1, $parameter2, ...) {
  // 样式规则使用参数
}

In the example above, the @mixin keyword defines a mixin called mixin-name, which can accept multiple arguments (if required) and defines a set of style rules within it.

Call Mix


.some-class {
  @include mixin-name(value1, value2, ...);
  // 可选的额外样式
}

Using the @include keyword, you can call a mixin in a selector and pass it arguments. This way, .some-class will apply the style rules defined in the mixin and apply the passed argument values to the corresponding argument variables.

example


@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: $background-color;
  color: $text-color;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
 
  &:hover {
    background-color: darken($background-color, 10%);
  }
}
.button-primary {
  @include button-style(#3498db, #fff);
}
 
.button-secondary {
  @include button-style(#2ecc71, #fff);
}

Advantages and applicable scenarios

Flexibility: Mixins allow passing parameters, which can dynamically generate different style outputs as needed, making the style more flexible and customizable.
Readability: Encapsulating commonly used style rules in mixins can improve the readability and maintainability of your code, especially when the same styles are needed in multiple places.
Reusability: The same mixin can be called multiple times in different selectors and files to avoid repeated definition of styles and reduce the amount of code.

Precautions

Naming conflicts: Make sure mixin names do not conflict with existing CSS class names or other mixin names to avoid accidental style overrides or errors.
Parameter passing: When calling a mixin, ensure that the parameter types and order passed are consistent with the requirements of the mixin definition to avoid compilation errors or unexpected behavior.
Performance impact: Extensive use of mixins may increase the size of the generated CSS file, so be careful when considering its impact on performance.

In summary, @mixin is a powerful tool for encapsulating and reusing style rules in SCSS. It can significantly improve the maintainability and flexibility of CSS and is suitable for various complex and repetitive style requirements.

Using Conditional Statements in SCSS

In SCSS, conditional statements allow CSS styles to be generated dynamically based on certain conditions. SCSS conditional statements are similar to conditional statements in other programming languages, including @if, @else if, and @else.

@if Statement

The @if statement allows you to generate styles based on a condition. The syntax is as follows:


$use-rounded-corners: true;
 
.button {
  @if $use-rounded-corners {
    border-radius: 4px;
  }
}

In the above example, if the value of the $use-rounded-corners variable is true, the style of the .button class is generated, including border-radius: 4px;. If the condition is false, this part of the style is not generated.

@else and @else if statements

In addition to @if, you can also use @else if and @else to add more conditional branches.


$button-size: medium;
 
.button {
  @if $button-size == small {
    padding: 5px 10px;
  } @else if $button-size == medium {
    padding: 10px 25px;
  } @else if $button-size == large {
    padding: 15px 30px;
  } @else {
    padding: 10px 20px; // 默认值
  }
}

In this example, depending on the value of the $button-size variable, different padding values are selected and applied to the .button class. If no condition matches, the code block in @else is executed.

Nesting of conditional statements

Conditional statements can also be nested to handle more complex logic.


$button-style: flat;
$button-size: medium;
 
.button {
  @if $button-style == flat {
    background-color: transparent;
    color: #333;
    border: 1px solid #333;
 
    @if $button-size == small {
      padding: 5px 10px;
    } @else if $button-size == medium {
      padding: 10px 25px;
    } @else if $button-size == large {
      padding: 15px 30px;
    } @else {
      padding: 10px 20px; // 默认值
    }
  } @else if $button-style == raised {
    background-color: #3498db;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
  } @else {
    // 默认样式
    background-color: #db6334;
    color: #fff;
    padding: 10px 20px;
  }
}

In this example, different styles are applied depending on the values of $button-style and $button-size. This nested approach allows complex style rules to be generated based on multiple conditions.

in conclusion

By using conditional statements, more flexible and dynamic style definitions can be implemented in SCSS, and different CSS rules can be generated according to different conditions, thereby improving the maintainability and extensibility of the style sheet.

Three types of loops in SCSS

In SCSS, there are three main loop structures that can be used to generate repeated CSS rules: @for, @each, and @while.

@for loop

@for loop is used to repeatedly generate patterns according to certain steps and conditions.

Basic syntax：


@for $i from <start> through <end> {
  // 循环体
}

from<start> through<end> : Specifies the start and end values of the loop (including the end value).
The $i variable can be used in the loop body to represent the index value of the current loop.

Example：


@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

In the above example, three classes .item-1, .item-2, and .item-3 are generated, setting the width to 100px, 200px, and 300px respectively.

@each loop

The @each loop is used to traverse list or map type data and generate styles for each element.

Basic syntax：


@each $var in <list or map> {
  // 循环体
}

$var: represents the variable of the current loop.
<list or map>: It can be a list (such as $list: item1, item2, item3;) or a map (key-value pairs).

Example：


$colors: (red, green, blue);
 
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}

In this example, three classes .text-red, .text-green, and .text-blue are generated, and their text colors are set to the corresponding color values.

@while loop

The @while loop repeatedly generates styles based on a condition until the condition is no longer met.

Basic syntax：


$i: 1;
@while $i < 4 {
  // 循环体
  $i: $i + 1; // 更新条件
}

$i: As a loop counter or condition variable.
Any SCSS code can be executed in the loop body. Usually, the conditional variable needs to be updated at the end of the loop body to avoid infinite loops.

Example：


$i: 1;
@while $i < 4 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

This code generates three classes .item-1, .item-2, and .item-3, setting their widths to 100px, 200px, and 300px respectively.

Summarize

SCSS's three loop structures, @for, @each, and @while, are used to loop by index, traverse lists or map-type data, and generate styles based on conditional loops. These loop structures make SCSS more powerful and flexible, and can generate complex CSS rules as needed.

Custom functions and their use

In SCSS, you can enhance the functionality of your stylesheets using custom functions that accept parameters and return processed values.

Defining custom functions

In SCSS, use the @function keyword to define a function, which can have parameters and return values. For example, we define a function to calculate the total width of an element's box model:


@function total-width($padding, $border, $margin, $content-width) {
  @return $padding + $border + $margin + $content-width;
}

In the example above:

total-width is the name of the function.
The function accepts four parameters: $padding, $border, $margin, $content-width.
The @return statement is used to return a calculated value.

Using custom functions

Once a function is defined, it can be used in styles to calculate and generate values as needed. For example:


.element {
  width: total-width(10px, 1px, 5px, 100px);
}

In this example, the total-width function will be called with the arguments 10px, 1px, 5px, and 100px. The result returned by the function (116px) will be applied to the width property of .element.

Precautions

Functions can be included in any SCSS file and can be organized and imported like other style rules.
All SCSS features can be used in functions, such as control statements (such as @if, @for, @each, @while) and built-in functions.
The function's parameters can be any SCSS data type, including numbers, strings, colors, etc.

Homework

Use SCSS to switch between black and white themes on the page

html


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="main.css">
  <title>黑白色主题切换</title>
</head>
<body>
  <div class="container">
    <button id="theme-toggle">切换主题</button>
    <div class="box">
      <div class="content">
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
        <p>这是一些文本内容。</p>
      </div>
    </div>
  </div>
 
  <script src="main.js"></script>
</body>
</html>

scss


// 定义轻主题的样式变量
$light-theme: (
  background-color: white,
  text-color: black,
  highlight-color: #f0f0f0
);
 
// 定义暗主题的样式变量
$dark-theme: (
  background-color: black,
  text-color: white,
  highlight-color: #333333
);
 
// 定义一个混合（mixin）来应用主题样式
// 参数 $theme: 要应用的主题，是一个包含背景色、文本颜色和高亮颜色的映射（map）
@mixin theme($theme) {
  background-color: map-get($theme, background-color);
  color: map-get($theme, text-color);
 
  // 为 .box 类应用主题的高亮颜色
  .box {
    background-color: map-get($theme, highlight-color);
  }
}
 
// 应用轻主题样式到 body 元素，并添加过渡效果
body {
  @include theme($light-theme);
  transition: all 0.3s ease;
}
 
// 为 body 的 dark 类应用暗主题样式
body.dark {
  @include theme($dark-theme);
}
 
// 设置容器的文本居中和顶部间距
.container {
  text-align: center;
  margin-top: 20px;
}
 
// 配置主题切换按钮的样式
#theme-toggle {
  padding: 10px 20px;
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border-radius: 5px;
}
 
// 鼠标悬停在主题切换按钮上时改变背景色
#theme-toggle:hover {
  background-color: #0056b3;
}
 
// 定义 .box 类的基本样式和过渡效果
.box {
  margin: 20px auto;
  padding: 20px;
  width: 50%;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
 
  // 内容区域的样式配置
  .content {
    p {
      margin: 10px 0;
    }
  }
}


/**
 * 为主题切换按钮添加点击事件监听器
 * 当按钮被点击时，切换文档主体的黑暗主题样式
 * 
 * 该函数通过toggle方法动态切换body元素的'dark'类，从而实现主题的切换。
 * 如果body已经应用了'dark'类，那么点击按钮将移除这个类，反之亦然。
 * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
 */
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.body.classList.toggle('dark');
});

Technology Sharing