当前位置： 首页 > article >正文

CSS进阶和SASS

article 2025/1/6 9:58:34

目录

一、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

一、CSS进阶

1.1、CSS变量

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

  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
    <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>

小球从左到右滚动：

    <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

    <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、下划线动画

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

    <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的颜色函数

  <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>
$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的数学函数

@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的模块化开发

@import './conmon.scss';
@import './conmon2.scss';
// 引入多个模块，出现同名变量，以下面的为准，出现命名污染
@debug conmon.$color;//输出 yellow
@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实现主题切换

$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实现星空效果

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

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简化媒体查询

$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里的变量或者公共部分，下面这样每次都要引入

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

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

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

vue3的vue.config.js：

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

2.10、比较Sass和Less

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


http://www.kler.cn/a/465702.html

相关文章：

  • 关于 webservice 日志中 源IP是node IP的问题，是否能解决换成 真实的客户端IP呢
  • 【调试记录】在CARLA中插入可以播放视频的组件
  • MySQL低版本没有函数row_number() over的解决方案
  • 【信息系统项目管理师】高分论文：论信息系统项目的风险管理（城市停车诱导系统）
  • 五类推理（逻辑推理、概率推理、图推理、基于深度学习的推理）的开源库 （一）
  • PWN 的知识之如何利用栈溢出利用后门函数
  • halcon三维点云数据处理（二）
  • 《向量数据库指南》混合检索系统的深度探索与实践：从POC到生产级解决方案的构建
  • 毕设中所学
  • MCA：用于图像识别的深度卷积神经网络中的多维协同注意力
  • MAC录屏QuikTimePlayer工具录屏声音小免费解决方案
  • 机器学习之模型评估——混淆矩阵，交叉验证与数据标准化
  • PyQt下载M3U8文件
  • TK730 不允许更改资源库或跨客户端定制
  • JavaEE 初阶：线程（2）
  • RabbitMQ的常见面试题及其答案的总结
  • 美团商家端 字符验证码 分析
  • 使用npm 插件[mmdc]将.mmd时序图转换为图片
  • VuePress2配置unocss的闭坑指南
  • 适配器模式（类适配器，对象适配器）
  • 高频java面试题
  • 用语言模型 GLM-Zero-Preview 来驱动战场推演
  • 数据挖掘——支持向量机分类器
  • Centos源码安装MariaDB 基于GTID主从部署（一遍过）
  • Redis面试相关
  • vue2框架配置路由设计打印单