65.9K
CodeProject 正在变化。 阅读更多。
Home

Drupal 中的 SASS

Latika surse
starIconstarIconstarIconstarIconstarIcon

5.00/5 (5投票s)

2014年7月17日

CPOL

6分钟阅读

viewsIcon

34098

如何在 Drupal 中使用 SASS？

在这篇文章中，我想分享我关于如何在 Drupal 7 主题中创建 Sass CSS 的知识。

什么是 SASS？

SASS 是由 Hampton Catlin 创建的 Syntactically Awesome Stylesheets（语法上很棒的样式表）。
它是一种被解释成层叠样式表（CSS）的脚本语言。

SASS

它是开源的，用 Ruby 编写，包括使用名为 libSass 的 C 库的 PHP 和名为 Jsass 的 Java。

SassScript 提供了以下解决方案：变量、嵌套、混合（mixin）和选择器继承。

SASS 看起来类似于 CSS，但没有分号。

安装 SASS

您必须先安装 RubyGems。

安装 SASS

sudo gem install sass

移动您现有的样式表到 SASS

因为每个有效的 CSS 文件也是一个有效的 SCSS 文件，所以您只需要重命名文件，将其放在正确的位置，然后运行。您可以开始在其中使用 SASS 功能。让我们看看如何为您的主题的 css/style.css 添加 SASS 支持。通过我们放置在 config.rb 中的配置，compass 将解析 sass/FILE.scss 中的每个文件，并输出相应的 css/FILE.css 文件。

  1. 在您的主题文件夹内创建一个名为 sass 的新目录。
  2. 将 css/style.css 移动到新的 sass/ 文件夹
  3. 将文件从 style.css 重命名为 style.sass

在您的 Drupal 主题文件夹中，创建一个名为 "config.rb" 的新文件。

现在，我们将把我们的主题文件夹设置为以下内容

/css/ CSS 文件将被生成到这里。

/sass/ 源 SASS 文件将放置在此处。

/config.rb Compass 将在我们的主题文件夹中使用此配置文件运行。

如果您使用的是 **Windows 10 v1607（截至 2017 年 3 月的最新更新）**，则需要按照以下步骤操作

  1. 右键单击开始菜单并选择 **系统**
  2. 单击 **高级系统设置** （左侧栏）
  3. 单击 **环境变量** 按钮
  4. 在上部分，选择 **Path**（或 **PATH**），然后单击 **编辑** 按钮
  5. 在打开的窗口中，单击 **新建** 按钮
  6. 在选定的输入区域，键入（例如）C:\Ruby22-x64\bin\ （这必须是 Ruby 的 bin 文件夹路径）
  7. 单击 **确定** 两次
  8. 重新打开 **命令提示符**，现在 **sass** 已准备好监视和编译您的 sass 文件。

编译 SASS

SASS 解释器将 SassScript 翻译成 CSS。或者，Sass 可以监视 .sass 或 .scss 文件并将其翻译成输出的 .css 文件。为此，您需要导航到您的 theme 文件夹。

对于 D7

cd sites/all/themes/myTheme/

对于 D8

cd /themes/myTheme/

要查看您的更改，您需要运行以下命令

sass--watch sass:css

在这里，您的第一个参数选项是包含我们 .scss 文件的文件夹名称，此处为 sass。

第二个参数选项是我们 .scss 文件将被编译成常规 CSS 的文件夹名称。

在编写普通 CSS 时，我们会发现重复的 CSS。

.content p{
 font-size:10px;
 color:#FFF;
 margin-top:5px;
}
.content h2{
 font-size:14px;
 color:#FFF;
}

但在 SASS 中

.content{
 p{
  font-size:10px;
  color:#FFF;
  margin-top:5px;
 }
 h2{
   font-size:14px;
   color:#FFF;
 }
}

SASS 变量

您可以在 SASS 中使用变量。

例如

$yellow:#FFCB05;
.content
 a{
  color:$yellow;
 }

这将编译为

.content
 a{
  color:#FFCB05;
 }

这在 Drupal 主题中是一个非常有用的功能，因为标准的颜色格式在整个 CSS 中被重复使用。您可以在 SASS 中定义一次，然后将其应用于多个选择器。如果您想修改此颜色，只需在一个地方更改即可，它将在所有地方更新。

您还可以使用 #{} 在选择器和属性名中使用 SASS 变量

$name: bar;
$attr: border;
p.#{$name} {
  #{$attr}-color: black;
}

它将被编译为

p.bar {
 border-color: black; 
}

SASS 导入

另一个有用的功能是导入其他 SASS 文件，而无需在主文件中渲染它们的输出，这些文件被称为基础部分（base partials）。

 @import "mixin";

您可以将变量导入到您的主布局 SASS 文件中。如果您想阻止文件的输出在您的主 CSS 文件中被渲染，那么您可以使用下划线。

 @import _mixinn.scss

