CSS进阶和SASS

一、CSS进阶

1.1、CSS变量

1.2、CSS属性值的计算过程

1.3、做杯咖啡

1.4、下划线动画

1.5、CSS中的混合模式(Blending)

二、SASS

2.1、Sass的颜色函数

2.2、Sass的扩展(@extend)和占位符(%)、混合(Mixin)

一、CSS进阶

1.1、CSS变量

基础应用：父子元素的css属性存在一定的关系

html 复制代码

  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>

css 复制代码

    <style>
      /* :root相当于html元素 */
      :root {
        --size: 250px;
      }
      .container {
        --gap: calc(var(--size) / 10);
        width: var(--size);
        height: var(--size);
        background-color: red;
        padding: var(--gap); /* 25px */
        margin: var(--gap);
      }
      .item {
        width: calc(var(--size) / 2); /* 125px */
        height: calc(var(--size) / 2);
        background-color: yellow;
      }
    </style>

小球从左到右滚动：

html 复制代码

    <style>
      .container {
        width: 40%;
        height:200px;
        border: 3px solid black;
        position: relative;
        margin: 0 auto;
      }
      .item {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
        left: 0;
        top: 30px;
        position: absolute;
        animation: move 4s linear infinite;
      }
      @keyframes move {
        50% {
          transform: translateX(calc(var(--w) - 100%));
        }
      }
    </style>
  <body>
    <script>
      const container = document.querySelector(".container");
      // 相当于 <div class="container" style="--w: 758px;">
      const w = container.clientWidth;
      container.style.setProperty("--w", w + "px");
    </script>
  </body>

1.2、CSS属性值的计算过程

先确定声明值---层叠(权重)---继承---使用默认值---最后显示到页面

1.3、做杯咖啡

杯身path图形： SvgPathEditor

html 复制代码

    <style>
      body {
        background-color: #cebca6;
      }
      .cup {
        width: 160px;
        height: 162px;
        margin: 300px auto;
        position: relative;
      }
      /* 杯口 */
      .cup::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20px;
        background-color: rgba(247, 247, 247, 0.5);
        left: 0;
        top: -10px;
        border-radius: 50%;
      }
      /* 杯身 */
      .cup-body {
        height: 100%;
        background-color: rgba(247, 247, 247, 0.9);
        clip-path: path(
          "m 0 0 q 4.59 145.8 34.425 155.52 c 29.835 8.1 68.85 8.1 96.39 0 q 29.835 -9.72 29.835 -155.52 C 143 11 16 13 0 0 Z"
        );
        display: flex;
        flex-direction: column-reverse;
      }
      .layer {
        text-align: center;
        height: 50px;
        border-radius: 80px/10px;
        position: relative;
      }
      /* 每一层的水面 */
      .layer::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 20px;
        background: inherit;
        top: 0;
        left: 0;
        border-radius: 50%;
      }
      .layer:nth-child(n + 2) {
        margin-bottom: -20px;
      }
      .espresso {
        background-color: rgba(75, 49, 31, 0.8);
      }
      .whiskey {
        background-color: rgba(207, 129, 39, 0.8);
      }
    </style>
  <body>
    <div class="cup">
      <div class="cup-body">
        <div class="layer espresso">espresso</div>
        <div class="layer whiskey">whiskey</div>
      </div>
    </div>
  </body>

1.4、下划线动画

