乐趣区

关于前端:Sass速成课

jiezi

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 中

退出移动版