- 01. 使用 Sass 变量存储数据
- 02. 使用 Sass 嵌套 CSS
- 03. 使用@mixin 创建可重用的 CSS
- 04. 使用@if和@else为样式添加逻辑
- 05. Sass@Loop
- 06. 使用 _Partial 将样式拆分为更小的块
- 07. 将一组 CSS 样式扩展到另一个元素
- 结语
本文主要是让大家快速上手 Sass,也就是 Sass 速成课,希望对大家有帮助,当然如果大家有时间还是要系统学习一下,可以看的Sass 教程。
01. 使用 Sass 变量存储数据
Sass
与CSS
不同的一个特性是它可以使用变量。它们可以被声明和设置为将数据存储为类似于JavaScript
的变量。
在JavaScript
中,变量是使用let
和const
关键字声明的。在Sass
中,变量以$
开头,后跟变量名。
假设我们需要在不同的地方使用成功颜色“绿色”而不重复其名称。所以,我们需要写这样的代码:
$success-color: green;
然后我们在不同的地方使用这个全局变量,如下所示:
.success { color: $sucess-color; } h3 { color: $success-color; }
变量有用的一个例子是当许多元素需要相同的颜色时。如果那个颜色改变了,唯一可以编辑代码的地方就是变量值
02. 使用 Sass 嵌套 CSS
Sass
会让你的CSS
代码看起来像html
的结构
通常,每个元素都针对不同的行来设置样式,就像这样
无嵌套:
footer { background-color: #000; } footer ul { list-style: none; } footer ul li { display: flex; }
嵌套后:
footer { background-color: #000; ul { list-style: none; li { display: flex; } } }
可以通过在相应的父元素中嵌套子样式来使代码更加规整
03. 使用@mixin 创建可重用的 CSS
在Sass
中,mixin
是一组CSS
声明。所以我们可以在我们的样式表中重用它们。
较新的CSS
功能需要时间才能与所有浏览器完全兼容。随着浏览器采用特性,使用它们的 CSS 规则可能需要供应商前缀。例如box-shadow
属性。
没有混合:
.card { -webkit-box-shadow: 0px 0px 4px #fff; -moz-box-shadow: 0px 0px 4px #fff; -ms-box-shadow: 0px 0px 4px #fff; box-shadow: 0px 0px 4px #fff; }
想象一下,我们的网站上有不同类型的卡片,它们具有不同的box-shadow
效果。这么写支持所有浏览器需要大量编码。
使用混合:
@mixin box-shadow($x, $y, $blur, $c) { -webkit-box-shadow: $x $y $blur $c; -moz-box-shadow: $x $y $blur $c; -ms-box-shadow: $x $y $blur $c; box-shadow: $x $y $blur $c; }
定义以@mixin
开头,后跟自定义名称。参数(上例中的$x
、$y
、$blur
和$c
)是可选的。现在,无论何时需要box-shadow
,只需一行调用mixin
就可以自动生成供应商前缀。
我们需要使用@include
指令调用@mixin
:
.card { @include box-shadow(0px, 0px, 5px, #000); } .popup-card { @include box-shadow(2px, 2px, 10px, #000); }
04. 使用@if和@else为样式添加逻辑
在Sass
中,@if
@else
语句类似于JavaScript
。当我们在应用任何样式之前搜索特定条件时,它在Sass
中非常有用。
@mixin text-color($val) { @if $val == danger { color: red; } @else if $val == success { color: green; } @else { color: black; } }
然后我们需要在不同的地方@include
这个mixin
:
h1 { @include text-color(danger); font-size: 2rem; } .sucess-text { @include text-color(success); font-weight: bold; }
05. Sass@Loop
Sass
有几个循环选项,很像其他编程语言。 它们包括@for
循环、@each
循环和@while
循环。 这些循环是用于生成 CSS 代码的非常强大的工具
使用@for
创建一个Sass
循环:
在Sass
中,@for
有两种使用方式: start through end
orstart to end
,区别就是to
不会包括最后像 start through end:
@for $i from 1 through 5 { .text-#{$i} { font-size: 10px * $i; } }
{$i}
部分是将变量(i)
与文本组合成字符串的语法,编译为 Css:
.text-1 { font-size: 10px; } .text-2 { font-size: 20px; } .text-3 { font-size: 30px; } .text-4 { font-size: 40px; } .text-5 { font-size: 50px; }
“start to end” 和”start through end”一样,仅仅只是不包括结束
@for $j from 1 to 6 { .text-#{$j} {font-size: 10px * $j} }
编译为 Css:
.text-1 { font-size: 10px; } .text-2 { font-size: 20px; } .text-3 { font-size: 30px; } .text-4 { font-size: 40px; } .text-5 { font-size: 50px; }
使用@each
来循环列表中的项目:
不使用 Map:
@each $color in red, green, yellow { .#{$color}-text {color: $color;} }
使用 Map:
$colors: (color1: red, color2: green, color3: yellow); @each $key, $color in $colors { .#{$color}-text {color: $color;} }
上面的两个代码示例都编译为以下 CSS:
.red-text { color: red; } .green-text { color: green; } .yellow-text { color: yellow; }
使用@while
循环:
$i: 1; @while $i < 6 { .text-#{$i} { font-size: 10px * $i;} $i: $i + 1; }
因此,首先,我们取一个变量并将其设置为 1。接下来,我们使用 @while
指令检查条件以在 $i
小于 6 时创建不同大小的文本。确保将 $i
增加 1 以避免出现 设置 CSS 规则后无限循环。
编译为 css:
.text-1 { font-size: 10px; } .text-2 { font-size: 20px; } .text-3 { font-size: 30px; } .text-4 { font-size: 40px; } .text-5 { font-size: 50px; }
06. 使用 _Partial 将样式拆分为更小的块
Partial 是一个以下划线开头的 Sass 文件,即:_partial.scss
. 下划线让 Sass 知道特定文件是部分文件,不会生成 CSS 文件。Partial 部分旨在与 @import
指令一起使用。这是将类似代码分组到一个模块中的好方法。
例如,如果你所有的文本颜色都保存在一个名为 _textColor.scss
的单独 sass 文件中,并且你希望它们在 main.scss 模块中,在主 Sass 文件中使用:
@import 'textColor'
请注意,你不需要在 import
语句中指定下划线和文件扩展名。因为 Sass 理解它是部分的。将部分导入文件后,所有文本颜色、混合和其他代码都可以使用。
07. 将一组 CSS 样式扩展到另一个元素
@extend
是 Sass 的一项特性,它允许类彼此共享一组属性。
例如,下面的 CSS 规则块样式 .card 类。 它有一些属性,如背景颜色、宽度、高度。
.card { background-color: #fff; width: 200px; height: 150px; }
现在需要另一张名为.popup-card
的卡片。 它具有与基本.card
类相同的属性。 但是我们需要在弹出卡中添加额外的属性。 可以从.card
复制和粘贴到目标类。 但是有一个更好的方法可以使用@extend
指令来做到这一点。
.popup-card { @extend .card; border-radius: 5px; background-color: #349db; }
这样就把.card
的样式复制到了.popup-card
中。
结语
以上就是今天为大家分享的快速掌握 Sass 用法,希望对大家有用。