快速掌握Sass用法

本文主要是让大家快速上手 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 endorstart 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 用法，希望对大家有用。