Sass语法教程

黑面前端小书生

已于 2024-09-11 11:10:13 修改

阅读量59

点赞数

文章标签： sass 前端 css

于 2024-09-11 11:05:29 首次发布

本文链接：https://blog.csdn.net/qq_58096041/article/details/142134349

版权

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);
  }
}