Sass基础

太过爱你忘了你带给我的痛 2022-09-29 05:20 25阅读 0赞

翻译自官方文档[Sass Basics][]

在你可以使用Sass前，你需求在你的项目中设置它。如果你只是想在这里浏览，去吧，但我们建议你先安装Sass。[到这里][Link 1],如果你想学习如何把一切设置。

## **预处理** ##

CSS本身很有趣，但是样式越来越大，更复杂，也更难以维护。Sass是一个能提供帮助的预处理器，能让你使用CSS中不存在的特征，比如变量、嵌套、混合、继承和其他功能，这使得编写CSS更有趣。

一旦你开始使用Sass，需要预处理你的Sass文件，并把它保存在一个你可以使用在你的web站点的正常的CSS文件中。

在你的终端中可以直接的使预处理发生。一旦Sass安装好，你可以在终端中运行`sass input.scss output.css`。你可以看当个的文件或整个目录。此外，你可以用`watch`标记看文件夹或目录。下面是看整个目录时运行Sass的一个例子：

sass --watch app/sass:public/stylesheets

## **变量** ##

当你想重复使用你的样式，可以用变量来存储信息。你可以存储像颜色、字体、堆栈或任何你想重复使用的CSS值。Sass使用$符号来标记一个变量。这里有一个例子：

SASS的语法

$font-stack:    Helvetica, sans-serif
    $primary-color: #333
    
    body
      font: 100% $font-stack
      color: $primary-color

SCSS的语法

$font-stack:    Helvetica, sans-serif;
    $primary-color: #333;
    
    body {
      font: 100% $font-stack;
      color: $primary-color;
    }

当Sass处理时，会把我们定义的像`$font-stack`和$primary-color\`这样的变量输出成正常的CSS变量值并放在CSS中。这使网站保持一致的风格是强有力的。

body { font: 100% Helvetica, sans-serif; color: #333; }

## **嵌套** ##

当编写HTML时，你可能已经注意到它有一个相当清晰的嵌套视觉层次。但CSS并不。

Sass允许你遵循HTML中同样的视觉层次来嵌套CSS选择器。请注意，过度的嵌套规则将导致过度合格的CSS，这难以维护通常被认为是不好的做法。

记住这一点,，下面这个例子是网站导航栏的典型风格：

SASS的语法

nav
      ul
        margin: 0
        padding: 0
        list-style: none
    
      li
        display: inline-block
    
      a
        display: block
        padding: 6px 12px
        text-decoration: none

SCSS的语法

nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    
      li { display: inline-block; }
    
      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }

你会注意到，`ul`、`li` 和`a` 选择器是嵌套在`nav` 选择器里的。这个是一个很好的方式来组织你的CSS，使之更可读。当你生成CSS会是这样的：

nav ul { margin: 0; padding: 0; list-style: none; }
    
    nav li { display: inline-block; }
    
    nav a { display: block; padding: 6px 12px; text-decoration: none; }

## **局部** ##

你可以创建部分Sass文件，其中包含少量的CSS代码片段，你可以将其包含在其他Sass文件中。这是一个很好的方式来模块化你的CSS，并帮助事情更容易维护。局部是一个以\_开头的Sass文件，如`_partial.scss`。下划线让Sass知道该文件是一个局部文件，不应该被生成到一个CSS文件中。Sass局部与指令`@import`一起使用。

## **导入** ##

CSS有一个导入选项，这让你把CSS分为更小，更易于维护的部分。唯一的缺点就是每次你在CSS中使用`@import` 时会创建另一个HTTP请求。Sass在构建顶部的CSS时不会有HTTP请求，Sass将接收把你导入的文件，并将其与它要导入的文件合并，以便可以将一个CSS文件提供给Web 浏览器。

假设你有几个Sass文件，`_reset.scss` 和`base.scss`。你要把`_reset.scss` 导入`base.scss` 中。

SCSS的语法

// _reset.scss
    
    html,
    body,
    ul,
    ol {
       margin: 0;
      padding: 0;
    }

// base.scss
    
    @import 'reset';
    
    body {
      font: 100% Helvetica, sans-serif;
      background-color: #efefef;
    }

注意我们 在`base.scss`文件中使用`@import'reset'；`。导入文件时，不需要包括文件扩展名`.scss`。 Sass很聪明的会为你找出来。当你生成CSS，你会得到：

html, body, ul, ol { margin: 0; padding: 0; }
    
    body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

## **混合** ##

CSS中的一些东西编写乏味，特别是与CSS3和许多供应商（指-webkit-XXXX等）前缀存在。 mixin允许你创建一组CSS声明，以便在整个网站中重复使用。 你甚至可以传递值来使你的mixin更灵活。 良好的使用mixin是供应商前缀。 这里有一个`border-radius`的例子。

SASS的语法

=border-radius($radius)
      -webkit-border-radius: $radius
      -moz-border-radius:    $radius
      -ms-border-radius:     $radius
      border-radius:         $radius
    
    .box
      +border-radius(10px)

SCSS的语法

@mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }
    
    .box { @include border-radius(10px); }

创建一个mixin，你需要使用`@mixin`指令并给它一个名字。 我们命名了我们的mixin `border-radius`。 我们还在括号中使用变量`$ radius`，因此我们可以传入任何我们想要的radius。 创建mixin后，你可以将其用作CSS声明，以`@include`开头，接着是mixin的名称。 当你的CSS生成它会是这样：

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

## **扩展/继承** ##

这是Sass最有用的功能之一。 使用`@extend`可以将一组CSS属性从一个选择器共享到另一个。 它有助于让你的Sass遵循DRY原则 （DRY是指Don’t Repeat Yourself特指在程序设计以及计算中避免重复代码）。 在我们的示例中，我们将创建一系列简单的消息传递，用于错误，警告和成功。

SASS的语法

.message
      border: 1px solid #ccc
      padding: 10px
      color: #333
    
    
    .success
      @extend .message
      border-color: green
    
    
    .error
      @extend .message
      border-color: red
    
    
    .warning
      @extend .message
      border-color: yellow

SCSS的语法

.message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }
    
    .warning {
      @extend .message;
      border-color: yellow;
    }

上面的代码允许你把`.message`中的CSS属性应用于`.success`，`.error`和`.warning`。 神奇的事情发生在生成的CSS，这帮助你避免在HTML元素上写多个类名。 是这个样子：

.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; }
    
    .success { border-color: green; }
    
    .error { border-color: red; }
    
    .warning { border-color: yellow; }

## **运算** ##

在CSS中做运算是非常有帮助的。 Sass有一些标准的数学运算符，如`+， - ，*，/和％`。 在我们的例子中，我们要做一些简单的数学计算`aside`和`article` 的宽度。

SASS的语法

.container
      width: 100%
    
    article[role="main"]
      float: left
      width: 600px / 960px * 100%
    
    
    aside[role="complementary"]
      float: right
      width: 300px / 960px * 100%

SCSS的语法

.container { width: 100%; }
    
    
    article[role="main"] { float: left; width: 600px / 960px * 100%; }
    
    aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }

我们创建了一个非常简单的960px的流式表格。 Sass中的运算让我们使用像素值的操作，并轻易的将其转换为百分比。 生成的CSS将如下所示：

.container { width: 100%; }
    
    article[role="main"] { float: left; width: 62.5%; }
    
    aside[role="complementary"] { float: right; width: 31.25%; }

[Sass Basics]: http://sass-lang.com/guide
[Link 1]: http://sass-lang.com/install