SCSS基础学习：从初学者到熟练掌握

1. SCSS基础

SCSS(Sassy CSS)是一种CSS预处理器，它允许你使用变量、运算、函数和其他功能来创建更简洁、更易维护的样式表。SCSS语法与CSS相似，但增加了许多新特性，使其更强大、更灵活。

1.1 变量

SCSS变量允许你存储值，并在样式表中多次使用。这可以使你的样式表更易于阅读和维护，特别是当你有许多重复的值时。

要创建变量，你只需使用$符号，后跟变量名。例如：

$primary-color: #ff0000;

现在，你可以在样式表中使用$primary-color变量来代替#ff0000。例如：

body {
  background-color: $primary-color;
}

1.2 运算

SCSS支持多种运算，包括加(+)、减(-)、乘(*)、除(/)和取模(%)。

例如，要将$primary-color变量的值加10%，你可以使用以下代码：

$primary-color-light: $primary-color + 10%;

现在，你可以在样式表中使用$primary-color-light变量来代替#ff3333。

1.3 mixin

SCSS mixin允许你将一组CSS规则保存为一个可重用的单元，然后在样式表中多次使用。这可以使你的样式表更简洁、更易于维护，特别是当你有许多重复的规则时。

要创建mixin，你只需使用@mixin，后跟mixin名。例如：

@mixin button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  color: #333;
  text-align: center;
  text-decoration: none;
}

现在，你可以在样式表中使用@include关键字来调用mixin。例如：

.btn-primary {
  @include button;
  background-color: $primary-color;
  color: #fff;
}

1.4 函数

SCSS函数允许你执行各种计算，并在样式表中使用结果。

例如，要计算$primary-color变量的饱和度，你可以使用以下代码：

$primary-color-saturation: saturate($primary-color, 20%);

现在，你可以在样式表中使用$primary-color-saturation变量来代替#ff6666。

2. SCSS高级技巧

2.1 继承

SCSS支持继承，允许你从父元素继承样式。

例如，要将父元素的字体大小继承到子元素，你可以使用以下代码：

.child {
  font-size: inherit;
}

2.2 嵌套

SCSS支持嵌套，允许你在父元素的内部定义子元素的样式。

例如，要将.btn-primary按钮的样式嵌套在.btn类中，你可以使用以下代码：

.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;

  &.btn-primary {
    background-color: $primary-color;
    color: #fff;
  }
}

2.3 @extend

SCSS的@extend关键字允许你从一个选择器继承所有样式。

例如，要将.btn-primary按钮的样式继承到.btn-success按钮，你可以使用以下代码：

.btn-success {
  @extend .btn-primary;
  background-color: #008000;
}

2.4 @media

SCSS的@media规则允许你在不同的媒体类型上应用不同的样式。

例如，要为屏幕宽度小于768px的设备应用不同的样式，你可以使用以下代码：

@media screen and (max-width: 768px) {
  .btn {
    font-size: 14px;
  }
}

2.5 @import

SCSS的@import规则允许你将其他SCSS文件导入到当前文件中。

例如，要将_variables.scss文件导入到当前文件中，你可以使用以下代码：

@import "variables.scss";

现在，你可以在当前文件中使用_variables.scss文件中定义的变量。