html 复制代码

    <style>
      .title span {
        line-height: 2;
        background: linear-gradient(to right, #ff5f57, #28c840) no-repeat right
          bottom;
        background-size: 0px 2px;
        transition:background-size 1s;
      }
      .title span:hover {
        background-position: left bottom;
        background-size: 100% 2px;
      }
    </style>
  <body>
    <div class="title" style="width: 400px;">
      <span>
        Lorem is Value Lorem is Value Lorem is Value Lorem is Value Lorem is
        Value Lorem is Value Lorem is Value Lorem is Value Lorem is Value Lorem
        is Value Lorem is Value
      </span>
    </div>
  </body>

1.5、CSS中的混合模式( Blending)

html 复制代码

    <style>
      .earth {
        width: 740px;
        height: 486px;
        background: url(./green.png) blue;
        /* 图像背景色和元素背景色混合 :此时green.png是蓝色的*/
        background-blend-mode: lighten;
        position: relative;
      }
      .mix {
        width: 540px;
        height: 270px;
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        background: url(./dance.gif);
        /* 使用 mix-blend-mode 生成对比效果 */
        mix-blend-mode: multiply;
        filter: contrast(3);
      }
    </style>
  <body>
    <div class="earth">
      <div class="mix"></div>
    </div>
  </body>

二、SASS

Sass英文官网地址：Sass: Syntactically Awesome Style Sheets

Sass中文官网地址：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

Less英文官网地址：Getting started | Less.js

Less中文官网地址：Less 快速入门 | Less.js 中文文档 - Less 中文网

2.1、Sass的颜色函数

html 复制代码

  <body>
   <button class="btn type-1">按钮</button>
   <button class="btn type-2">按钮</button>
   <button class="btn type-3">按钮</button>
   <button class="btn type-4" disabled>按钮</button>
   <button class="btn type-5">按钮</button>
  </body>

css 复制代码

$btnColors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71;
@for $i from 1 through length($btnColors) {
  .btn.type-#{$i} {
    // 获取 $btnColors 列表中第 i 个颜色值
    $color: nth($btnColors, $i);
    background-color: $color;
    color: #fff;
    &:hover {
      background-color: lighten($color, 10%);
    }
    &:active {
      background-color: darken($color, 10%);
    }
    &:disabled {
      background-color: lighten($color, 20%);
      color: white;
    }
  }
}

2.2、Sass的扩展(`@extend`)和占位符(`%`)、混合(Mixin)

使用场景：一个选择器要继承另一个选择器的所有样式，需要复用样式，一般和占位符【不会直接编译成 CSS 中的选择器】一起使用。

使用场景：

(1)、基本语法：使用 @mixin 定义样式，然后通过 @include 来调用这个混合；

(2)、接收参数，并为参数设置默认值：在调用时可以部分传递 / 全部传递；

(3)、包含内容(@content)：传递块级内容；

混合与继承（@extend）的区别

@extend 用于让一个选择器继承另一个选择器的样式。

会合并多个选择器、可能导致选择器组合过多，生成复杂的 CSS。

@mixin 用于定义一组样式，并允许在多个地方重复使用这些样式。

可以带有参数，灵活性高。每次调用混合时，都会生成独立的样式规则。

2.3、Sass的数学函数

css 复制代码

@use "sass:math";
.board {
  position: relative;
  width: 200px;
  height: 200px;
  border: 40px solid #3498db;
  border-radius: 50%;
  margin: 50px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: #2ecc71;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 20px;
  opacity: 0;
  transition: .2s;
}
$r: 120px;
$n: 6;
$step: 360deg / $n;
@for $i from 1 through $n {
  .board:hover .menu-item:nth-child(#{$i}) {
    $deg: $step * ($i - 1);
    $x: $r * math.sin($deg);
    $y: -$r * math.cos($deg);
    transform: translate($x, $y);
    opacity: 1;
  }
}

2.4、Sass的模块化开发

css 复制代码

@import './conmon.scss';
@import './conmon2.scss';
// 引入多个模块，出现同名变量，以下面的为准，出现命名污染
@debug conmon.$color;//输出 yellow

css 复制代码

@use './conmon.scss';
@use './conmon2.scss';
@debug conmon.$color;//输出 green
@debug conmon2.$color;//输出 yellow
// =====加上命名空间=====
@use './conmon.scss' as a;
@use './conmon2.scss' as b;
@debug a.$color;//输出 green
@debug b.$color;//输出 yellow

对比@use与@import

特性	`@import`	`@use`
作用域	导入的内容暴露到全局作用域	导入的内容会被限定在命名空间内，避免全局污染
重复导入	多次导入同一文件会重复执行	同一文件只会被加载一次
变量和混合宏	直接暴露到全局，同名变量污染	变量、函数、混合宏通过命名空间as访问
性能	导入的文件每次都会重新解析	只会加载一次，减少冗余解析

2.5、Sass实现主题切换

css 复制代码

$themes: (
  light: (
    bgColor: #fff,
    textColor: #000,
  ),
  dark: (
    bgColor: #000,
    textColor: #fff,
  ),
);
$curTheme: "light";
@mixin useTheme() {
  @each $themeName, $themeMap in $themes {
    html[data-theme="#{$themeName}"] & {
      @content($themeMap);
    }
  }
}
@function getVar($themeMap, $paramName) {
  @return map-get($themeMap, $paramName);
}
.item {
  width: 100px;
  height: 100px;
  @include useTheme() using ($themeMap) {
    background: getVar($themeMap, 'bgColor');
    color: getVar($themeMap, 'textColor');
    border-color: getVar($themeMap, 'textColor');
  };
}

