Sass基础

最新推荐文章于 2021-10-25 17:38:24 发布

zuci

最新推荐文章于 2021-10-25 17:38:24 发布

阅读量353

点赞数

分类专栏： web 文章标签： css

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

翻译自官方文档Sass Basics

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

预处理

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