SCSS 文件格式 - Sass 级联样式表
什么是一 .scss 文件？
SCSS 是 Sass（Syntactically Awesome Stylesheet）的第二种语法，它使用括号而不是缩进。 SCSS 的设计方式是有效的 CSS3 文件也是有效的 SCSS 文件。 SCSS 文件以 .scss 扩展名存储。
为什么使用 SCSS
随着网站设计变得越来越复杂，导致大型 CSS 文件。这样的文件更难维护。这就是 SCSS 的用武之地。SCSS 在 CSS 开发中引入了变量、嵌套、混合、导入和选择器继承。这些新增功能使设计工作变得更加有趣。
如何使用 SCSS 文件##
SCSS 文件不像 CSS 那样直接包含在 HTML 文档中。相反，SCSS 文件被转换为包含在 HTML 文件中的 CSS 文件。要在您的系统上安装 SCSS，请按照 Sass 官方网站 上的说明进行操作。 要将 SCSS 转换为 CSS，您可以转换已保存的 SCSS 文件或观察更改并在文件保存时进行转换。下面给出了两者的命令。
转换一次###
第一个参数是源 SCSS 文件，第二个参数是输出 CSS 文件。
sass main.scss main.css
关注变化###
该命令有一个额外的 watch* 标志，可以保持命令运行，并且一旦保存 SCSS 文件，就会生成输出 CSS。
sass --watch main.scss main.css
SCSS 语法
SCSS 支持变量、嵌套、混合、导入、选择器继承等。下面给出了这些特性的示例。
变量###
通过使用变量，您可以为保存按钮设置可重复使用的信息，例如原色或背景色。如果您需要更改该信息，这很有用，您只需在一个位置进行更改，它就会在使用时更新。
SCSS
$primary-color: #47dff0;
$secondary-color: darken($primary-color, 50%);
$margin: 16px;
.highlight {
border-color: $primary-color;
color: $secondary-color;
}
h1 {
span {
margin: $margin / 2;
}
color: $secondary-color;
}
**生成的 CSS **
.highlight {
border-color: #47dff0;
color: #042f34;
}
h1 {
color: #042f34;
}
h1 span {
margin: 8px;
}
嵌套###
您可以嵌套类似于 HTML 层次结构的 CSS 选择器。在下面给出的示例中，跨度嵌套在 h1 块内。
SCSS
$primary-color: #47dff0;
$secondary-color: darken($primary-color, 50%);
$margin: 16px;
.highlight {
border-color: $primary-color;
color: $secondary-color;
}
h1 {
span {
margin: $margin / 2;
}
color: $secondary-color;
}
**生成的 CSS **
.highlight {
border-color: #47dff0;
color: #042f34;
}
h1 {
color: #042f34;
}
h1 span {
margin: 8px;
}
混合###
Mixins 可用于将在多个地方一起使用的相似属性组合在一起。您还可以将参数传递给 mixins。
SCSS
声明一个mixin
// Simple
@mixin error-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
// With Parameter
@mixin message-text($color) {
color: $color;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
使用混合
.error {
@include error-text();
}
.success {
@include message-text(green);
}
.info {
@include message-text(blue);
}
**生成的 CSS **
.error {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
.success {
color: green;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
.info {
color: blue;
font-size: 25px;
font-weight: bold;
border: 1px solid black;
padding: 10px;
}
＃＃＃ 延长 ＃＃＃
扩展/继承在一个选择器的属性需要与另一个选择器共享的情况下很有用。在下面的示例中，.error-notice 选择器采用 .error-text 选择器的所有属性并添加边框和填充属性。
SCSS
.error-text {
color: red;
font-size: 25px;
font-weight: bold;
}
.error-notice {
@extend .error-text;
border: 1px solid black;
padding: 10px;
}
**生成的 CSS **
.error-text, .error-notice {
color: red;
font-size: 25px;
font-weight: bold;
}
.error-notice {
border: 1px solid black;
padding: 10px;
}
＃＃＃ 进口 ＃＃＃
导入可用于关注点分离。您可以通过以下方式划分样式：页眉样式在一个单独的文件中，页脚样式在一个单独的文件中，样式中使用的所有颜色变量都可以在一个单独的文件中，等等。使用这种技术，风格保持井井有条。您只需导入主 SCSS 文件中的文件，如下例所示。您无需在导入指令中指定文件扩展名。 Sass 直接编译所有 SCSS 文件。为避免直接编译导入文件，您可以通过在其名称前添加下划线(_) 将其设为部分文件。您可以导入类似于普通 SCSS 文件的不带下划线的部分。
SCSS
@import "variables";
@import "header-styles";
@import "footer-styles";
输出 CSS 将包含所有导入文件的样式。