一篇文章让你完全掌握Sass与css的使用

使用sass变量存储数据

Sass与CSS的不同之处之一是它使用变量。与JavaScript相似，它们被声明并设置为存储数据。

在JavaScript中，使用let和const关键字定义变量。在Sass中，变量以开头，$后跟变量名称。

这是几个例子：

$main-fonts: Arial, sans-serif;
$headings-color: green;

//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

变量有用的一个例子是，当多个元素需要使用相同的颜色时。如果该颜色发生更改，唯一的代码编辑位置就是变量值。

使用Sass嵌套CSS

Sass允许嵌套CSS规则，这是组织样式表的一种有用方法。

通常，每个元素都指向不同的行以对其进行样式设置，如下所示：

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

对于大型项目，CSS文件将具有许多行和规则。在这里，嵌套可以通过将子样式规则放置在各自的父元素中来帮助组织代码：

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

使用Mixins创建可重用的CSS

在Sass中，mixin是一组CSS声明，可以在整个样式表中重复使用。

较新的CSS功能需要一段时间才能被完全采用并准备在所有浏览器中使用。将功能添加到浏览器后，使用这些功能的CSS规则可能需要供应商前缀。考虑“盒子阴影”：

div {
  -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，或者更改每个值以测试不同的效果，需要进行大量键入。Mixins就像CSS的功能。这是如何写一个：

@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 ：

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

使用@if和@else为样式添加逻辑

@ifSass中的指令对于测试特定情况非常有用-就像ifJavaScript中的语句一样工作。

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

就像在JavaScript中一样，@else if并@else测试更多条件：

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

使用@for创建Sass循环

该@for指令在循环中添加样式，与forJavaScript中的循环非常相似。

@for有两种用法：“从头开始”或“从头到尾”。主要区别在于“开始到结束”不包括结束号作为计数的一部分，而“开始至结束”包括结束号作为计数的一部分。

这里是一个开始通过结束例如：

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

该#{$i}部分是将变量（i）与文本组合成字符串的语法。当Sass文件转换为CSS时，如下所示

.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

这是创建网格布局的有力方法。现在，您有十二个用于CSS类别的列宽选项。

使用@each映射列表中的项目

最后一个挑战显示了@for指令如何使用起始值和结束值循环一定次数。Sass还提供了@each遍历列表或映射中每个项目的指令。在每次迭代中，变量将从列表或映射中分配给当前值。

 

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

映射的语法略有不同。这是一个例子：

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

请注意，$key需要变量来引用映射中的键。否则，编译后的CSS将有color1，color2...在里面。上面的两个代码示例都转换为以下CSS：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

应用样式，直到使用@while满足条件为止

该@while指令是具有与JavaScriptwhile循环类似功能的选项。它创建CSS规则，直到满足条件为止。

该@for挑战举了一个例子来创建一个简单的网格系统。也可以使用@while。

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

首先，定义一个变量$x并将其设置为1。接着，使用该@while指令来创建网格系统而 $x小于13设置CSS规则后width，$x加1，以避免无限循环。

将一组CSS样式扩展到另一个元素

Sass具有一项称为的功能extend，可以轻松地从一个元素借用CSS规则，然后在另一个元素上构建CSS规则。

例如，以下CSS规则块为一个.panel类设置样式。它有一个background-color，height和border

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

现在，您需要另一个名为的面板.big-panel。它具有与相同的基本属性.panel，但还需要width和font-size。可以从复制和粘贴初始CSS规则.panel，但是随着添加更多类型的面板，代码将变得重复。该extend指令是重用为一个元素编写的规则，然后为另一个元素添加更多规则的简单方法：

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

在.big-panel将具有相同的属性.panel，除了新的风格

 

 

 

 

 

本文地址：https://blog.csdn.net/Sestid/article/details/110131090