sass用法指南

作者: 恩爱狗子 | 来源:发表于2018-11-13 14:05 被阅读0次

介绍

sass 是什么？在sass的官网，它是这么形容给自己的
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.（sass 是世界上最成熟稳定强大的css扩展语言。）
sass并不是一种编程语言，Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。但是我们可以用于开发网页样式，可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件，这就是sass。

特色

css兼容性：Sass与所有版本的CSS完全兼容
功能丰富：在 CSS 语言基础上添加了扩展功能
成熟：Sass由其热爱的核心团队积极支持十多年
社区：Sass由几家科技公司和数百名开发商的联盟积极支持和开发。
架构：有无数的框架与Sass建立。 Compass, Bourbon, Susy 等等

安装

npm
npm install sass
Homebrew
brew install sass
gem
gem install sass

如果你使用的是 Windows，就需要先安装 Ruby。
更多安装sass方法

语法

Sass 有两种语法。

SCSS (Sassy CSS)：是一个 CSS3 语法的扩充版本。SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。这种语种语法的样式表文件需要以 .scss 扩展名。
Sass：提供了一种更简洁的 CSS 书写方式。通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。缩排语法具有 Sass 的所有特色功能，有些语法上稍有差异。使用此种语法的样式表文件需要以 .sass 作为扩展名。

两种语法可以通过使用sass-convert 命令行工具将 Sass和SCSS相互转换。

//将 Sass 转换为 SCSS
sass-convert test.sass test.scss

//将 SCSS 转换为 Sass
sass-convert test.scss test.sass

使用 Sass

将sass编译为css
sass input.scss output.css
Sass 监视文件的改动并更新 CSS
sass --watch input.scss:output.css
Sass 监视整个目录
sass --watch assets/sass:public/stylesheets
Sass会查看文件assets/sass夹中的所有文件以进行更改，并将CSS编译到该public/stylesheets文件夹。

1.变量

在实际开发过程中，一个项目像主要的颜色，或者说所有border的样式，这些比较重要的变量是在项目中重复使用的，可以使用$来定义变量。如果遇到突然项目整一个的border的颜色要改变，那么我们直接修改定义的变量border的颜色就可以了。

//定义变量
$primary-border:1px solid #eee;
$primary-color:#488aff;

// 使用变量
.test{
  border: $primary-border;
  color: $primary-color;
}
//编译后css
.test {
  border: 1px solid #eee;
  color: #488aff;
}

2.嵌套

sass允许css规则彼此嵌套，它具有明确的嵌套和可视化层次结构。可是请注意过度的嵌套会导致后期难以维护。

//嵌套使用
#main{
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
  
//编译后css
#main {
  color: #00ff00;
  width: 97%;
}
#main .redbox {
  background-color: #ff0000;
  color: #000000;
}

引用父选择符：&

使用&来替代父选择器，&必须在复合选择器的开头，甚至可以跟一个被添加到父选择器的后缀

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
  &-sidebar {
  border: 1px solid; 
  }
}

//css 输出
#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}
#main-sidebar {
  border: 1px solid;
}

嵌套属性

比如font-family，font-size和font-weight都在font命名空间,如果在同一个命名空间设置很多它的属性，挺麻烦的，sass提供这样的方式，只要写一次命名空间，然后嵌套他的每个子属性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

//css输出
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

属性名称空间本身还可以有一个值,例如：

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

//css输出
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

3.注释

Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留，而单行注释编译后就被删掉了。

/* 我是
 * 多行
 * 注释
 */
//我是我是我是单行注释
body {
  color: black;
}

//css输出
/* 我是
 * 多行
 * 注释
 */
body {
  color: black;
}

如果是很重要的注释，即使是压缩模式编译后也存在/*加一个感叹号

/*！
 * 超级重要注释
 */

在注释中也可以使用变量

$version: "1.0.0";
/* 版本号 #{$version}. */

编译后

/* 版本号 1.0.0. */

4.Import

假设现在有两个sass文件，bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。然而导入的可是css文件，http:// 或者是url()

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以一个import导入多个
@import "rounded-corners", "text-shadow";

//_part.scss
ul,
ol {
  margin:  0;
  padding: 0;
}
//base.scss
@import '_part.scss';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import嵌套导入

例如现在有一个这个example.sass文件里面有以下内容
.example {color: red;}
导入example
#main {@import "example";}
编译结果
#main .example {color: red;}

5.Mixin

我们使用@mixin定义一个代码块，然后用@include调用这个代码块。

@mixin border{
  border:1px solid #ee;
}
div{
  @include border
}
//编译后：
div {
  border: 1px solid #ee;
}

还可以指定参数

@mixin border($color:#eee){
  border:1px solid $color;
}
div{
  @include border(#eee);
}

6.颜色

颜色值支持所有算术运算p { color: #010203 + #040506;}
计算01 + 04 = 05，，02 + 05 = 07和03 + 06 = 09，并编译为：
p {color: #050709; }

p {color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);}
编译为p {color: rgba(255, 255, 0, 0.75); }
它还提供了一些内置的颜色函数
hsl（$ hue，$ saturation，$ lightness）：从色调，饱和度和亮度值创建颜色。
hsla（$ hue，$ saturation，$ lightness，$ alpha）：从色调，饱和度，亮度和Alpha值创建颜色。
还有更多的关于内置的颜色函数可以看这里 →更多

7.继承@extend

sass允许一个选择器去继承另外一个选择器.
.test2 {@extend .test1;color:white;}
.test1 {border: 1px solid #eee;}
编译后
.test1, .test2 {border: 1px solid #eee;}
.test2 {color: white;}

8.@debug @warn @error

@debug和@warn，指令将SassScript表达式的值打印到标准错误输出流，它有助于调试。

@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"
console输出
WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出

9.控制指令和表达式

sass支持基本的控制指令和表达式控制，指令是高级功能，下来来介绍一下。

@if()

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
}
//编译输出
p {
  border: 1px solid; 
}

@if声明可以跟着几个@else，@if语句和一个@else语句。如果@if语句失败，@else if则会按顺序尝试这些语句。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//编译后
p {
  color: green; 
}

@for

该@for指令重复输出一组样式。对于每次重复，使用计数器变量来调整输出。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译后
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译后
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//编译后
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

10.功能指令#function

可以在sass中定义自己的函数，并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。

//定义变量
$grid-width: 40px;
$gutter-width: 10px;

//自定义函数
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

//使用
#sidebar { width: grid-width(5); }

//编译结果
#sidebar {
  width: 240px;
}

编译

sass编译输出的默认CSS样式，可以执行-style命令行来选择四种不同的输出样式

:nested

nested样式是默认的Sass样式，因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行，但缩进不是常量。根据嵌套的深度，每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用：它可以让您轻松掌握文件的结构，而无需实际读取任何内容。

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

:expanded

expanded是一个更典型的人造CSS风格，每个属性和规则占一线。属性在规则中缩进，但是规则不以任何特殊方式缩进。

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

:compact

compact采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行，每行都在该行上定义。嵌套规则彼此相邻，没有换行符，而单独的规则组在它们之间具有换行符。

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

:compressed

compressed样式占用尽可能少的空间，除了分隔选择器和文件末尾的换行符之外，没有空格。它还包括一些其他轻微的按压，例如选择最小的颜色表示。这并不意味着人的可读性。
#main{color:#fff;background-color:#000}#main p{width:10em}

sass官网
 sass github
在线将sass编译为css