XieYang-blog

sass基础入门

发表于 | 更新于 | 分类于 | 阅读次数 |

一、 SASS

sass 采用编程式的写法来编写样式表，最后编译成我们常见的css样式表。

二、 安装

  • SASS 由 Ruby 语言编写，但是不懂Ruby，不妨碍我们学习使用 SASS，因为两者之间没有关联性。
    唯一的条件是必须在 Ruby 环境下运行 SASS。

  • SASS 是普通的文本文件，兼容 css 语法。

  • SASS 文件的后缀名为 .sass 或者 .scss。严重推荐使用 .scss 写法

.sass 语法

1
2
3
4
5
6
7
body
  background: #eee
  font-size: 12px
p
  background: #0982c1
  span
    color: red

.scss 语法

1
2
3
4
5
6
7
8
9
10
11
body {
  background: #eee;
  font-size:12px;
}
p {
  background: #0982c1;
  
  span {
    color: red;
  }
}

Ruby 下载

sass中文网

安装 Ruby 之后，安装 SASS

1
gem install sass

三、 命令

显示 test.scss 文件编译后的 css 代码：

1
sass test.scss

将 test.scss 文件编译后的 css 代码保存到 test.css 文件：

1
sass test.scss test.css

或者写成

1
sass test.scss:test.css

1. 编译风格

  • nested：嵌套缩进的css代码，默认

  • expanded：没有缩进的、扩展的css代码

  • compact：简洁格式的css代码

  • compressed：压缩后的css代码，一般用于生产环境

i. 使用 nested 风格

1
sass test.scss test.css --style nested
1
2
3
4
5
6
7
body {
    background: #eee;
    font-size: 12px;}
