手把手教你使用scss

原创

zayyo

发布于 2023-11-03 21:11:29

81500

代码可运行

文章被收录于专栏：zayyo前端zayyo前端

运行总次数：0

代码可运行

学习之前的默认基础：

基本了解HTML和CSS（至少已经使用它们构建过一个基本网页）。
一个代码编辑器（推荐使用VS Code）。
以及一个浏览器（推荐使用Chrome或Firefox）。

为什么要使用SCSS？

变量和计算： SCSS允许你使用变量来存储颜色、字体大小、间距等值。这使得在整个样式表中统一管理和修改这些值变得更加容易。此外，SCSS还支持数学计算，使得在样式中执行计算更加方便。
嵌套： SCSS允许你在选择器内部嵌套规则，从而使样式的层次结构更加清晰和可读。嵌套可以提高代码的可维护性，特别是在处理复杂的选择器结构时。
混合和继承： SCSS的混合（mixins）和继承功能允许你创建可重用的样式块，并在多个地方进行引用。这有助于减少代码的冗余，使样式表更加模块化和易于维护。
函数： SCSS提供了内置的函数，用于操作颜色、执行计算等。此外，你还可以创建自定义函数，使得在样式中执行复杂的逻辑变得更加容易。
模块化： SCSS支持使用局部文件，将样式表分割为更小的模块。这有助于更好地组织和管理项目的样式，使代码更易读和维护。
可读性： SCSS的嵌套、变量和模块化等功能使样式表更易于阅读和理解。结构化的代码可以减少错误，提高代码的可维护性。

虽然使用SCSS拥有上面的众多好处，但是我们在项目中选择使用SCSS还是CSS，是根据项目的需求、性质和个人偏好来决定的。如果我们在一个样式需求较小的小项目上工作，普通CSS可能就已经能够满足了我们的项目需求了。但是如果是遇见更大、更复杂的项目，使用SCSS可以为我们提供更多优势，有助于更高效和可维护的样式工作流程。

什么是SCSS？

SCSS（Sassy CSS）是一种CSS预处理器，它扩展了标准CSS的功能并引入了许多有用的特性，使得编写和维护样式表更加高效和灵活。SCSS允许你在样式表中使用变量、嵌套规则、混合（mixins）、函数、继承等功能，从而提供了更好的组织性、模块化和可读性。

SCSS最早是在2006年由Hampton Catlin开发的，后来在2009年由Natalie Weizenbaum维护。这种语言的设计是为了解决编写复杂和可维护CSS时的一些限制和挑战。SCSS也被称为“SASS”，即Syntactically Awesome Stylesheets的缩写。

如何安装SCSS？

可以通过在 VS Code Editor 中下载Live Sass Compiler扩展来安装SCSS。

还可以按照以下步骤安装扩展：

打开VS Code编辑器
在键盘上按下Ctrl + P
键入ext install glenn2223.live-sass

如何编写SCSS

因为我们的Sass使用.scss作为文件后缀名，不能直接在< link >标签里使用，所以我们要需要把.scss文件编译为 .css文件。这时我们之前安装的Live Sass Compiler插件就派上用场了

我们可以通过点击状态栏上的“Watch Sass”，就可以进行对我们SCSS文件的编译。你也可以点击状态栏上的“Stop Watching Sass”来关闭编译。

在main.scss文件中编写的所有SCSS代码将会被编译到/dist/css文件夹中的main.css文件中。

SCSS特性--嵌套**（父选择器里可以嵌套子选择器）

大多数网页开发者使用SCSS的一个原因是因为它具有嵌套特性。SCSS允许我们将CSS规则嵌套在父选择器内部。这有助于提高样式的可读性和组织性，特别是对于复杂的结构。

例如，我们创建一个带有两个元素的简单HTML页面；一个父元素和一个子元素。

<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>

我们为这两个元素添加一些样式，并将它们嵌套在一起：

.parent {
    padding: 2rem;
    background-color: red;

    .child {
        background-color: blue;
        padding: 1rem;
    }
}

结果如下所示：

我们为父元素添加一个悬停状态的样式：（当我鼠标经过时父元素背景色变为黄色）

.parent {
    padding: 2rem;
    background-color: red;

    .child {
        background-color: blue;
        padding: 1rem;
    }

    &:hover {
        background-color: yellow;
    }
}