2.6、Sass实现文字替换

场景：文字内容根据页面大小进行响应式变化

2.7、Sass实现星空效果

效果：漫天星辰近大远小、每一层以不同流速向上划过

css 复制代码

body {
  background-color: black;
}
@function getShadows($n) {
  $shadows: "";
  @for $i from 1 through $n {
    //为每个阴影生成随机的 vw 和 vh 值，确保字符串拼接正确
    $shadow: "#{random(100)}vw #{random(100)}vh #fff";
    //如果是第一次添加阴影，不需要逗号
    @if $i == 1 {
      $shadows: $shadow;
    } @else {
      $shadows: #{$shadows}, #{$shadow};
    }
  }
  @return $shadows;
}
$duration: 500s;
$count: 1000;
@for $i from 1 through 5 {
  $duration: $duration/2;
  $count:floor($count/2);
  .layer#{$i} {
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    left: 0;
    top: 0;
    background-color: red;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;
    &::after {
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      width: inherit;
      height: inherit;
      box-shadow: inherit;
    }
  }
}
@keyframes moveUp {
  to {
    transform: translateY(-100vh);
  }
}

2.8、Sass简化媒体查询

css 复制代码

$breakpoints: (
  "phone": (320px, 480px,),
  "pad": (481px,768px,),
  "notebook": (769px,1024px,),
  "desktop": (1024px,1200px,),
  "tv": 1201px,
); //映射，可以避免多if分支
@mixin responseTo($breakname) {
  $bp: map-get($breakpoints, $breakname);
  @if type-of($bp)=="list" {
    @media (min-width: nth($bp, 1)) and (max-width: nth($bp, 2)) {
      @content;
    }
  }
  @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}
.header {
  width: 100%;
  background-color: yellow;
  @include responseTo("phone") {
    height: 50px;
  }
  @include responseTo("pad") {
    height: 60px;
  }
  @include responseTo("notebook") {
    height: 70px;
  }
  @include responseTo("desktop") {
    height: 80px;
  }
  @include responseTo("tv") {
    height: 90px;
  }
}

2.9、自动注入Less全局变量

每个单页面都要使用.less里的变量或者公共部分，下面这样每次都要引入

css 复制代码

<style lang="less" scoped>
@import "./var.less";
.less-div{
  color: @color;
}
</style>

简便写法就是直接在vue.config.js里直接引入

javascript 复制代码

module.exports = {  
css: {
    loaderOptions: {
      less:{
        additionalData:`@import "~@/var.less"`
        // 或者
        additionalData:`@import "../../views/some-folder/var.less";`
      },
    }
  }
}

vue3的vue.config.js：

javascript 复制代码

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
});

2.10、比较Sass和Less

特性	Sass	Less
语法	Sass（缩进式）和 SCSS（与 CSS 类似）	类似 CSS 的语法，完全基于 CSS
变量	使用 `$` 符号定义变量	使用 `@` 符号定义变量
混合	支持混合，可以接收参数	支持混合，支持动态参数
嵌套规则	支持嵌套规则，嵌套可以嵌套任意层级	支持嵌套规则，最多支持 4 层嵌套
继承	使用 `@extend`来继承样式	使用`&` 来模拟继承样式或组合选择器
运算	支持运算（如加减乘除、比较等）	支持运算（如加减乘除、比较等）
功能丰富	功能丰富，适用于大项目，支持Sass模块化、函数等	功能简单，但对于中小型项目非常合适
生态与工具	社区和文档支持丰富	较少，但也有一定的使用者和工具支持

一、CSS进阶

1.1、CSS变量

1.2、CSS属性值的计算过程

1.3、做杯咖啡

1.4、下划线动画

1.5、CSS中的混合模式( Blending**)**

二、SASS

2.1、Sass的颜色函数

2.2、Sass的扩展(@extend)和占位符(%)、混合(Mixin)

2.3、Sass的数学函数

2.4、Sass的模块化开发

2.5、Sass实现主题切换

2.6、Sass实现文字替换

2.7、Sass实现星空效果

2.8、Sass简化媒体查询

2.9、自动注入Less全局变量

2.10、比较Sass和Less

1.5、CSS中的混合模式( Blending)

2.2、Sass的扩展(`@extend`)和占位符(`%`)、混合(Mixin)