Sass基础使用值变量、嵌套、混合、条件语句、循环、函数等功能,使用sass(css)实现背景星光效果。
miXins
/*
声明 混入样式
@mixin button
支持传参 和 默认值
*/
@mixin button($color, $textColor: #fff) {
background: $textColor;
color: $color;
padding: 10px;
&:hover {
background: #00f;
}
}
@mixin flex($justify: flex-start, $align: flex-start, $grow, $flex) {
display: flex;
flex-grow: $grow;
justify-content: $justify;
align-items: $align;
flex: $flex;
}
@mixin dv($block) {
$B: 'dv-' + $block;
.#{$B} {
@content;
}
}
@mixin deep() {
:deep() {
@content;
}
}
/*
使用 混入
@include 混入名称(...参数)
*/
.a {
@include button(#f40, #ff0);
}
@include dv('abc') {
}
@include deep() {
}
extend
.my-button {
@extend .a;
}
运算
数学运输
/*
可带px单位进行运算
+ - * / %
*/
$width: 200px;
$height: 100px;
.box {
width: $width / 2;
height: $width * 1;
margin-bottom: ($width + $height) - ($height % 3);
}
逻辑运算
// and, or, not
$is-active: false;
$is-hover: true;
.btn {
@if $is-active and $is-hover {
color: red;
}
@if $is-active or $is-hover {
border-color: red;
}
@if not $is-hover {
display: none;
}
}
function
内置函数
颜色函数:
lighten: 将颜色变亮
darken: 将颜色变暗
mix: 混合两种颜色
rgba: 添加透明度
....等等
自定义函数
@function add($a, $b) {
@return $a + $b;
}
.box {
width: add(100px, 200px);
color: mix($color: #000000, $color: #000000, $weight: 0.5);
}
if else
$color2: red;
@if $color2 == red {
.box {
background-color: $color2;
}
} @else if $color2 == blue {
.box {
background-color: $color2;
color: white;
}
} @else {
.box {
background-color: green;
}
}
循环
for
/*
@for $变量 from 起始值 through 结束值
through: 包含结束值
to: 不包含结束值
*/
@for $i from 1 through 5 {
.item-#{$i} { // item-1 => item-5
width: 20px * $i;
}
}
@for $i from 1 to 5 {
.item-#{$i} { // item-1 => item-4
height: 20px * $i;
}
}
each
// @each $变量 in 集合
$colors: red, green, blue;
@each $color in $colors {
.bg-#{$color} { // 生产类名 .bg-red, .bg-green, .bg-blue
background-color: $color;
}
}
while
// @while 条件
$i: 1;
@while $i < 6 {
.item-#{$i} { // item-1 => item-5
width: 20px * $i;
}
$i: $i + 1;
}
使用实例 - 星光效果
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./star_move.css">
</head>
<body>
<div id="app">
<div class="level-1"></div>
<div class="level-2"></div>
<div class="level-3"></div>
<div class="level-4"></div>
<div class="level-5"></div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html, body, #app {
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.5);
}
@function render-circle($num) {
@if $num <= 0 {
@return random($circle-count);
} @else {
$shadow: '#{random(100)}vw #{random(100)}vh #fff';
@for $i from 1 through floor($num) {
$shadow: '#{$shadow}, #{random(100)}vw #{random(100)}vh #fff';
}
@return unquote($shadow);
}
}
$duration: 400s;
$circle-count: 1000;
$size: 5;
@for $i from 1 through 5 {
$duration: $duration / 2;
$circle-count: floor($circle-count / 2);
.level-#{$i} {
position: fixed;
left: 0;
top: 0;
width: #{$i}px;
height: #{$i}px;
border-radius: 50%;
box-shadow: render-circle($circle-count);
animation: moveUp $duration linear infinite;
&::after {
content: '';
position: absolute;
left: 0;
top: 100vh;
width: inherit;
height: inherit;
border-radius: 50%;
box-shadow: inherit;
}
}
}
@keyframes moveUp {
to {
transform: translateY(-100vh);
}
}