Sass
# 概述
Sass是Css预处理语言 , 又称Scss , 采用Ruby语言编写 , Sass完全兼容 普通的CSS代码
语法格式 :
- Sass(后缀名.sass)
- SCSS(后缀名.scss)
SCSS的使用更加广泛 , 所以Sass通常被当作SCSS的别名
# 语法
# 变量
用于存储样式的值方便复用
$color: green;
.div{
background-color: $color;
}
可以定义更多中类型 , 包括 :
| 类型 | 示例 |
|---|---|
| 字符串 | $name: 'Sans'; |
| 数字 | $age: 30; |
| 布尔值 | $is-login: true; |
| 空值 | $nothing = null; |
| 列表 | $px: 5px 10px 15px 20px; |
二级变量
二级变量 , 可以理解为 变量中的变量 , 有封装变量的作用 , 赋予结构化和维护性
$brand-primary: blue;
$text-font: Helvetica;
$link: {
color: $brand-primary;
text-decoration: none;
}
a {
color: $link-color; // 采用 变量link中的color变量 : blue
font-family: $text-font; // 采用 变量text-font : Helvetica
}
# 嵌套
将一个选择器 嵌套 另一个选择器 , 表示继承关系
嵌套使用使得和HTML标签应用更加贴合 , 更加直观
选择器嵌套
.parent{
color: red;
.child{
font-size: 16px;
}
}
属性嵌套
.box{
font: {
family: sans-serif;
size: 16px;
weight: bold;
}
}
# 混合
用于对使用的样式进行 @mixin 封装起来 , 使用的使用通过 @include 进行调用
这样可以避免大量重复使用的代码 , 大大提高可维护性!!
@mixin center {
display: flex;
align-items: center;
justify-content: center;
}
.banner {
@include center;
height: 200px;
}
带参引用
@mixin flex($direction) {
display: flex;
flex-direction: $direction;
}
.box1 {
@include flex(row);
}
.box2 {
@include flex(column);
}
参数默认值
@mixin flex($direction: row) {
display: flex;
flex-direction: $direction;
}
.box1 {
@include flex; // 使用默认值row
}
.box2 {
@include flex(column);
}
# 继承
可通过 @extend 继承选择器的样式 , 意图 减少冗余代码
.btn {
color: red;
}
.danger-btn {
@extend .btn;
background: red;
}
注意
- 过度使用 继承 会影响性能
- 继承的顺序 , 被继承样式可能被覆盖 , 样式优先级会影响
- 嵌套继承 , 样式期望会难以预料
# 进阶
# 计算
Sass提供了计算功能 , 可以直接在样式中使用 加/减/乘/除 运算
基本应用
.container {
margin: 10px 20px;
width: 100px - 40px; // 100px - 40px = 60px
}
字符串
.message {
content: 'Hello ' + 'World!'; // 字符串连接
}
更多应用还得搭配内置函数使用
# 函数
Sass提供了丰富的内置函数 , 同时也支持自定义函数 , 大大增强了其功能
# 内置函数
以下为常用的内置函数 , 更多内置函数 :
- 官网 : sass-lang.com (opens new window)
- Sitepoint参考手册 : sass.bootcss.com (opens new window)
颜色函数
| 函数 | 说明 |
|---|---|
| lighten($color, $amount) | 返回一个浅色版本的$color |
| darken($color, $amount) | 返回一个深色版本的$color |
| saturate($color, $amount) | 返回一个更饱和的$color |
| desaturate($color, $amount) | 返回一个减饱和的$color |
| grayscale($color) | 将$color转换为灰度 |
| complement($color) | 返回$color的补色 |
.box {
background: lighten(red, 30%);
border: 1px solid darken(blue, 20%);
}
字符串函数
| 函数 | 说明 |
|---|---|
| quote($string) | 将$string包裹在引号内 |
| unquote($string) | 删除$string两端的引号 |
| str-length($string) | 返回$string的长度 |
.box {
content: quote('Hello'); // 返回'Hello'
font-size: str-length('Hi'); // 返回2
}
数值函数
| 函数 | 说明 |
|---|---|
| round($number) | 对$number进行四舍五入 |
| ceil($number) | 对$number进行向上取整 |
| ceil($number) | 对$number进行向上取整 |
| floor($number) | 对$number进行向下取整 |
| abs($number) | 返回$number的绝对值 |
| max($numbers...) | 返回$numbers中的最大值 |
| min($numbers...) | 返回$numbers中的最小值 |
| random($number) | 返回0-$number的随机数 |
.box {
width: round(10.25px); // 返回10px
height: ceil(10.1px); // 返回11px
position: abs(-5px); // 返回5px
font-size: max(100px, 3em, 20%); // 返回20%
}
列表函数
| 函数 | 说明 |
|---|---|
| nth($list, $n) | 返回$list中的第$n个元素 |
| index($list, $value) | 返回$value在$list中的位置 |
| join($list1, $list2, $separator) | 使用$separator将$list1和$list2连接 |
$px: 5px 10px 15px 20px;
$em: 1em 2em;
.box {
margin: nth($px, 2); // 返回 10px
padding: index($px, 15px); // 返回 3
font-size: join($px, $em, ', '); // 返回 5px, 10px, 15px, 1em, 2em;
}
# 自定义函数
按照自己意愿写的逻辑定义的函数
@function double($n) {
@return $n * 2;
}
.box {
margin: double(5px); // 返回10px
}
默认参数
@function add($n, $amount: 10px) {
@return $n + $amount;
}
.box {
padding: add(5px); // 使用默认值,返回15px
margin: add(5px, 20px); // 返回 25px
}
# 条件语句
根据表达式判断走向 , 和平常的 if差不多
@if
$screen: 768px;
.container {
width: 100%;
// 如果$screen < 768px条件成立 , 会输出max-width: 768px;样式
@if $screen < 768px {
max-width: $screen;
}
}
@else
$screen: 768px;
.container {
width: 100%;
@if $screen > 768px {
max-width: 960px;
} @else {
max-width: $screen;
}
}
@else if
$screen: 600px;
.container {
width: 100%;
@if $screen > 768px {
max-width: 960px;
} @else if $screen > 600px {
max-width: 750px;
} @else {
max-width: $screen;
}
}
# #{}插值
Sass提供 #{} 插值语法 , 可以在 选择器名/属性名/CSS规则 中使用变量
基本用法
$name: foo;
.#{$name} {
background: blue;
}
// 结果
.foo {
background: blue;
}
属性名和CSS规则
$attr: border;
$color: red;
.[foo] {
#{$attr}-color: $color;
}
// 结果
.foo {
border-color: red;
}
注意
- 插值只能使用变量 , 不支持直接使用 数值/字符串
- 变量名外不需要加上$
- 插值嵌套使用时 , 需要使用#{}包裹住插值内容
- #{}插值不能用于CSS注释 /* */ 中
# Maps
Sass提供Maps数据结构 , 相当于JavaScript的Object对象
基本用法
$font-weights: (
light: 300,
normal: 400,
semibold: 600,
bold: 700
);
.content {
font-weight: map-get($font-weights, normal); // 400
}
Mpas函数
| 函数 | 说明 |
|---|---|
| map-get($map, $key) | 根据$key获取$map中对应的值 |
| map-keys($map) | 获取$map中的所有key |
| map-values($map) | 获取$map中的所有value |
| map-has-key($map, $key) | 判断$map是否有$key键 |
| map-merge($map1, $map2) | 将$map2合并到$map1中 |
注意
- key 字面量/变量/字符串 , value 任意类型
- key 必须唯一
- Maps 可以嵌套应用
# selectors
Sass提供selectors数据结构 , 相当于数组的存储 , 一般用于存储一组 选择器名
$selectors: ".btn", ".submit", ".delete";
搭配 @each 使用
# 遍历
Sass提供 @each 指令可以遍历 selectors列表/maps结构 , 为每个item输出对应的样式
遍历 selectors列表
$buttons: ".btn", ".submit", ".delete";
@each $button in $buttons {
#{$button} {
background: blue;
color: white;
}
}
// 结果
.btn {
background: blue;
color: white;
}
.submit {
background: blue;
color: white;
}
.delete {
background: blue;
color: white;
}
遍历 maps结构
$fonts: (
header: helvetica,
content: verdana,
footer: georgia
);
@each $key, $value in $fonts {
#{$key} {
font-family: $value;
}
}
// 结果
header {
font-family: helvetica;
}
content {
font-family: verdana;
}
footer {
font-family: georgia;
}
# @use和@forward
Sass中两个重要的模块化功能 , 可以实现样式的按需加载和嵌套继承的作用
@use
// 外部文件 myStyle.scss
$primary: blue;
// 引用 (一般情况有前缀路径)
@use "myStyle";
.content {
// 需求前缀指定来源
color: myStyle.$primary;
}
// 结果
.content {
color: blue;
}
@forward
// 外部文件 myStyle.scss
.btn {
background: blue;
}
// 引用
@forward "buttons";
.primary-btn {
@extend .btn;
color: red;
}
//结果
.btn {
background: blue;
}
.primary-btn {
@extend .btn;
color: red;
}
@use与@forward区别
| @user | @forward | |
|---|---|---|
| 加载方式 | 文件导入 | 继承文件样式 |
| 命名空间 | 添加文件名作为前缀 | 不会产生前缀 |
| 样式加载 | 按需加载 | 文件后置所有加载 |
以上为快速入门的引导 . 目前在写项目 , 个人前后端都干了 , 主打后端 , 前端用到哪就学到哪!