使用SCSS混合元素促进CSS媒体查询的最佳方法

在Web开发中，建立对用户友好且在各种设备上具有视觉吸引力的网站和应用程序是非常重要的。CSS媒体查询是创建所需的响应式网站的最常用技术，适用于从桌面到移动的多种屏幕尺寸。

前提条件

为了更好地理解这篇文章，读者应该对以下内容有所了解。

HTML和CSS。
对CSS预处理器--SASS/SCSS的基本了解。

主要收获

在本文结束时，读者应了解以下知识。

CSS预处理器脚本语言如何工作。
处理媒体查询的最佳方法。
如何使用SCSS混合器设计响应式应用程序。
如何更好地实现SCSS混合器，使代码更简洁、更容易维护。

什么是CSS预处理器脚本语言（SCSS）？

CSS预处理器是具有扩展功能的工具，它可以将写好的代码，编译成浏览器可以阅读和使用的传统CSS。一般来说，Leaner Style Sheets（LESS）、Syntactically Awesome Stylesheets（SAAS）/Sassy CSS（SCSS）和Stylesheet Language（Stylus）是开发者中最突出的CSS预处理器。在这篇文章中，我们将使用SCSS。

尽管SASS和SCSS的基本结构和功能与CSS相似，但它们不应相互混淆。SCSS是SASS的高级版本，在处理CSS代码时具有更大的编程功能和灵活性。值得庆幸的是，它们的区别可以从它们不同的语法和文件扩展名中轻易看出。

为了利用CSS预处理器的优势，人们需要在网络服务器上安装CSS编译器。有多种方法可以做到这一点，但一个简单的方法是在GitHub页面上找到适合你的操作系统的SASS包并下载。然后你可以简单地安装它，并将该目录添加到你的PATH中。这里的路径指的是操作系统寻找程序的所列目录。这就是全部。

关于安装过程的进一步说明或指示，sass官方网站随时可以提供。

CSS媒体查询

CSS媒体查询是最基本的CSS技术之一，开发者用它来确保网站的布局在所有设备上都能完美地适应。然而，大多数开发者都同意，CSS媒体查询可能会很费字、很复杂、很耗时，而且维护起来很有挑战性。这就是CSS预处理器SCSS的用武之地。

借助于CSS预处理器，特别是SCSS，人们可以建立更整洁、更易于维护的网站。预处理器拓宽了CSS的现有特性和功能，以产生一个具有响应式设计和布局的网站。下面的步骤涉及如何创建SCSS混合器。

第1步：创建SCSS文件

SCSS混合器提供了产生可重复使用的代码块的能力，这有助于避免重复，创造更干净的代码，并使其易于维护。没有必要用大量的断点来布置各个规则，这样会很耗时，而且会破坏你的代码。

此外，你可以避免在CSS文件中搜索特定元素的挫折感。因此，使用SCSS，特别是它的混合函数来处理媒体查询是有意义的。

在这一点上，我们假设你的系统有一个Sass编译器，并且已经准备好了。为了使用混合器，你需要创建一个名为style.scss 的文件，然后把它放在项目的根目录下。然后在命令提示符下执行这段代码，让编译器读取scss文件。

sass --watch style.scss:style.css

这个动作会自动在该文件夹中创建一个名为style.css 的新CSS文件。混合器将帮助你管理你的媒体查询，把它定义在一个地方。所以你可以根据需要应用它，然后Sass使你能够将它编译成相应的CSS代码。

让我们打开我们的style.scss 文件，输入必要的代码来设置混合器。

// We define the mixins for two major breakpoints mobile and tablet
 
 // $breakpoint is the variable that can have several values
@mixin devices ($breakpoint) { //the name of the mixin is devices
  
    @if $breakpoint == tablet {    
    @media only screen and (max-width: 680px) {
      @content;
    }
  }
 
  @if $breakpoint == mobile {
    @media only screen and (max-width: 481px) {
      @content;
    }
  }
}

上面的代码块显示了混合元素是如何被映射出来并与名称相关联的。

第2步：使用SCSS混合器促进媒体查询

正如你在下面的片段中所看到的，只需调用混集器就可以影响到造型。从已经定义的内容来看，颜色会根据平板电脑和手机屏幕的尺寸进行适当的改变。

// Handling the responsiveness
.responsive {
    background: yellow;
  // The normal background color is set to yellow
 
  @include devices(tablet) {
        background: lightblue;
        // code set for tablet
    }
 
  @include devices(mobile) {
        background: aquamarine;
        h1{
            color: red;
        }
        // code set for mobile    
    }
}

通过简单地调用创建的混合组件，你可以按照你的意愿应用样式。这些SCSS代码将被编译以生成相应的CSS代码。

.responsive { 
  background: yellow;
}

@media only screen and (max-width: 680px) {
  .responsive {
    background: lightblue;
  }
}

@media only screen and (max-width: 481px) {
  .responsive {
    background: aquamarine;
  }
  .responsive h1 {
    color: red;
  }
}

其结果是自动生成一个简短的CSS代码块，并为断点定义样式。

现在，你可以简单地在你选择的地方使用混合器，只需编辑混合器就可以改变媒体查询。产生的CSS代码显然更整洁，没有长长的断点列表。当你运行代码并将屏幕调整到不同的宽度时，你会观察到背景颜色是如何对应变化的。

总结

你已经成功地获得了关于如何安装SASS编译器的指南。我们学会了如何设置SCSS混合器，然后利用使用SCSS混合器的最佳技术来建立一个网站，使其在所有设备上都能适当地适应并完美显示。

有了SCSS混合器，你不必在代码中埋下一长串断点。相反，你可以把它们放在一个集中的位置，以方便管理和提高响应能力。

使用SCSS混合元素促进CSS媒体查询的最佳方式