p {
    background: #0982c1;} 
p span {
    color: red;}

ii. 使用 expanded 风格

1
sass test.scss test.css --style expanded
1
2
3
4
5
6
7
8
9
10
body {
    background: #eee;
    font-size:12px;
}
p {
    background: #0982c1;
}
p span {
    color: red;
}

iii. 使用 compact 风格

1
sass test.scss test.css --style compact
1
2
3
body {background: #eee;font-size:12px;}
p {background: #0982c1;}
p span {color: red;}

iv. 使用 compressed 风格

1
sass test.scss test.css --style compressed
1
body{background:#eee;font-size:12px;}p{background:#0982c1;}p span{color:red;}

2. 监听某个文件或目录，一旦文件被修改，立即编译

监听一个文件

1
sass --watch test.scss test.css

监听一个目录

1
sass --watch app/sass output/stylesheets

四、 基本写法

1. File Encoding

如果 SASS 文件中存在中文等其他字符，一般是注释，请在文件第一行写上：

1
@charset "utf-8";

参考文档

2. 变量

所有变量以 $ 开头

1
2
$width: 10px !default; // 默认变量
$height: 10px !global; // 全局变量

3. 变量的作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
$color: blue; // 定义变量1
nav {
  span {
    color: $color;
  }
  ul {
    $color: red; // 定义局部变量2，此处不会改变变量1（$color: blue）的值。
    color: $color;
  }
  p {
    color: $color;
  }
}

编译后

1
2
3
4
5
6
7
8
9
nav span{
  color: blue;
}
nav ul{
  color: red;
}
nav p{
  color: blue;
}

4. 选择器嵌套

使用 & 表示父级

1
2
3
4
5
6
7
8
9
10
#top_nav {
  a {
    padding: 0 10px;
    color: #fff;
    
    &:hover { // 父级（a元素）的hover状态
      color: $color;
    }
  }
}

编译后

1
2
3
4
5
6
7
8
#top_nav a {
  padding: 0 10px;
  color: #fff;
}

#top_nav a:hover {
  color: #ddd;
}

5. 属性嵌套

1
2
3
4
5
6
.wrap {
  font: {
    size: 14px;
    weight: bold;
  }
}

编译后

1
2
3
4
.wrap {
  font-size: 14px;
  font-weight: bold;
}

6. 混合申明

i. 无参数

1
2
3
4
5
6
7
8
@mixin radius1 {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.r1 {
  @include radius1;
}

ii. 有参数（ 变量[:默认值] ）

1
2
3
4
5
6
7
8
9
10
11
12
@mixin radius2($radius: 3px) {
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

.r2-1 {
  @include radius2; // 使用默认值
}

.r2-2 {
  @include radius2(20px); // 传递自定义参数
}

iii. 多个参数

  • 声明一个混合boxSize，有两个参数高度和宽度
  • 在.box中调用此混合并为赋值宽度100px，高度200px
1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin boxSize($width: 10px, $height: 100px) {
  width: $width;
  height: $height;
}

.box {
  @include boxSize(100px, 200px);
}

/* 另一种写法 */
.box2 {
  @include boxSize($width: 100px, $height: 200px);
}

编译后

1
2
3
4
5
.box,
.box2 {
  width: 100px;
  height: 200px;
}

iv. 多组值参数

1
2
3
4
5
6
7
8
9
@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}

.box-shadow {
  border: $width solid $color;
  @include box-shadow(0 2px 2px red, 0 3px 3px blue, 0 4px 4px yellow);
}

7. 继承

i. 简单继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
a {
  color: $color;
}

a:hover {
  text-decoration: underline;
}

.disabled {
  color: gray;
  @extend a; // 继承a元素
}

.hoverlink {
  @extend a:hover; // 继承a元素的hover状态
}

ii. 继承多个选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.one {
  @include boxSize(100px, 100px); //使用混合
}

.two {
  @extend .one;
  @extend .three;
  background: red;
  border: 5px solid #000;
}

.three {
  padding: 10px;
}

8. 选择器占位符 %

没有被继承的选择器占位不会被编译成css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
%bgd {
  background: #fff;
}

%mar {
  margin: 5px;
}

%pad {
  padding: 5px;
}

.btn {
  @extend %mar;
  @extend %pad;
}

.block {
  @extend %mar;
  span {
    @extend %pad;
  }
}

编译后 （此处没有编译scss中的占位选择器 %bgd ）

1
2
3
4
5
6
7
.btn, .block {
  margin: 5px;
}

.btn, .block span {
  padding: 5px;
}

五、 进阶

1. 数据类型

SassScript 支持的6种数据类型

  • 数字（例如 1.2、13、10px）
  • 文本字符串，无论是否有引号（例如 “foo”、’bar’、baz）
  • 颜色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）
  • 布尔值（例如 true、false）
  • 空值（例如 null）
  • 值列表，用空格或逗号分隔（例如 1.5em 1em 0 2em、 Helvetica, Arial, sans-serif）

SassScript 还支持所有其他 CSS 属性值类型，例如 Unicode 范围和 !important 声明。然而，它不会对这些类型做特殊处理。 它们只会被当做不带引号的字符串看待。

2. 插值语句 #{}

使用 #{} 插值语句 (interpolation) 时，有引号的字符串将被编译为无引号字符串
如果你希望在纯 CSS 中使用变量和斜杠（/）， 你可以用 #{} 包住变量。

1
2
3
4
5
6
p {
  $font-size: 12px;
  $line-height: 30px;
  font: $font-size/$line-height;       // => font: 0.4
  font: #{$font-size}/#{$line-height}; // => font: 12px/30px
}

编译后

1
2
3
p {
  font: 12px/30px;
}

在文本字符串中，#{} 形式的表达式可以被用来在字符串中添加动态值：

1
2
3
p:before {
  content: "I ate #{5 + 10} pies!";
}

编译后

1
2
3
p:before {
  content: "I ate 15 pies!";
}

3. 字符串运算：

i. “+” 可以用来连接字符

1
2
3
p {
  cursor: e + -resize;
}

编译后

1
2
3
p {
  cursor: e-resize;
}

ii. 有引号和无引号的连接规则：遵循 “+” 左边字符串的规则

1
2
3
4
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译后

1
2
3
4
p:before {
  content: "Foo Bar";
  font-family: sans-serif;
}

4. 空值（null）会被视作空字符串

1
2
3
4
$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

编译后

1
2
3
p:before {
  content: "I ate  pies!";
}

5. @if 判断

除非你的代码中有偏复杂的逻辑，否则没必要在日常开发的样式表中使用条件语句。
实际上，条件语句主要适用于库和框架。
无论何时，如果你感觉需要它们，请遵守下述准则：

  • 除非必要，不然不需要括号；
  • 务必在 @if 之前添加空行；
  • 务必在左开大括号( { )后换行；
  • @else 语句和它前面的右闭大括号( } )写在同一行；
  • 务必在右闭大括号( } )后添加空行；
  • 除非下一行还是右闭大括号( } )，那么就在最后一个右闭大括号( } )后添加空行。
1
2
3
4
5
6
7
8
9
10
11
p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  }
  @if 5 < 3 {
    border: 2px dotted;
  }
  @if null {
    border: 3px double;
  }
}

编译后

1
2
3
p {
  border: 1px solid;
}

@if @else 结合使用方法

