如何用SASS编写可重用的CSS

Sass是一个CSS预处理程序，它在前端工程师的工具箱中变得至关重要。Sass之所以流行，是因为它修复了几个CSS缺陷。【相关推荐：css在线手册】

这也是Bootstrap 4运行的基础。这意味着为了理解如何操作引导代码而学习Sass是非常有帮助的，而不是覆盖代码(这是大多数开发人员的定制方法)。理解Sass可以更好地理解源代码级别的工具。

当使用CSS时，我们经常在一个全局的世界中工作，并可能错误地设置元素的样式。

自定义CSS(即使有CSS变量)仍然是非常冗余的。CSS不是为我们今天所拥有的那种复杂的架构设计的，我们遇到了在另一个样式表中导入一个样式表的问题，这可能会导致一个非常大的样式库，没有适当的文档可能无法理解它。

TL; DR

在本文中，我们将重点讨论为什么预处理程序很重要，并特别强调SASS及其将规则组合在一起的能力。使用Sass为设计现代web组件提供了一种更合理的方法。

我们还将通过演示示例来了解为什么要使用这些预处理程序，演示如何将样式划分为更小的特定组件，而不必强迫用户下载大量不需要的CSS文件。

先决条件

在进一步讨论之前，本文假设如下:

• 您的机器上安装了Node.js≥v6

• 您的机器上安装了npm

• Sass安装在您的机器上

• 在您的机器上安装了create - response -app

• 您对CSS有基本的了解

开始

Sass可以通过多种方式添加到您的项目中，您可以在这里找到所有的安装选项。对于这篇文章，我们将使用npm运行:

npm install -g sass

CSS有什么问题?

在学习web开发的基础知识时，我们会接触到传统的CSS，它涉及到使用类或id之类的标识符来处理和操作HTML。

在使用CSS的时候，我们经常需要修改样式来让它看起来像我们想要的样子。组织大型样式表真的很有压力。保持类的作用域以避免以一种非预期的方式对事物进行样式化几乎是累人的。

即使引入了CSS变量来减少声明的重复，这个概念仍然存在一些问题，可以通过使用预处理程序来解决。比如有很长的变量名。

即使有了CSS3，我们仍然需要依赖技术(基本上是一些技巧)来设计用户界面的样式。我们还可以注意到，在编写HTML时，有一个明确的嵌套和可视化层次结构，这是常规CSS所不允许的。

让我们看看CSS中缺少的特性的“解决方案”。

什么是CSS预处理程序?

这些基本上可以看作是一个程序，它允许您从预处理程序自己独特的语法生成CSS。CSS预处理程序通常会添加一些纯CSS中不存在的特性，比如mixin、嵌套选择器、继承选择器。

同时也给了我们一种非常结构化的方式来编写样式表。CSS预处理程序的例子包括LESS, stylus, Sass, PostCSS。如前所述，本文主要关注作为预处理器的Sass。

SASS还是SCSS ?

现在，如果你对Sass这个概念不熟悉，你可能会想，“如果Sass是预处理器，那么SCSS是什么?”因为在使用Sass时有一点混乱因为没有分号;和花括号{}，代替它，它使用制表符和空格。

在Sass的第三版中，SCSS语法被引入为Sass的主要语法，它包含了所有的CSS特性，但允许使用Sass的特性。在我看来，这两种语法在样式化时都是有效的，而且没有一种比另一种更好。对SCSS的需要是使Sass的学习曲线和实现更快，没有错误。

Sass:

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

在上面的代码示例中，我们注意到了Sass和SCSS编写风格的不同。注意，它们都使用$来声明一个变量。

SCSS概念

嵌套和范围

当设计HTML文件的样式时，SCSS使您能够在样式表中拥有相同的HTML视觉层次结构，这样您就可以以一种更容易理解的方式来设计样式。例如，样式化这个index.html:

<nav class = 'sidebar'>
  <ul>
    <li> <a> </a></li>
  </ul>
</nav>

CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

SCSS:

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

  li { display: inline-block; }

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

从上面的CSS代码示例可以看出，我们能够推断HTML文件的结构，同时保持实现的简短。这样做的另一个好处是，它有助于避免拼写错误，而且您可以看到，我们已经确定了一些规则的范围，因此它们只适用于nav。

子代风格规则应用于SCSS，例如:

.container{
.left-area{
  ...
}
}

这意味着，具有class = "left-area"的容器类的所有后代都将受到规则的影响。基本的CSS选择器仍然适用于SCSS，如:

直接后代（>）

.container{
  > .left-area{
   ...
 }
}

现在，只有容器div的直接子类才会获得样式。

父选择器（&）

如果我们想通过添加一个类来修改一个类，我们可以使用父选择器，它主要用于添加辅助样式改变元素样式的情况。这也会起到修饰词的作用。

.container{
  & .right-area{
   background-color : #0000
 }
}

我们也可以使用父选择器将角色限定在另一个类中，就像这样:

button{
  color:#349;
  .theme-dark &{
    color: #fff
}
}

在代码示例中，由于父选择器的原因，颜色#fff只适用于.theme-dark类。

变量

通常，在CSS中，我们通过使用@import将不同的样式表链接到主CSS中。这对用户意味着什么?这意味着必须下载额外的CSS文件。

如果有一种方法可以使用SCSS将所有这些输入解析到一个CSS文件中，那会怎么样呢?CSS中的变量概念来自于JavaScript方法。

