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,能用上的场合是…… 思来想去,也没想出来那里用最合适!!

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