SCSS提供了一个选择器可以选中当前元素的父元素，使用&表示。

在SCSS中声明变量

在SCSS中，我们可以使用美元符号（$）来声明变量。参考上面的HTML页面，以下是在SCSS中使用变量的简单方法：

$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;

.parent {
    padding: $padding-large;
    background-color: $color-primary;

    .child {
        background-color: $color-secondary;
        padding: $padding-small;
    }
}

在SCSS中声明变量是非常简单的，这些变量可以保存为局部文件，可以在任何地方使用。我们稍后会在文章中更详细地介绍局部文件。

在SCSS中使用混合（Mixins）

混合（Mixin）是一种用于将一组CSS属性和规则封装在一个可重用的代码块中的特性。混合类似于函数，它允许你在样式表中定义一段代码，然后在需要的地方进行调用。这有助于减少代码的重复性，提高代码的可维护性。

下面是在SCSS中使用混合的方式：

定义混合（Mixin）：

可以使用@mixin指令定义混合，如何在后面跟着一个名称和一组CSS属性和规则。以下是一个简单混合的示例：

@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

混合的使用（Mixin）：

可以通过使用@include指令将上面定义的混合在css样式中使用，后面跟着混合的名称和它所需的任何参数。以下是一个示例：

.parent {
  @include box-shadow(2px, 2px, 5px, rgba(0, 0, 0, 0.2));
}

在上面的示例中，box-shadow混合被包含在.parent类中，应用了指定的box-shadow属性。

SCSS中的函数

SCSS函数是另一个强大的特性，它使你能够执行计算、操作值和创建动态样式。SCSS提供了内置函数，同时还允许你创建自定义函数。SCSS中的函数的工作方式类似于编程语言中的函数，它们接受输入（参数）并返回值。

以下是SCSS中函数工作的示例；

内置函数：SCSS提供了许多内置函数，你可以使用它们来操作值、执行计算和修改样式。一些内置函数的示例包括：lighten()、darken()、rgba()、round()、percentage()、mix()等等。

$color: #3498db;

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

自定义函数： SCSS还允许你使用 @function 指令创建自定义函数。自定义函数可以接受参数，执行计算或逻辑，并返回值。以下是一个将像素值转换为rem单位的自定义函数示例：

@function px-to-rem($pxValue, $baseFontSize: 16px) {
  @return ($pxValue / $baseFontSize) * 1rem;
}

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

SCSS中的局部文件（Partials）如何工作

在SCSS中，局部文件是一种用于将样式代码模块化和组织化的技术。局部文件允许你将一个大的样式表分割成多个小的文件，以便更好地管理和维护代码。局部文件的文件名通常以一个下划线开头（例如 _partial.scss），并具有.scss扩展名。它们包含了可以使用 @import 指令包含和组合到主SCSS文件中的CSS代码段。

下面是SCSS中局部文件的工作方式：

创建局部文件：局部文件用于保存样式的特定部分，例如排版、颜色、布局等。要创建局部文件，给它起一个以下划线开头并以.scss结尾的名称，例如 _variable.scss。
在局部文件中定义样式：在局部文件中，我们可以像在常规的SCSS文件中一样定义样式。例如，_variables.scss 可能包含与颜色和字体相关的样式：
导入局部文件： 要将局部文件中的样式包含到主SCSS文件中，你可以使用 @import 指令，不需要包含下划线和扩展名。当你导入一个局部文件时，在导入语句中不需要包含 _ 或 .

scss。// _variables.scss
$base-font-size: 16px;
$color-primary: red;
$color-secondary: blue;
$padding-large: 2rem;
$padding-small: 1rem;
body {
  font-family: Arial, sans-serif;
  font-size: $base-font-size;
}
@import 'variables';

.parent {
    padding: $padding-large;
    background-color: $color-primary;

    .child {
        background-color: $color-secondary;
        padding: $padding-small;
    }
}

SCSS中的继承

SCSS还可以通过使用 @extend 指令后跟元素选择器，实现属性从父元素继承到子元素。以下是SCSS中继承的工作方式：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;

     .child {
        @extend .parent;
        flex-wrap: wrap;
     }
}

在上面的代码中，.child 元素将继承 .parent 元素的所有属性，这类似于混合（mixins），但有一些细微的差别，因为混合更加灵活。

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

登录后参与评论

0 条评论

热度