1
2
3
4
5
6
7
p {
  @if 1 + 1 == 2 {
    width: 30px;
  } @else {
    width: 100px;
  }
}

编译后

1
2
3
p {
  width: 30px;
}

6. 三目运算符

1
if($condition, $condition_true, $condition_false)

三个参数分别表示：条件，条件为真的值，条件为假的值。

PS：这个 if 没有 @ 前缀，和 @if 判断不同

1
2
3
4
$fontBold: true;
p {
  font-weight: if($fontBold, bold, normal);
}

编译后

1
2
3
p {
  font-weight: bold;
}

7. for 循环

使用 @for 指令

@for 循环有两种方式：

1
@for $i from start through end {}

1
@for $i from start to end {}

$i: 表示变量

start: 表示起始值

end: 表示结束值

区别：through 表示包括 end 这个数，而 to 则不包括 end 这个数

i. through

1
2
3
4
5
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

编译后

1
2
3
4
5
6
7
8
9
10
11
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

ii. to

1
2
3
4
5
@for $i from 10 to 30 {
  .item-#{$i} {
    width: 2em * $i;
  }
}

编译后

1
2
3
4
5
6
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}

8. each 循环

each 循环就是去遍历一个列表，然后从列表中取出对应的值。

使用 @each 指令

1
@each $var in <list>

$var: 变量名
< list >: SassScript 的数据类型–值列表，它将返回一个列表值。

1
2
3
4
5
@each $animal in puma, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/course/img/#{$animal}.png');
  }
}

编译后

1
2
3
4
5
6
7
8
9
.puma-icon {
  background-image: url('/course/img/puma.png');
}``
.egret-icon {
  background-image: url('/course/img/egret.png');
}
.salamander-icon {
  background-image: url('/course/img/salamander.png');
}

9. while循环

使用 @while 指令

@while 指令需要 SassScript 表达式，并且会生成不同的样式块。

直到表达式的值为 false 时停止循环，这个和 for 循环很相似，只要 @while 后面的表达式的值为 true 就会执行。

1
2
3
4
5
6
7
$i: 6;
@while $i > 0 {
  .item-#{$i} {
    width: 2em * $i;
  }
  $i: $i - 2;
}

编译后

1
2
3
4
5
6
7
8
9
.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

///////////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////// 我是华丽的分割线 ///////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////

PS： 想开启开挂模式，请继续往下读

六、 函数

1. 颜色函数

  • rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

  • rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

  • red($color)：从一个颜色中获取其中红色值；

  • green($color)：从一个颜色中获取其中绿色值；

  • blue($color)：从一个颜色中获取其中蓝色值；

  • mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

测试：在终端中开启 SASS 的颜色计算

1
sass -i

根据 r:200, g:40, b:88 计算出一个十六进制颜色值: #c82858

1
rgb(200,40,88)

根据 #c82858 的 65% 透明度计算出一个 rgba 颜色值: rgba(200, 40, 88, 0.65)

1
rgba(#c82858,.65)

从 #c82858 颜色值中得到红色值200 200

1
red(#c82858)

从 #c82858 颜色值中得到绿色值40 40

1
green(#c82858)

从 #c82858 颜色值中得到蓝色值88 88

1
blue(#c82858)

把 #c82858 和 rgba(200, 40, 88, .65) 两颜色按比例混合得到一个新颜色 rgba(200, 40, 80, 0.65105)

1
mix(#c82858, rgba(200,40,80,.65), .3)

2. 列表函数

  • length($list)：返回一个列表的长度值；

    PS: length()函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错

  • nth($list, $n)：返回一个列表中指定的某个标签值

  • join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；

  • append($list1, $val, [$separator])：将某个值放在列表的最后；

  • zip($lists…)：将几个列表结合成一个多维的列表；

  • index($list, $value)：返回一个值在列表中的位置值。

1
2
3
4
5
6
7
8
9
10
11
length(10px); // 1
length(10px 20px (border 1px solid) 2em); // 4
length(border 1px solid); // 3
length(10px,20px,(border 1px solid),2em); // SyntaxError: wrong number of arguments (4 for 1) for `length'

index(1px solid red, 1px); // 1
index(1px solid red, solid); // 2
index(1px solid red, red); // 3

// 1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000
zip(1px 2px 3px, solid dashed dotted, green blue red);

3. 更多函数请查阅文档

其实 SASS 函数在一般的项目中基本用不上，除了写写插件装装B，能用上的场合是…… 思来想去，也没想出来那里用最合适！！

🐶 您的支持将鼓励我继续创作 🐶