scss 是 css 的超集, 主要是引入了 变量, 函数, 继承, 算术计算。

  1. 选着器嵌套
nav {
	ul {
	margin:0;
	}
}
  1. $ 定义变量与使用
$font-stack: Helvetica, sans-serif;
$primary-color:#333

body {
font: 100% $font-stack;
color: $primary-colorl
}
  1. @mixin 定义函数, @include 调用
# theme: 函数名
# arg: 函数参数
# DarkGray: 默认值
@mixin theme($arg: DarkGray){
backgroundz:$arg;
}
# 调用
.info {
@include theme;
}
.alert {
@include theme($arg:DarkRed);
}
  1. % 基类 -> @extend 扩展
# 定义 %equal-heights 基类
%equal-heights{
display:flex;
}
# 使用
.message{
@extend %equal-heights;
background:#333;
}
  1. @use "sass:math"; -> + - * math.dev() %
@use "sass:math";
.container{
display:flex;
}
article[role="main"] {
width:math.div(600px,960px)*100%;
}

  1. 引用 @import 引入其他文件以_开头的文件
# 引入 _base.scss 文件, _base.scss本身不能生成css文件
@import 'base' 
.inverse {
background-color: base.$primary-color;
}

参考:

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部