CSS 中的 SASS

2025年03月17日 | 阅读 9 分钟

引言

它是 CSS 中的一种预处理器。我们可以在编译和精炼网页上的所有元素之前，在高级 CSS 中使用此语法。借助 SASS，我们可以使编码过程更简单、更高效。

什么是 CSS 预处理器？

在 CSS 中，预处理器是一种编译器，通过它可以从独特语法编译 CSS 代码。这意味着我们可以借助预处理器的语法编写代码。我们还可以通过将 HTML 文件链接到 CSS 文件来生成用于样式化网页的 CSS 代码。

要实现 CSS 中的预处理器，我们需要学习一些新语言。我们可以像编写 CSS 代码一样编写 SASS 代码。借助预处理器，我们还可以做更多事情。此外，我们可以借助预处理器创建变量，并在代码中重复使用该变量。此外，我们还需要在代码中启用省略花括号和分号。我们可以用一个简洁的总结来简化整个代码。CSS 中有几种预处理器；借助 SASS，我们还可以增加 Web 开发的主流。

什么是 SASS CSS？

SASS 是 Syntactically Awesome Style Sheets（语法极其出色的样式表）的缩写。它也是 CSS 中一种流行的预处理器。我们可以借助程序来处理 SASS 代码。我们也可以在 CSS 代码中控制 SASS 代码。它也支持 CSS 代码中的所有元素。它还提供了一些额外的功能，如变量、嵌套、导入等。

变量语法

$primary-color: #3498db;
$font-size: 16px;

.header {
  background-color: $primary-color;
  font-size: $font-size;
}

嵌套语法

.navigation {
  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

SASS 的特性和概念

SASS 中存在一些特性和关键概念。它们如下。

变量

借助变量，我们可以存储值并在 CSS 中重复使用这些值，SASS 允许这样做。此外，借助变量，我们可以在通过在一个地方更改值来更新整个样式表中的值。

嵌套

在 SASS 中，我们可以在一个 CSS 规则内以分层顺序编写另一个 CSS 规则。这样做可以提高代码的可读性。

Mixins

在 CSS 的声明中，这些是可重用的组。在复杂的样式场景中它们非常有用。

函数

SASS 支持自定义函数。这些自定义函数用于计算工作表中存在的值。

分部和导入

当我们把一个大文件拆分成小的样式文件时，这些小文件被称为分部。然后，我们将这些小的分部导入到主 SASS 文件中。这样做，我们可以组织代码并保持我们的代码库的模块化。

扩展/继承

在 SASS 中，我们可以创建可以扩展其他选择器的占位符。这样做可以减少代码重复。

控制指令

Sass 提供了 @if、@for 和 @each 等控制指令，允许您创建更动态、更灵活的样式表。

运算符

Sass 支持各种算术和逻辑运算符，使您能够在样式中执行计算。

SASS CSS 如何工作？

SASS CSS 的工作方式是特定的。首先，我们必须用 SASS 语言编写完整的代码。然后，我们必须将整个 SAAS 代码编译成 CSS 代码。然后，我们必须将该 CSS 文件链接到 HTML 文件。为了完成所有这些步骤，我们需要三个文件。这三个文件是 HTML、SASS 文件和 CSS 文件。

为什么要使用 SASS CSS？

现在，我们需要知道在编写 CSS 代码时为什么要使用 SASS。在 CSS 代码中实现 SASS 有一些原因。这些原因如下。

组织性

与 CSS 代码相比，SASS 使代码更加有组织。这意味着我们必须用更少的代码执行许多操作。这对于大型项目非常重要，可以帮助许多开发人员。用 CSS 代码编写的代码提供了由其他人编写和执行的有组织的样式。

易于学习

学习 SASS 代码所需时间更少。首先，我们必须学习 CSS；然后，很容易学习 SASS，而无需花费太多时间。

可重用性

SASS 提供了可重用编程代码的功能，而 CSS 缺乏此功能。我们可以在 SASS 代码中使用 CSS 中没有的变量。我们还可以利用代码块在整个代码中使用。借助 SASS，我们可以减少出错的可能性。我们还可以对代码进行微小更改，并且这些更改将在整个程序中实现。

用于使用 SASS CSS 的 HTML 代码：示例

现在，我们对 SASS 有了基本的了解。让我们通过以下示例来理解它。

示例 1

HTML 代码

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="mystyle.css">
   
<title>Simplilearn Example</title>
</head>
<body>
    <div id="box1">
       
<h1>Hello, Welcome to Simplilearn!</h1>
        <p>Here, you will learn about CSS and SASS.</p>
        <ul>
           
<li>SASS</li>
           
<li>CSS</li>
           
<li>SCSS</li>
           
<li>Programming Languages</li>
            <li>Courses</li>
        </ul>
    </div>
</body>
</html>

SASS 代码

//my style.scss

$primary-color: #007bff;

#box1 {
  background-color: $primary-color;

  h1 {
    color: white;
  }

  p {
    color: $primary-color;
  }

  ul {
    list-style: none;
    padding: 0;

    li {
      margin-bottom: 5px;
    }
  }
}

