【SCSS入门】3、SCSS的基本语法

【SCSS入门】SCSS的基本语法

系列文章目录

【SCSS入门】1、什么是SCSS？
【SCSS入门】2、安装和配置SCSS环境
【SCSS入门】3、SCSS的基本语法（本文）
【SCSS入门】4、变量的使用
 【SCSS入门】5、嵌套规则
 【SCSS入门】6、部分文件和导入
 【SCSS入门】7、混合宏（Mixins）
【SCSS入门】8、继承（Inheritance）
【SCSS入门】9、运算和函数
 【SCSS入门】10、编译和调试SCSS

在前面的文章中，我们了解了如何安装和配置SCSS环境。本章将深入探讨SCSS的基本语法，帮助你快速上手SCSS编写和使用。

SCSS的基本语法

SCSS是Sass的一种语法扩展，与标准的CSS语法兼容，同时增加了许多强大的特性，使得编写CSS更加高效和灵活。在本章中，我们将介绍SCSS的基本语法，包括变量、嵌套、部分文件和导入、混合宏（Mixins）、继承、运算和函数等。

1. 变量

SCSS允许你使用变量来存储CSS值，如颜色、尺寸、字体等。变量使用 $ 符号定义。

示例：变量定义和使用

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

2. 嵌套规则

SCSS允许你嵌套CSS规则，使样式代码更加简洁和易读，反映HTML结构。

示例：嵌套规则

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

3. 部分文件和导入

SCSS允许你将样式拆分为多个文件，然后通过 @import 语句导入。这使得代码更加模块化和易于维护。

示例：部分文件和导入

创建一个 _variables.scss 文件：

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

在主样式文件 style.scss 中导入部分文件：

@import 'variables';

body {
  font: 100% $font-stack;
  color: $primary-color;
}

4. 混合宏（Mixins）

混合宏允许你定义可复用的样式块，并在需要的地方调用，减少代码重复。

示例：混合宏

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

5. 继承（Inheritance）

SCSS允许你通过 @extend 关键字继承现有的CSS规则，增强样式复用性。

示例：继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }

6. 运算

SCSS支持数学运算，可以在样式中进行加、减、乘、除等操作。

示例：运算

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

7. 函数

SCSS提供了许多内置函数，如颜色函数、字符串函数、列表函数等。同时，你也可以定义自定义函数。

示例：内置函数

$color: #036;

.button {
  background-color: lighten($color, 20%);
  color: darken($color, 20%);
}

示例：自定义函数

@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

.container {
  font-size: px-to-rem(18px);
}

一个完整的示例

为了更好地理解上述语法，我们来看一个完整的SCSS示例，展示如何使用变量、嵌套、部分文件和导入、混合宏、继承、运算和函数来编写样式。

项目结构

scss/
├── _mixins.scss
├── _variables.scss
└── style.scss

`_variables.scss`

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

`_mixins.scss`

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

`style.scss`

@import 'variables';
@import 'mixins';

body {
  font: 100% $font-stack;
  color: $primary-color;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: $primary-color;
}

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }

.box {
  @include border-radius(10px);
  @include box-shadow(0 0 5px rgba(0, 0, 0, 0.3));
}

.container {
  width: 100%;
  article[role="main"] {
    float: left;
    width: 600px / 960px * 100%;
  }

  aside[role="complementary"] {
    float: right;
    width: 300px / 960px * 100%;
  }
}

编译SCSS

在项目目录下运行以下命令，将SCSS文件编译为CSS文件：

sass scss/style.scss css/style.css

生成的 style.css 文件内容如下：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

.box {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
      -ms-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.container {
  width: 100%;
}

.container article[role="main"] {
  float: left;
  width: 62.5%;
}

.container aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

结论

通过本文的讲解，你应该已经掌握了SCSS的基本语法。我们详细介绍了SCSS中的变量、嵌套规则、部分文件和导入、混合宏、继承、运算和函数等特性，帮助你编写更加简洁、高效和可维护的样式代码。

这些就是关于【SCSS入门】SCSS的基本语法的详细介绍。
这里是爪磕，感谢您的到来与关注，我们将持续为您带来优质的文章。