Sass初识

一、简介

前言

因为 CSS 本身语法不够强大,导致重复编写一些代码,无法实现复用,而且在代码也不方便维护。
所以 Sass 引入可以合理的样式复用机制,增加了规则、变量、混入、选择器、继承、内置函数等等特性。

Sass (英文全称:Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的 层叠样式表语言

  • Sass 是一个 CSS 预处理器。
  • Sass 是 CSS 扩展语言,是CSS的超集,可以帮助我们减少 CSS 重复的代码,节省开发时间。
  • Sass 完全兼容所有版本的 CSS。
  • Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承、内置函数等等特性。
  • Sass 生成良好格式化的 CSS 代码,易于组织和维护。
  • Sass 文件后缀为 .scss

官网:https://sass-lang.com
中文网:https://www.sass.hk

 

Sass预处理器

浏览器并不支持 Sass 代码。因此,需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。可以去官网查看安装教程。

命令
  • sass xxx.scss xxx.css
    从终端运行thesass命令,可以将Sass编译为CSS。

  • sass --watch input.scss output.css
    使用--watch标志观看单个文件或目录的,可以在每次保存Sass时重新编译CSS。

  • sass --watch app/sass:public/stylesheets
    可以使用文件夹路径作为输入和输出,并用冒号将它们分开,来观察和输出到目录。

可以使用

 

二、应用

.html文件当中是不能直接使用Sass, 需要.scss转译成.css,并引入生成的.css文件进行使用,项目结束后根据需要是否删除 .scss 文件和 .map文件。

变量

可以用来存储需要重复使用的CSS值等内容,例如:颜色、字体堆栈等等。
使用 $符号进行声明。

示例:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

嵌套

Sass将允许您以遵循HTML相同视觉层次结构的方式嵌套CSS选择器。使CSS具有更佳的可读性。

示例:
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

 

部分

部分是带有前导下划线的Sass文件。你可以把它命名为_partial.scss
让Sass预处理器知道该文件只是一个部分文件,它不应该生成成CSS文件。Sass部分与@use规则一起使用。

 

模块

可以使用@use规则 拆分 .scss,此规则将另一个Sass文件加载为模块。

####### 示例:

// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

 

混合

Sacc允许制作一组CSS声明,并在整个站点中重复使用。需要使用@mixin@include规则。

示例:
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}
示例解析:

要创建混和,先使用@mixin指令进行命名,示例命名了混合theme,且在括号内使用变量$theme,这样可以传递任何的主题。创建@mixin后,可以将其用作以@include开头的CSS声明,后跟@mixin的名称。

 

继承/扩展

使用@extend,可以将一组CSS属性从一个选择器共享到另一个选择器。

作用:

  • 只有在扩展时才会打印,并且可以帮助保持编译的CSS整洁。
  • 有助于避免在HTML元素上写入多个类名。
示例:
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

.css
/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

引申:
这个示例也可以通过混合的规则实现,不过在生成.css的文件里面,代码的简洁性上不如扩展。

 

运算符

Sass有少数标准数学运算符,如+-*math.div()%

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容