探索萨斯的魔力———-DEV365 开发者社区

嘿，让我们深入了解萨斯的迷人世界！ Sass或句法上很棒的样式表是一种强大的脚本语言，它将您的CSS体验提升到一个全新的水平。将其视为向导的工具包，以增强您的样式表具有增压功能。

揭开萨斯的奥秘

sass不仅是一种语言；这是CSS预处理器，这意味着它扩展了常规CSS的功能。想象一下，能够在样式表中使用变量，嵌套，混合物等。这就像在您的造型工作流程中添加了魔术。

萨斯的不同口味

sass有两种令人愉悦的口味：.sass和.scss。在.sass中，语法干净且缩进：

nav
  ul
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 8px 12px
    text-decoration: none

同时，.scss反映了熟悉的CSS语法：

nav {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
  }
}

揭示变量的力量

sass介绍了变量的概念，就像编程语言一样。您将一美元符号预先到变量名称，并分配诸如字符串，数字，颜色等的值：

$primary_font: Arial, sans-serif;
$highlight_color: crimson;
$base_font_size: 16px;
$container_width: 960px;

body {
  font-family: $primary_font;
  font-size: $base_font_size;
  color: $highlight_color;
}

.container {
  width: $container_width;
}

这个神奇的功能将SASS与众不同，尤其是因为CSS自定义属性尚不享受全部浏览器支持。

导航筑巢迷宫

sass嵌套是超级大国！告别重复的选择器。 Sass没有在CSS中多次编写相同的选择器，而是让您相互嵌套：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
  }
}

嵌套不仅仅用于亲子关系；它也非常适合处理像:hover这样的伪级：

a {
  &:link {
    color: red;
  }
  &:visited {
    color: green;
  }
  &:hover {
    color: hotpink;
  }
  &:active {
    color: blue;
  }
}

使用&符号有助于编织此迷人的选择器。

惊叹于嵌套特性

sass中的嵌套特性为您的造型增添了优雅。当多个属性共享一个常见的前缀时，您可以将它们捆绑在一起：

body {
  font: {
    family: Helvetica, sans-serif;
    size: 18px;
    weight: bold;
  }
  text {
    align: center;
    transform: lowercase;
    overflow: hidden;
  }
}

通过对属性进行分组，您的代码变得更加干净，更易于管理。

带有@Import和部分的召唤

sass就是关于干燥的，不要重复自己。您可以创建具有共享变量，颜色等的部分文件，然后导入它们：

@import "variables";
@import "colors";
@import "typography";

// Your main styles here

，如果您想区分局部，请在_partial.scss之类的下强调。 SASS不会以下划线开头。

迷人的@mixin和@extend

@mixin是您的拼写本，用于创建可重复使用的CSS属性集。这是保持一致风格的福音：

@mixin important-text {
  color: red;
  font-size: 18px;
  font-weight: bold;
}

.danger {
  @include important-text;
  background-color: green;
}

另一方面，@extend使您可以共享一组从一个选择器到另一个选择器的属性：

.button-basic {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-report {
  @extend .button-basic;
  background-color: red;
}

.button-submit {
  @extend .button-basic;
  background-color: green;
  color: white;
}

虽然它们都有助于避免重复，但@mixin对独立可重复使用的样式更好，而@extend更适合继承样式。

循环和插值：内部的巫术

sass中的循环就像编织法术。创建列表并循环通过它们生成CSS：

$sizes: 32px, 48px, 72px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
  }
}

#{$size}部分是插值将变量带入您的字符串。

拥抱Sass功能的魔力

在sass中的功能使您可以创建可重复使用的逻辑片段。您甚至可以使用内置实用程序功能进行快速造型：

$primary: #11141f;

.box {
  background: lighten($primary, 25%);
  color: darken($primary, 30%);
}

这些功能使样式更加直观和高效。

大结局：@mixin vs. @extend

@mixin和@extend具有不同的目的。 @mixin就像创建咒语食谱。它捆绑了一组属性以重复使用。 @extend就像在施法者中共享魔术 - 它使您可以将一个选择器的属性扩展到另一个选择器的属性。两者都减少了重复，但它们在不同的情况下发光。