SASS基本用法指南

作者: tww844475003 分类: 前端开发 发布时间: 2021-06-26 22:46

什么是 SASS ?

Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

安装及使用

  • 安装
npm i -g sass

  • 使用

在命令行中运行 Sass

sass input.scss output.css

监视单个 Sass 文件,每次修改并保存时自动编译:

sass --watch input.scss:output.css

监视整个文件夹:

sass --watch app/sass:public/stylesheets

基本用法

  • 变量
$width: 100px;
.block {
   width: $width;
}
  • 数据类型
  1. 数字,1, 2, 13, 10px
  2. 字符串,有引号字符串与无引号字符串,"foo", 'bar', baz
  3. 颜色,blue, #04a3f9, rgba(255,0,0,0.5)
  4. 布尔型,true, false
  5. 空值,null
  6. 数组 (list),用空格或逗号作分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  7. maps, 相当于 JavaScript 的 object,(key1: value1, key2: value2)
  • 运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值。

关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型。

.block {
  $width: 100px;
  height: (100px/2);
  margin-left: $width - 100px/2px;
}
  • 函数
.block {
  color: hsl(0, 100%, 50%);
}
  • 插值语句
$name: foo;
$attr: border;

.block.#{$name} {
  #{$attr}-color: blue;
}
  • @import
  1. 文件拓展名是 .css
  2. 文件名以 http:// 开头;
  3. 文件名是 url()
  4. @import 包含 media queries。
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
  • 嵌套 @import
.example {
  color: red;
}

.block {
  @import "example";
}
  • @media
.block {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
  • @extend
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.block {
  @extend .error;
  border-width: 3px;
}
  • @if
$score: S;
p {
  @if $score == S {
    font-size: 20px;
  } @else if $score == A {
    font-size: 18px;
  } @else if $score == B {
    font-size: 16px;
  } @else if $score == C {
    font-size: 14px;
  } @else {
    font-size: 12px;
  }
}
  • @for
@for $i from 1 through 3 {
  .item-#{$i} { font-size: 12px * $i; }
}
  • @each
@each $score in S, A, B, C, D{
  .#{$score }-icon {
    background-image: url('/images/#{$score }.png');
  }
}
  • @while
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 1;
}
  • 定义混合指令 @mixin (Defining a Mixin: @mixin)
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
  • 参数 (Arguments)
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
.block { @include sexy-border(blue, 1in); }

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
  • 函数指令 (Function Directives)
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
  • 输出格式 (Output Style)

:nested

Nested (嵌套)样式是 Sass 默认的输出格式,能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行,缩进量与 Sass 文件中一致,每行的缩进量反映了其在嵌套规则内的层数

:expanded

Expanded 输出更像是手写的样式,选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:compact

Compact 输出方式比起上面两种占用的空间更少,每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compressed

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed 输出方式删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注