注意，在SCSS中使用@import将部分内容放到其他SCSS文件中，但是它们不会变成CSS文件。它们在名称前用_表示。

使用SCSS变量

全局变量:顾名思义，这些变量可以在一个CSS块中访问。如果您熟悉JavaScript中的作用域，就会理解全局变量。

SCSS中的变量总是以美元符号$开头。

$color: #f002
.color{
  $text_color: #ddd;
  background-color: $color;
  color: $text_color;
  text-shadow:0 0 2px darken($text_color, 40%);
}

从上面的代码中，我们注意到$text_color只能在代码块中访问。

Mixins

SCSS的另一个了不起的特性是它能够将可重用的样式打包在一起，并允许根据需要将样式导入到另一个样式块中，从而减少代码中的冗余。

宣言

创建一个mixin非常简单，只需在样式块之前添加一个@mixin和一个mixin名称，如下所示:

@mixin {insert name} {
     //write CSS code here
}

用法

要在代码块中使用mixin，我们必须使用@include，然后是mixin的名称，然后是分号。这有助于在代码块中使用预定义的mixin:

.nav {
   @include {mixin name}
}

使用mixin的另一种方式是使用参数，就像JavaScript中的函数一样，我们可以声明一个全局变量，并将其设置为mixin的一个参数:

@mixin text-color($color){
  background-color: $color;
  color: white;
}

//import 
.name{
  @include text-color(orange);
}
.background{
  @include text-color(white)
}

现在想象一下，如果我们想要mixin的默认值，并在不同的代码块中更改或重新分配这个值，我们将使用一些参数。为了说明这一点，我将重构前面的代码示例:

@mixin text-color($color : #fff){
  background-color: $color;
  color: white;
}

//import 
.name{
  @include text-color(orange);
}
.background{
  @include text-color($color: white)
}

它的作用是，为mixin设置一个默认颜色作为基础，但是可以通过重新分配来修改。我们也可以将值设为null，以便只使用mixin中需要的参数:

@mixin text-color($color : null){
  background-color: $color;
  color: #038;
}

//import 
.name{
  @include text-color();
}
.background{
  @include text-color(#fff)
}

它的作用是使在@include输入中显示为null的值没有值，但默认情况下显示另一个值。

通过减速块：

@mixin text-color($color){
  color: $color;
  .extra{
  @content
  }
}

//import 
.name{
  @include text-color(#fff){
    color: blue;
  }
}

代码块基本上允许我们通过样式化父类和定义内部类来保持样式化的简单性。

值得注意的信息

• mixin并不计算到一个CSS文件中，它们是被设计来使用的，因此您通常会将它们视为SCSS中的局部

• mixin不需要在前面加上点(.)

功能

SCSS中的函数是SASS功能的重要组成部分，它们允许您定义可在整个样式表中重用的复杂操作。有很多内建的Sass功能可以提供帮助。查看文档了解更多信息。

这里列出了一些您应该熟悉的函数

• lighten($color, $amount) :使颜色更浅

• darken($color, $amount) :使颜色变深

• adjust-hue($color, $degrees) :改变颜色的色调

• mix($color1, $color2, $weight) :混合颜色+第一个/也低于一个颜色的返回值用于条件

• hue($color) : 获取颜色的色调组件

• saturation($color) : 获取颜色的饱和度组件

• lightness($color) :获取颜色的亮度组件

我们也可以编写自己的Sass函数:

$width: 4px;
@function double($x){
  @return 2 * $x;
}
.thin-border{
  border-width: $width
}
.thick-border{
  broder-width:double($width)
}

上面的函数只是在以正常宽度作为参数调用函数时将值加倍。

带有控制流的条件样式化

这个特性非常棒，因为它允许我们根据使用@if和@else声明的另一个样式的值来替换特定的样式。例如，为不同的字体大小值动态增加行高。

@mixin modify($size){
 font-size: $size;
 @if $size > 18{
 line-height: $size;
 }
}

//import 
.name{
 @include modify(24px)
 }

还需要注意一些其他特性

• 注释——SCSS中的多行注释以相同的方式在CSS中显示，但是内联注释被删除了。它们可以用于字符串插值(知道哪些值实际显示在CSS中)

• Sass还带有@for迭代和控制流，可以与mixin和函数一起使用

结论

在本文中，我们尝试了解了使用SCSS编写函数式CSS的基础知识，还研究了一般的Sass/SCSS原则。我希望我们将这些实践应用到为我们的应用程序编写更轻松、更优化的样式方面。编码快乐!

插件:LogRocket，一款用于网络应用的DVR

LogRocket是一个前端的日志记录工具，它允许您像在自己的浏览器中一样重播问题。LogRocket不需要猜测错误发生的原因，也不需要询问用户屏幕截图和日志转储，而是让您重新播放会话，以便快速了解出错的原因。

它可以与任何应用程序完美的工作，无论框架，并有插件来记录来自Redux, Vuex，和@ngrx/store的额外上下文。

除了记录Redux操作和状态之外，LogRocket还记录控制台日志、JavaScript错误、堆栈跟踪、带有头和正文的网络请求/响应、浏览器元数据和自定义日志。它还利用DOM在页面上记录HTML和CSS，即使是最复杂的单页应用程序，也能重新创建像素完美的视频。

英文原文地址：https://blog.logrocket.com/how-to-write-reusable-css-with-sass/

 想要了解更多前端知识，可访问 web前端学习！！