学习之前的默认基础:
- 基本了解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”来关闭编译。
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提供了一个选择器可以选中当前元素的父元素,使用&表示。
jcode
在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),但有一些细微的差别,因为混合更加灵活。