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)

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模块化、函数等功能简单，但对于中小型项目非常合适
生态与工具社区和文档支持丰富较少，但也有一定的使用者和工具支持

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/946945.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python-Flask：SQLite数据库路径不正确但是成功访问到了数据库，并对表进行了操作

python-Flask：SQLite数据库路径不正确但是成功访问到了数据库，并对表进行了操作

出现了这个问题&#xff0c;就好像是我要去找在南方的人&#xff0c;然后我刚好不分南北&#xff0c;我认为的方向错了&#xff0c;实则方向对了。 在我针对复盘解决&#xff1a;sqlite3.OperationalError: unrecognized token: “{“-CSDN博客这个内容的时候&#xff0c;又出现…
阅读更多...
剪映--关键帧教程：制作视频文字说明，文字动态划线，透明文字，虚拟触控，画面旋转缩小退出

剪映--关键帧教程：制作视频文字说明，文字动态划线，透明文字，虚拟触控，画面旋转缩小退出

关键帧介绍 剪映当中许多动态的效果都是关键帧的应用&#xff0c;像接下来会讲到的文字动态划线&#xff0c;画面旋转退出&#xff0c;都是关键帧的效果&#xff0c;用户只要设定初始状态和最后状态&#xff0c;软件会将中间的动态补齐。剪辑的难点在于自己需要先想好要怎么去…
阅读更多...
【数据结构Ⅰ复习题】

【数据结构Ⅰ复习题】

如有错误欢迎指正&#xff0c;题目根据教材----------严蔚敏数据结构&#xff08;c语言版 第2版&#xff09;人民邮电电子版 数据结构Ⅰ复习题 一、填空题1&#xff0e;算法应该具备的5个重要特性有___有穷性___、确定性、可行性、输入和输出。2&#xff0e;非空单链表L中*p是头…
阅读更多...
697: Edit Distance

697: Edit Distance

我们定义 dp[i][j] 为将字符串 A[0..i-1] 转换为 B[0..j-1] 的最小操作数 状态转移 通过动态规划的思想&#xff0c;我们可以使用 状态转移方程 来计算 dp[i][j]。具体来说&#xff0c;dp[i][j] 的值可以由以下几种操作得到&#xff1a; 如果 A[i-1] B[j-1]&#xff1a; 如果…
阅读更多...
【AI创作】kimi API初体验

【AI创作】kimi API初体验

一、介绍 接口文档 https://platform.moonshot.cn/docs/guide/migrating-from-openai-to-kimi 收费详情 并发: 同一时间内我们最多处理的来自您的请求数RPM: request per minute 指一分钟内您最多向我们发起的请求数TPM: token per minute 指一分钟内您最多和我们交互的toke…
阅读更多...
迈向AGI，3、2、1，2025上链接！

迈向AGI，3、2、1，2025上链接！

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 往期精彩文章推荐 关于AI TIME AI TIME源起于2019年&#xff0c;旨在发扬科学思辨精神&#xff0c;邀请各界人士对人工智能理论、算法和场景应用的本质问题进行探索&#xff0c;加强思想碰撞&#xff0c;链接全…
阅读更多...
C语言中的强弱符号

C语言中的强弱符号

文章目录 一、基本定义二、链接过程中的行为三、应用场景四、强弱符号示例1五、稍有难度示例2 在C语言中&#xff0c;强弱符号是与链接过程相关的重要概念&#xff0c;C中不存在强弱符号&#xff0c;以下是对它们的详细讲解&#xff1a; 一、基本定义 强符号 强符号通常是指在…
阅读更多...
数据仓库建设方案和经验总结

数据仓库建设方案和经验总结

在做数据集成的过程中&#xff0c;往往第二步的需求就是建设数仓由于数据分散在不同的存储环境或数据库中&#xff0c;对于新业务需求的开发需要人工先从不同的数据库中同步、集中、合并等处理&#xff0c;造成资源和人力的浪费。同时&#xff0c;目前的系统架构&#xff0c;无…
阅读更多...
SAP SD学习笔记24 - 赠品的两种形式 - 内增Bonus数量、外增Bonus数量

SAP SD学习笔记24 - 赠品的两种形式 - 内增Bonus数量、外增Bonus数量

上一章讲了无偿出荷的内容。 SAP SD学习笔记23 - 无偿出荷&#xff08;免费交货&#xff09;与继续无偿出荷&#xff08;继续免费交货&#xff09;-CSDN博客 本章继续将SAP中赠品的两种形式&#xff1a; - 内增Bonus数量&#xff1a;Bonus数量包含在总数量当中&#xff0c;比…
阅读更多...
【JVM】JVM自学笔记（类加载子系统、运行时数据区、执行引擎）

【JVM】JVM自学笔记（类加载子系统、运行时数据区、执行引擎）