SASS 混合（Mixins）

SASS 中另一个非常有用的功能是重用大段代码，称为“混合（mixins）”。

@mixin radius($radius){
 webkit-border-radius : $radius;
 -moz-border-radius : $radius;
 -o-border-radius : $radius;
 border-radius : $radius;
}

然后，要使用该混合，我们只需执行以下操作

.content {
 .content_box{
   @include
    radius(10px);
  }
}

它将被编译为

.content {
 .content_box {
  webkit-border-radius : 10px;
 -moz-border-radius : 10px;
 -o-border-radius : 10px;
 border-radius : 10px;
 } 
}

SASS 部分（Partials）

部分（Partial）只不过是带有前导下划线的文件名，如 _layout.scss。前导下划线表示该文件只是一个部分文件，不应将其生成为 CSS 文件。部分 SASS 文件的主要目的是以简单的方式将您的 CSS 模块化。它与 @import 指令一起使用。它包含您可以包含在其他 SASS 文件中的小 CSS 片段。

SASS 扩展/继承

这是 SASS 最有用的功能之一。使用 @extend，您可以将一组 CSS 属性从一个选择器共享到另一个选择器。这有助于 CSS 类别的可重用性。

.content a {
 font-family:  'Gotham Light' , 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 text-decoration : none;
 color : white;
 @include transition;
 &:hover ,&:link , &:visited {
  @extend a;
 }
}

在这里，使用和ampersand（&）字符来引用父选择器。

SASS 媒体查询（Media）

SASS 中的 @media 指令与纯 CSS 的行为方式完全相同，但具有一项额外功能：它们可以嵌套在 CSS 规则中。如果 @media 指令出现在 CSS 规则内，它将被提升到样式表的顶层，并将路径上的所有选择器都包含在该规则内。这使得添加特定于媒体的样式变得容易，而无需重复选择器或破坏样式表的流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

它应该被编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

可以使用“and”运算符进行嵌套。它还可以包含 SASS 表达式（包括变量、函数和运算符）来代替功能名称和功能值。

运算符

SASS 具有一些标准的数学运算符，如 +、-、*、/ 和 %。您可以进行一些数学运算。

.container { 
 width: 100%; 
}
.grid-1 {
  float: left;
  width: 450px / 820px * 100%;
}

SASS 中的注释

您可以使用基本的 CSS 注释，如 /* */ 和 //。多行注释 /* */ 会保存在 CSS 输出中，而单行 // 注释则会被移除。

/**
  **This Page Consists Css information for the basic layout of the theme and Global Settings 
======================================================
               TABLE OF CONTENTS 
       ----------------------------------------
  		*1 - General Page layout scss
  		*2 - Css Used to override default css 
=======================================================
***/
@font-face {
	font-family: 'Open Sans light';
	src: url('../fonts/opensans-light.woff') format('woff');
}
// Comment for body background
body {
 background : url(../images/body-bg.jpg) ;
}

它将被编译为

/**
**This Page Consists Css information for the basic layout of the theme and Global Settings
======================================================
TABLE OF CONTENTS
----------------------------------------
*1 - General Page layout scss
*2 - Css Used to override default css
=======================================================
***/
@font-face {
 font-family: 'Open Sans light';
 src: url('../fonts/opensans-light.woff') format('woff');
}

body {
 background : url(../images/body-bg.jpg) ;
}

缓存 SASS 文件

默认情况下，SASS 会缓存编译后的模板和部分。这有助于加快大型 SASS 文件集合的重新编译速度。SASS 将缓存的模板放在 .sass-cache 目录中。在 Drupal 中，它们会放在 /themes/myTheme/sass-cache。

SASS 中的数据类型

SASS 文件支持六种主要数据类型

  • 数字（例如：1.2、10、12px）
  • 文本字符串，带引号和不带引号（例如：“foo”、“bar”、baz）
  • 颜色（例如：red、#ff0000、rgba(255, 0,0)）
  • 布尔值（例如：true、false）
  • 空值（例如：null）
  • 值列表，用空格或逗号分隔（例如：1.5em 1em 0 2em、Times New Roman、Arial、 sans-serif）
  • 将一个值映射到另一个值（例如：(key1: value1,key2: value2)）

SASS 还支持其他类型的 CSS 属性值，如 Unicode 范围和 !important 声明。它们被视为与未加引号的字符串相同。

SASS 中的控制指令和表达式

SASS 还支持控制指令和表达式。

有关更多信息，您可以参考此链接：https://sass-lang.cn/documentation/。

您还可以使用 SASS CSS 进行响应式主题设计。

集成 SASS 的其他方式

还有另一种将 SASS 与您的 Drupal 项目集成的方式。为此，您需要以下模块

和

只需安装并启用模块，然后将 PHPSass 库添加到 sites/all/libraries。

参考文献

© . All rights reserved.