手机网站免费模板,自己做的网站搜索引擎搜不到,合肥室内装修设计培训,网站制作哪家好目录
一、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…目录
一、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属性存在一定的关系 bodydiv classcontainerdiv classitem/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%));}}/stylebodyscriptconst container document.querySelector(.container);// 相当于 div classcontainer style--w: 758px;const w container.clientWidth;container.style.setProperty(--w, w px);/script/body
1.2、CSS属性值的计算过程
先确定声明值—层叠(权重)—继承—使用默认值—最后显示到页面
1.3、做杯咖啡 杯身path图形 SvgPathEditor stylebody {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);}/stylebodydiv classcupdiv classcup-bodydiv classlayer espressoespresso/divdiv classlayer whiskeywhiskey/div/div/div/body
1.4、下划线动画 style.title span {line-height: 2;background: linear-gradient(to right, #ff5f57, #28c840) no-repeat rightbottom;background-size: 0px 2px;transition:background-size 1s;}.title span:hover {background-position: left bottom;background-size: 100% 2px;}/stylebodydiv classtitle stylewidth: 400px;spanLorem is Value Lorem is Value Lorem is Value Lorem is Value Lorem isValue Lorem is Value Lorem is Value Lorem is Value Lorem is Value Loremis 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);}/stylebodydiv classearthdiv classmix/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的颜色函数 bodybutton classbtn type-1按钮/buttonbutton classbtn type-2按钮/buttonbutton classbtn type-3按钮/buttonbutton classbtn type-4 disabled按钮/buttonbutton classbtn 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
特性importuse作用域导入的内容暴露到全局作用域导入的内容会被限定在命名空间内避免全局污染重复导入多次导入同一文件会重复执行同一文件只会被加载一次变量和混合宏直接暴露到全局同名变量污染变量、函数、混合宏通过命名空间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 langless 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模块化、函数等功能简单但对于中小型项目非常合适生态与工具社区和文档支持丰富较少但也有一定的使用者和工具支持
