7

Sass速成课

 3 years ago
source link: https://segmentfault.com/a/1190000040724594
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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中

WX20210922-091703.png


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK