SASS 和 SCSS 的区别和关系

SASS 和 SCSS 其实都是 SASS，只是语法稍微不同，文件后缀扩展名不同。以下是差别展示：

SASS 的特点：语法类似 Python 使用缩进区分代码块，更为简洁明了

以下为 1px.sass 文件的内容：

.top_1px_run
  font-size: 14px
  transition:
    property: font-size
    duration: 4s
    delay: 2s

  &:hover
    font-size: 36px

SCSS 的特点：和 CSS 的语法非常接近，从CSS迁移更轻松

以下为 1px.scss 文件的内容：

.top_1px_run {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

所以 SCSS 之间的切换就是 {;} 的差异。自己也可以轻松在 SCSS 和 Sass 间转换。

以上内容最终生成的 css 内容如下：

.top_1px_run {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.top_1px_run:hover {
  font-size: 36px;
}

安装sass

npm(General)

npm install -g sass

JavaScript 实现，运行的速度比其它微慢。

Chocolatey(windows)

choco install sass

Homebrew(macOS)

brew install sass/sass/sass

编译

监听自动编译

用 –watch 参数来监视单个文件或目录。每次保存 Sass 文件时重新编译为 CSS。

sass --watch input.scss output.css

可以使用文件夹路径作为输入和输出， 并使用冒号分隔它们，来监听文件并输出到目录。 Sass 将会监听 app/sass 目录下所有文件的变动，并 编译 CSS 到 public/stylesheets 目录下。

sass --watch app/sass:public/stylesheets

手动编译

sass input.scss output.css

书写

基本结构和嵌套

nav
  ul
    margin: 0
    list-style: none

  li
    display: inline-block

  a
    text-decoration: none

变量

$color-black: #000
$border-dark: rgba($color-black, 0.88)

body
  color: $color-black
  border: 1px solid $border-dark

引入文件

无需后缀，直接写文件名，如果有不在同一目录需要加上目录

@use 'base'

Mixins(化繁为简)

针对浏览器内核简化书写的举例

SASS

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.box
  +transform(rotate(30deg))

CSS

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Extend/Inheritance(扩展继承？)

SASS

/* 编译时会智能整合？ */
%message-shared
  border: 1px solid #ccc
  padding: 10px
  color: #333


// 没有被使用所以编译会忽略.
%equal-heights
  display: flex
  flex-wrap: wrap


.message
  @extend %message-shared


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

CSS

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

.success {
  border-color: green;
}

操作符(运算)

Sass 支持一些标准的数学运算符，如 +、-、*、/ 和 %。

以下案例简单的流式网格，以 960px 作为基准。利用 Sass 中的操作符 像素值转换为百分比的操作

SASS

.container
  width: 100%


article[role="main"]
  float: left
  width: 600px / 960px * 100%


aside[role="complementary"]
  float: right
  width: 300px / 960px * 100%

CSS

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

改变颜色

使用方式：

body{
  background: darken(desaturate(#af0, 65%), 10%);
  color: darken(#af0, 10%);
}

代码解说：

darken 和 desaturate 是改变颜色的方法，#af0 是初始的颜色值， 65% 和 10 % 是改变的值（调整比例）。可以嵌套多个方法，也可以只使用一个方法

改变颜色的方法说明：

  • lighten: 变亮
  • darken: 变暗
  • saturate: 增加饱和度
  • desaturate: 降低饱和度

更多资料

CC BY-NC-SA 4.0 声明
本文采用 CC BY-NC-SA 4.0方式授权。
转载请注明出处和本文链接，说明是否进行修改，不得用于商业用途，使用相同方式共享。