sass开始使用sass


备注

本节概述了sass是什么,以及开发人员为什么要使用它。

它还应该提到sass中的任何大型主题,并链接到相关主题。由于sass的Documentation是新的,您可能需要创建这些相关主题的初始版本。

为何选择SASS?

  • 继承功能
  • 我们可以使用条件语句
  • 功能比传统CSS更强大
  • 编写CSS高效清晰的方法

版本

发布日期
3.4.22(当前) 2016年3月28日
3.4.0 2014年8月18日
3.3.0 2014年3月7日
3.2.0 2012-08-10

评论

SASS支持两种类型的评论:

  • 内联注释 - 这些注释仅跨越一行,通常用于描述变量或块。语法如下: // Your comment here (在前面加上一个斜杠( // ),解析器忽略该行的其余部分。

  • 多行注释 - 这些注释跨越多行,通常用于在文档顶部显示版权或许可。您可以使用/* 打开多行注释块,然后可以使用*/ 关闭多行注释块。这是一个例子:

/*
   This is a comment
   It's a multiline comment
   Also a hiaku
*/
 

输入

我们假设以下场景: 您有两个样式表: _variables.scsslayout.scss 。从逻辑上讲,您将所有变量保存在变量样式表中,但希望从布局样式表中访问它们。

注意:您可能会注意到变量样式表在其名称前面有一个下划线('_')。这是因为它是部分的 - 这意味着它将被导入。

sass-lang.com说以下关于partials的内容: 您可以创建包含很少CSS片段的部分Sass文件,您可以将这些片段包含在其他Sass文件中。这是模块化CSS并帮助保持易于维护的好方法。 [...]下划线让Sass知道该文件只是一个部分文件,不应该生成一个CSS文件。 Sass partials与@import指令一起使用。

SCSS变量非常适合这种情况。我们假设你的_variables.scss 看起来像这样:

$primary-color: #333;

您可以使用@import 导入它,然后使用引号将样式表的名称导入。您的布局样式表现在可能如下所示(请注意导入中没有下划线或文件扩展名):

@import 'variables';
body {
  color: $primary-color;
}

这将输出如下内容:

body {
  color: #333;
}

嵌套

layout.scss

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

产量

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

建立

在使用SASS时,有多种方法可以设置工作区。有些人更喜欢使用命令行工具(可能是Linux人员)而其他人更喜欢使用GUI应用程序。我会覆盖两者。

命令行工具

sass-lang.com 的“安装SASS”页面非常清楚。您可以将SASS与Ruby一起使用(可以从Linux软件包管理器安装 ,也可以在Windows上下载安装程序)。 macOS预装了Ruby。

一旦安装了Ruby,就需要安装SASS(在某些情况下,可能不需要sudo ):

sudo gem install sass
 

最后,您可以检查是否已使用sass -v 安装了SASS。

GUI应用程序

虽然您可以使用许多GUI应用程序,但我推荐使用Scout-App 。它可以为您自动构建和压缩CSS文件,在文件保存时支持macOS,Windows和Linux。

变量

如果您有经常使用的值,则可以将其存储在变量中。例如,您可以使用它来定义颜色方案。您只需要定义一次您的方案,然后就可以在整个样式表中使用它。

要定义变量,必须在其名称前加上$符号。 (就像在PHP中一样。)

您可以将任何有效的CSS属性值存储在变量中。例如颜色,字体或URL。

示例#1:

$foreground: #FAFAFA;
$background: rgb(0, 0, 0);

body {
    color: $foreground;
    background-color: $background;
}

p {
    color: rgb(25, 25, 20);
    background-color: $background;
}