JVM自学笔记 引言总结JVM跨平台JVM组成部分类加载子系统运行时数据区程序计数器虚拟机栈本地方法栈堆 执行引擎垃圾回收 引言 主要内容为学习b站视频后的笔记部分个人总结。原视频链接为&#xff1a;【【JVM极简教程】2小时快速学会JVM&#xff0c;史上用时最短&#xff0c;效…
阅读更多...
丢弃法hhhh

丢弃法hhhh

一个好的模型需要对输入数据的扰动鲁棒 丢弃法&#xff1a;在层之间加入噪音&#xff0c;等同于加入正则 h2和h5变成0了 dropout一般作用在全连接隐藏层的输出上 Q&A dropout随机置零对求梯度和求反向传播的影响是什么&#xff1f;为0 dropout属于超参数 dropout固定随…
阅读更多...
深入Android架构(从线程到AIDL)_06 短程通信 vs. 远程通信

深入Android架构(从线程到AIDL)_06 短程通信 vs. 远程通信

目录 7、 短程通信 vs. 远程通信 範例&#xff1a; 短程通信 撰写步骤 範例&#xff1a; 遠程通信 7、 短程通信 vs. 远程通信 範例&#xff1a; 短程通信 首先出现ac01画面&#xff0c;立即启动myService&#xff0c;定时连续传来数字&#xff0c;如下&#xff1a;由于定…
阅读更多...
进销存软件数据库设计

进销存软件数据库设计

设置 system_config 系统参数配置pricing_policy 价格策略&#xff08;销售采购价格取数优先级&#xff09;code_rule 编码规则account_book 账套checkout 结账admin 管理员role 角色menu 菜单menu_role 角色菜单merchant 商户merchant_menu 商户菜单merchant_user 商户用户资料…
阅读更多...
[文献阅读]ReAct: Synergizing Reasoning and Acting in Language Models

[文献阅读]ReAct: Synergizing Reasoning and Acting in Language Models

文章目录 摘要Abstract:思考与行为协同化Reason(Chain of thought)ReAct ReAct如何协同推理 响应Action&#xff08;动作空间&#xff09;协同推理 结果总结 摘要 ReAct: Synergizing Reasoning and Acting in Language Models [2210.03629] ReAct: Synergizing Reasoning an…
阅读更多...
antd-vue - - - - - a-date-picker限制选择范围

antd-vue - - - - - a-date-picker限制选择范围

antd-vue - - - - - a-date-picker限制选择范围 1. 效果展示2. 代码展示 1. 效果展示 如图&#xff1a;限制选择范围为 今年 & 去年 的 月份. 2. 代码展示 <template><a-date-picker:disabledDate"disabledDate"picker"month"/> &l…
阅读更多...
OceanBase到MySQL实时同步方案

OceanBase到MySQL实时同步方案

概述 本方案基于OceanBase Binlog服务&#xff0c;采用数据库实时复制软件Beedup订阅捕获OceanBase数据库的Binlog事件&#xff0c;复制软件将Binlog事件还原为MySQL支持的DML或DDL&#xff0c;然后交由MySQL数据库执行。 配置Binlog任务 启用OceanBase Binlog服务&#xff…
阅读更多...
[QT]控件的核心属性

[QT]控件的核心属性

一、控件的核心属性 1.enable属性 表示一个控件是否可用&#xff0c;可以用isEnabled()接口获取到当前控件的可用状态&#xff0c;同时来提供了setEnabled()接口设置控件是否可用&#xff0c;传递的参数为true和false。 isEnabled(); setEnabled(bool); Demo&#xff1a;通过一…
阅读更多...
DRAM 的类型

DRAM 的类型

DRAM&#xff08;Dynamic Random Access Memory&#xff09;&#xff0c;即动态随机存取存储器&#xff0c;是现代计算机系统中不可或缺的存储组件之一。 根据市场情况主要分为以下几种&#xff1a; 一、SDRAM&#xff08;Synchronous Dynamic Random Access Memory&#xff0…
阅读更多...
虚拟机中的时统卡功能和性能调优

虚拟机中的时统卡功能和性能调优

【写在前面】 飞腾开发者平台是基于飞腾自身强大的技术基础和开放能力&#xff0c;聚合行业内优秀资源而打造的。该平台覆盖了操作系统、算法、数据库、安全、平台工具、虚拟化、存储、网络、固件等多个前沿技术领域&#xff0c;包含了应用使能套件、软件仓库、软件支持、软件适…
阅读更多...
创新驱动智能运维，护航军工新时代

创新驱动智能运维，护航军工新时代

随着数字化转型的加速推进&#xff0c;智能运维技术在各行业的重要性愈加凸显。军工行业作为国家安全和技术创新的核心&#xff0c;对运维解决方案的安全性、可靠性及自主可控性提出了严格要求。美信时代科技有限公司以自主创新为基础&#xff0c;推出监控易一体化智能运维管理…
阅读更多...
最新文章

Copyright @ 2022~2023