对sass的理解_理解Sass的简单指南

前一段时间，Thoriq Firdaus写了一篇有关Sass入门的出色文章，向您展示了如何安装和使用这种非常有用CSS预处理器语言（您可能想先了解一下，然后开始使用）。

在本文中，我想让您对使用Sass可以做什么以及开发人员每天如何使用它来创建更好和更模块化CSS代码有更多的了解。 跳到您想要的部分：

• 贸易工具
• 变数
• 套料
• 扩展规则集
• 混合蛋白
• 占位符选择器
• 运作方式
• 功能

贸易工具

Thoriq显示你如何可以使用萨斯在命令行中使用sass --watch命令。

如果您更喜欢GUI工具，则可以搭配我个人最喜欢的应用Codekit ，它是Web开发人员工具，用于编译Sass，连接，自动前缀等。 Prepros是另一个功能强大的应用程序 ，可以在所有系统上使用。 两者都是付费应用程序，但是如果您将长期使用它们，则非常值得。

如果您只想试用Sass 而无需支付任何费用，则可以使用终端机或Koala （ 这是我们的评论 ），这是一款免费的跨平台功能丰富的应用程序，可以与其他同类产品抗衡。

变数

缠头的第一件事就是变量。 如果您来自PHP或其他类似的编码语言背景，这将是您的本性。 变量用于存储可重复使用的信息 ，例如颜色值：

$primary_color: #666666;

.button {
    color: $primary_color;
}

.important {
    color: $primary_color;
}

在这里，这似乎没什么用，但可以想象有3,000行代码。 如果您的颜色方案更改，则需要替换CSS中的每个颜色值。 使用Sass，您只需修改 $primary_color变量的值即可。

变量用于存储字体名称，大小，颜色和许多其他信息 。 对于较大的项目，我们可能值得将所有变量提取到一个单独的文件中（我们将很快了解它的完成方式）。 这可以让您重新着色整个项目并更改字体和其他关键方面， 而无需触及实际CSS规则 。 您需要做的就是修改一些变量。

套料

Sass给您的另一个基本功能是嵌套规则的能力 。 假设您正在构建一个导航菜单。 您有一个nav元素，其中包含无序列表，列表项和链接。 在CSS中，您可以执行以下操作：

#header nav {
    /* Rules for the nav area */
}

#header nav ul {
    /* Rules for the menu */
}

#header nav li {
    /* Rules for list items */
}

#header nav a {
    /* Rules for links */
}

在选择器中，我们会重复很多次。 如果元素具有共同的根，则可以使用嵌套以更简洁的方式编写规则 。

这是上面的代码在Sass中的显示方式：

#header {
    nav {
        /* Rules for the nav area */
    }

    ul {
        /* Rules for the menu */
    }

    li {
        /* Rules for list items */
    }

    a {
        /* Rules for links */
    }
}

嵌套非常有用，因为它使样式表（很多）更具可读性 。 通过将嵌套与适当的缩进一起使用，即使您有大量的代码，也可以实现高度清晰的代码结构 。

嵌套的一个缺点是，它可能导致不必要的特异性 。 在上面的示例中，我引用了#header nav a链接。 您也可以使用#header nav ul li a ，这可能太多了。

在Sass中，非常具体是容易得多的，因为您需要做的就是嵌套规则。 以下内容远非易读，而且很具体。

#header {
    nav {
        /* Rules for the nav area */
        ul {
            /* Rules for the menu */
            li {
                /* Rules for list items */
                a {
                    /* Rules for links */
                }
            }
        }
    }
}

扩展规则集

如果您使用的是面向对象的语言，那么扩展就会很熟悉。 通过一个示例可以最好地理解它，让我们创建3个按钮，它们彼此之间略有不同。

.button {
    display: inline-block;
    color: #000;
    background: #333;
    border-radius:4px;
    padding:8px 11px;
}

.button-primary {
    @extend .button;
    background: #0091C2
}

.button-small {
    @extend .button;
    font-size:0.9em;
    padding:3px 8px;
}

这在可以使用元素变体的许多情况下非常有用。 消息（警告/成功/错误），按钮（颜色，大小），菜单类型等都可以使用扩展功能来提高CSS效率。

扩展的一个警告是， 它们不能像您期望的那样在媒体查询中起作用 。 这有点高级，但是您可以在了解占位符选择器中阅读有关此行为的所有信息–占位符选择器是一种特殊的扩展，我们将在稍后讨论。

混合蛋白

Mixins是预处理器用户的另一个最喜欢的功能。 Mixins是可重用的规则集–非常适合于特定于供应商的规则或速记长CSS规则。

如何为悬停元素创建过渡规则：