输出

在 SASS CSS 中使用变量

与编程语言类似，SASS 提供了实现变量概念的功能。我们可以将信息存储在变量中，然后在整个程序中重复使用此变量；我们可以将任何 CSS 值（如字体、颜色、大小等）存储在变量中。在 SASS 中，可以使用“$”符号声明值。让我们通过示例看看变量的实现。

示例 2

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <header class="header">
    <h1>Welcome to javaTpoint</h1>
    <p>This is the header with a primary background color.</p>
   </header>
   
   <section class="content">
    <h2>Main Content</h2>
    <p>This is the main content of the website.</p>
    <button class="button">Click me</button>
   </section>
   
   <footer class="footer">
    <p>� 2023 javaTpoint</p>
   </footer>
</body>
</html>

SASS 代码

$primary-color: #3498db;
$secondary-color: #e74c3c;
$text-color: #333;
 
body {
  font-family: Arial, sans-serif;
  color: $text-color;
}
 
.header {
  background-color: $primary-color;
  color: white;
}
 
.button {
  background-color: $secondary-color;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

编译后的 CSS 代码

body {
  font-family: Arial, sans-serif;
  color: #333;
}
 
.header {
  background-color: #3498db;
  color: white;
}
 
.button {
  background-color: #e74c3c;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

输出

在 SASS CSS 中使用嵌套

这是 SASS 为 CSS 代码提供的另一个功能。我们在编写 HTML 编程时可以看到嵌套编程。它看起来是分层的。我们可以借助 CSS 选择器实现嵌套 SASS。让我们通过以下示例来看一下。

示例 3

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 
</head>
<body>
 <div class="container">
  <div class="header">
   <h1>Welcome to javaTpoint</h1>
  </div>
  <div class="content">
   <p>This is an example of nested SASS.</p>
  </div>
 </div>
 
</body>
</html>

SASS 代码

.container {
  width: 100%;
  padding: 20px;
  
  .header {
    background-color: #333;
    color: white;
    padding: 10px;
    
    h1 {
      font-size: 24px;
      margin: 0;
    }
  }
  
  .content {
    background-color: #f4f4f4;
    padding: 15px;
    
    p {
      font-size: 16px;
      margin: 0;
    }
  }
}

编译后的 CSS 代码

.container {
  width: 100%;
  padding: 20px;
}
 
.container .header {
  background-color: #333;
  color: white;
  padding: 10px;
}
 
.container .header h1 {
  font-size: 24px;
  margin: 0;
}
 
.container .content {
  background-color: #f4f4f4;
  padding: 15px;
}
 
.container .content p {
  font-size: 16px;
  margin: 0;
}

输出

在 SASS CSS 中使用分部

当需要为较大的代码提供样式属性时，会变得更具挑战性。如果我们为大代码使用 SASS 代码，那么在代码执行过程中会产生很多错误。但是我们可以借助部分 CSS 来解决这个问题。这是一种代码片段，写在一个文件中，但该片段不会被编译成 CSS。要创建部分 SASS，我们必须遵循以下步骤。

首先，我们必须在文件名之前添加下划线来重命名文件。
然后，我们必须提供所有字体详细信息，如字体大小、字体系列、颜色等。
然后，我们必须使用 @use 规则在主 SASS 文件中使用该文件。

在 SASS CSS 中使用导入

创建了部分 SASS 文件后，我们必须将部分 SASS 文件调用到主 SASS 文件中。我们可以使用 @use 规则来做到这一点。完成此操作后，它将导入部分文件中的所有详细信息并在主文件中使用。

在 SASS CSS 中使用 Mixins（混合）

Mixins 类似于变量，用于存储代码片段。如果我们想为多个元素提供一些样式，那么我们必须借助 mixins。我们可以使用 @mixin 指令创建代码集。让我们通过以下示例来理解它。

示例 4

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <button class="button-primary">Primary Button</button>
 <button class="button-secondary">Secondary Button</button>
 
 <div class="card">
  Card Content
  <button class="button-card">Card Button</button>
 </div>
</body>
</html>

SASS 代码

// Define a mixin
@mixin button($background-color, $text-color, $padding) {
  background-color: $background-color;
  color: $text-color;
  padding: $padding;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  &:hover {
    background-color: darken($background-color, 10%);
  }
}

// Using the mixin
.button-primary {
  @include button(#3498db, #ffffff, 10px 20px);
}

.button-secondary {
  @include button(#e74c3c, #ffffff, 8px 16px);
}

编译后的 CSS 代码

.button-primary {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-primary:hover {
  background-color: #217dbb;
}

.button-secondary {
  background-color: #e74c3c;
  color: #ffffff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button-secondary:hover {
  background-color: #c0392b;
}

输出

在 SASS CSS 中使用 Extend/Inheritance（扩展/继承）

在 SASS 中，我们可以跨选择器共享多个属性。通过占位符，我们可以实现继承属性。当我们从一个类扩展到另一个类时，我们可以看到继承的效果。我们可以借助 @extend 规则在 CSS 选择器中实现继承。让我们通过一个例子来理解它。

示例 5

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <button class="button-primary">Primary Button</button>
  <button class="button-secondary">Secondary Button</button>
  <button class="button-disabled" disabled>Disabled Button</button>
</body>
</html>

SASS 代码

// Define a base button style
.button-base {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// Extend the base style for different button variations
.button-primary {
  @extend .button-base;
  background-color: #3498db;
  color: #ffffff;
}

.button-secondary {
  @extend .button-base;
  background-color: #e74c3c;
  color: #ffffff;
}

.button-disabled {
  @extend .button-base;
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

编译后的 CSS

.button-base,
.button-primary,
.button-secondary,
.button-disabled {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button-primary {
  background-color: #3498db;
  color: #ffffff;
}

.button-secondary {
  background-color: #e74c3c;
  color: #ffffff;
}

.button-disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

输出

在 SASS CSS 中使用运算符

我们还可以执行数学运算来提供网页的样式。算术运算，如 +、-、*、% 和 math.div()，可以将像素值转换为百分比，然后将百分比值提供给 CSS 值。让我们通过以下示例来理解它。

示例 6

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div class="container">
    <p>This is a container with increased font size and modified padding.</p>
   </div>
  
   <button class="button">Primary Button</button>
</body>
</html>

SASS 代码

// Define some variables
$base-font-size: 16px;
$padding: 20px;
$border-width: 2px;
$primary-color: #3498db;
$secondary-color: #e74c3c;

//Example of mathematical operators
.container {
  font-size: $base-font-size * 1.2; // Increase font size by 20%
  padding: $padding + 10px; // Add 10px to padding
  border: $border-width * 2; // Double the border width
}

//Example of logical operators
.button {
  background-color: $primary-color;
  color: if($primary-color == #3498db, #ffffff, #000000); // If the primary color is blue, use white text, otherwise use black text
  border: if($primary-color == $secondary-color, 1px solid $primary-color, 1px solid $secondary-color); // If primary and secondary colors are the same, use primary color for the border, else use the secondary color
}

编译后的 CSS

.container {
  font-size: 19.2px;
  padding: 30px;
  border: 4px;
}

.button {
  background-color: #3498db;
  color: #ffffff;
  border: 1px solid #3498db;
}

输出

下一个主题CSS Border Box

CSS 中的 SASS

引言

什么是 CSS 预处理器？

什么是 SASS CSS？

变量语法

嵌套语法

SASS 的特性和概念

SASS CSS 如何工作？

为什么要使用 SASS CSS？

用于使用 SASS CSS 的 HTML 代码：示例

示例 1

在 SASS CSS 中使用变量

示例 2

在 SASS CSS 中使用嵌套

示例 3

在 SASS CSS 中使用分部

在 SASS CSS 中使用导入

在 SASS CSS 中使用 Mixins（混合）

示例 4

在 SASS CSS 中使用 Extend/Inheritance（扩展/继承）

示例 5

在 SASS CSS 中使用运算符

示例 6

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS 中的 SASS

引言

什么是 CSS 预处理器？

什么是 SASS CSS？

变量语法

嵌套语法

SASS 的特性和概念

SASS CSS 如何工作？

为什么要使用 SASS CSS？

用于使用 SASS CSS 的 HTML 代码：示例

示例 1

在 SASS CSS 中使用变量

示例 2

在 SASS CSS 中使用嵌套

示例 3

在 SASS CSS 中使用分部

在 SASS CSS 中使用导入

在 SASS CSS 中使用 Mixins（混合）

示例 4

在 SASS CSS 中使用 Extend/Inheritance（扩展/继承）

示例 5

在 SASS CSS 中使用运算符

示例 6

相关帖子

CSS Variables

CSS Counter

CSS icons

CSS Color Palette

CSS Opacity

CSS border-radius

CSS Peeper

CSS Border Color

CSS nth selector

background-attachment

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器