Drupal下玩Sass

由东方龙马提交于 31 July 2014

原文地址：Sass in Drupal

译者：龙马

如何在Drupal中使用Sass？

在这一篇文章里，我们将介绍Drupal7 主题中使用Sass CSS的经验。

什么是Sass？

SASS 的英文全称是：Syntactically Awesome Stylesheets ，由Hampton Catlin创立。

它是一种脚本语言，最终解析成层叠样式表（即Cascading Style Sheets，简称CSS）。

Sass

Sass是一个开源的基于Ruby和PHP（使用了C语言称为libSass，java称为Jsass的库）。

SassScript提供了以下解决方案：变量（variables），嵌套（nesting），混合（mixins）和选择器继承（selector inheritance）。

Sass和CSS很像，但它没有分号。

安装 Sass

你需要先安装好RubyGems。

安装 SASS

sudo gem install sass

编译 Sass

Sass编译器将SassScript 编译成CSS。Sass可以监测.sass或者.scss文件，而且可以编译为.css文件。这需要你先切换到你的主题目录。

D7下：

cd sites/all/themes/myTheme/

D8下：

cd /themes/myTheme/

如果想看一下你的变更，你需要运行如下命令：

sass--watch sass:css

在这里，你的第一个参数选项是保存 .scss 文件的目录名称，这里是sass。

第二个参数选项是将编译后的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 变量（Variables）

你可以在 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 Importing）

另一个有用的方法是引入其他Sass文件但不输出到你的主文件里，这个被称作基础部分（base partials）。

 @import "mixin";

你可以将变量引入到你主要的结构sass文件里。如果你想要阻止该文件输出到你的主CSS文件的话，你可以使用下划线。

@import _mixinn.scss

Sass中的混合（Sass Mixins）

另一个Sass里最有用的功能是重我复使用大段的代码，称为“mixins”

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

然后来使用mixin，我们简写如下

.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中的局部（Sass Partials）

“Partial”其实什么都不是，但是那些以下划线开头的 sass文件，像 _layout.scss. 以下划线开始意思是，此文件只是个局部文件，而且它不会被编译到CSS文件里。局部Sass文件的主要作用为了便于模块化你的css。它用 @import 表示。它包含了一些你可以引入到其他Sass文件中的css代码小片段。

扩展/继承 Sass（Extend/Inheritance Sass）

这也是Sass中最重要的工具之一。使用@extend 你可以在选择器间共享一组CSS属性。这会帮助让你的CSS classes可以重用。

.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;
 }
}

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

Sass中的媒介（Sass Media）

@media directives in Sass behave just like same as the plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be mumbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

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

It should be compiled to

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

It can be nested using the 'and' operator. Also can contain Sass expressions (including variables, functions, and operators) in place of the feature names and feature values.

运算符（Operators）

Sass has a handful of standard math operators like +, -, *, /, and %. You can do little bit math operations.

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

Sass中的注释（Comments in SASS）

You can use basic CSS comments like /* */ and //. The multiline comments /* */ are stored in the CSS output, while the single-line // comments are removed.

/**
  **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 overide 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) ;
}

It would compile to:

/**
**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 overide 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文件（Caching Sass files）

By default, Sass caches compiled templates and partials. This help to speed up re-compilation of large collections of Sass files. Sass puts the cached templates in the .sass-cache directory. In Drupal, they go in /themes/myTheme/sass-cache.