@mixing hover-effect {
    -webkit-transition: background-color 200ms;
    -moz-transition: background-color 200ms;
    -o-transition: background-color 200ms;
    transition: background-color 200ms;
}

a {
    @include hover-effect;
}

.button {
    @include hover-effect;
}

Mixins还允许您使用变量来定义mixin中的值 。 我们可以重写上面的示例，以使我们可以控制转换的确切时间 。 例如，我们可能希望按钮转换慢一点。

@mixin hover-effect( $speed ) {
    -webkit-transition: background-color $speed;
    -moz-transition: background-color $speed;
    -o-transition: background-color $speed;
    transition: background-color $speed;
}

a {
    @include hover-effect(200ms);
}

.button {
    @include hover-effect(300ms);
}

占位符选择器

Sass 3.2引入了占位符选择器，并解决了一个问题，该问题可能会在生成CSS代码中引起一些膨胀。 看一下下面的代码，它会生成错误消息：

.message {
    font-size:1.1em;
    padding:11px;
    border-width:1px;
    border-style:solid;
}

.message-danger {
    @extend .message;
    background: #C20030;
    color:#fff;
    border-color: #A8002A;
}

.message-success {
    @extend .message;
    background: #7EA800;
    color:#fff;
    border-color: #6B8F00;
}

消息类很可能永远不会在我们HTML中使用：它是为扩展而不是按原样创建的 。 这会导致生成CSS有点膨胀。 为了使代码更高效，您可以使用占位符选择器，该选择器以百分比符号表示：

%message {
    font-size:1.1em;
    padding:11px;
    border-width:1px;
    border-style:solid;
}

.message-danger {
    @extend %button;
    background: #C20030;
    color:#fff;
    border-color: #A8002A;
}

.message-success {
    @extend %button;
    background: #7EA800;
    color:#fff;
    border-color: #6D9700;
}

在此阶段，您可能想知道extends和mixin之间的区别是什么。 如果使用占位符，则它们的行为就像无参数的混合。 的确如此，但是CSS的输出却不同。 不同之处在于， mixins复制规则，而占位符将确保相同的规则共享选择器 ，最终减少CSS的数量。

运作方式

在这里很难抗拒双关语，但我现在不会出现任何医疗笑话。 运算符允许您在CSS代码中进行一些数学运算，并且可能会非常有用。 Sass指南中的示例非常适合展示以下内容：

.container { width: 100%; }

article {
  float: left;
  width: 600px / 960px * 100%;
}

aside {
  float: right;
  width: 300px / 960px * 100%;
}

上面的示例创建了一个最小麻烦的基于960px的网格系统。 它将很好地编译为以下CSS：

.container {
  width: 100%;
}

article {
  float: left;
  width: 62.5%;
}

aside {
  float: right;
  width: 31.25%;
}

我发现操作的一大用途是实际混合颜色。 如果您查看上面的成功消息Sass，则不清楚背景和边框的颜色是否存在某种关系。 通过减去灰色阴影，我们可以加深颜色，使关系可见：

$primary: #7EA800;

.message-success {
    @extend %button;
    background: $primary;
    color:#fff;
    border-color: $primary - #111;
}

减去的颜色越浅，得到的阴影将越暗。 添加的颜色越浅，生成的阴影越浅。

功能

有大量的函数可供使用：数字函数，字符串函数，列表函数，颜色函数等等。 查看开发人员文档中的详细列表。 我将在这里看几对，以向您展示它们的工作方式。

lighten和darken功能可用于更改颜色的亮度。 这比减去阴影更好，它使所有内容更加模块化和明显。 看一下我们以前使用暗化功能的例子。

$primary: #7EA800;

.message-success {
    @extend %button;
    background: $primary;
    color:#fff;
    border-color: darken( $primary, 5 );
}

该函数的第二个参数是所需变暗的百分比。 所有功能都有参数； 看看文档，看看它们是什么！ 以下是一些其他不言自明的颜色函数：降低desaturate ， saturate ， invert ， grayscale 。

就像PHP中一样， ceil函数返回一个四舍五入到下一个整数的数字。 在计算列宽时，或者如果您不想在最终CSS中使用很多小数位时，可以使用此方法。

.title {
    font-size: ceil( $heading_size * 1.3314 );
}

总览

Sass的功能使我们拥有强大的功能，可以轻松编写更好CSS。 正确使用mixin，扩展，函数和变量将使我们的样式表更易于维护，更易读和易于编写。

如果您对其他类似CSS预处理程序感兴趣，建议您看看LESS （或查看我们的初学者指南） –基本原理是相同的！

翻译自: https://www.hongkiat.com/blog/easy-sass-guide/