transition-property：规定过渡的属性
scale：缩放(值是一个比例值，正常大小就是1，会以当前元素中心点进行缩放
rotate：旋转(单位是角度deg）
遮罩 url repeat x y / w h 多罩层
注：mask目前还没有标准化，需要浏览器前缀
-webkit-mask: url('./src/assets/img/common/placeholder.png') no-repeat 100px 100px ;
}
.mask:hover{
-webkit-mask: url('./src/assets/img/common/placeholder.png') no-repeat center center /200px 200px;
}
也可以写成 repeat(3,1fr)
语法：
注释
变量，插值，作用域
选择器嵌套，伪类嵌套，属性嵌套(Sass)
选择器、伪类嵌套
ul{
list-style:none;
li{
float:left;
div{
margin:10px;
p{margin:20px}
}
&:hover{
color:red
}
}
}属性嵌套(Sass)
ul{
list-style:none;
li{
color:red;
font:{
size:10px;
weight:bold;
family:宋体
}
}
}运算，单位，转义，颜色
函数
Scss和Less都有自己的默认函数，具体看官方文档
Scss自定义函数
@function sum($a,$b){
@return $a + $b
}
.box{
font-size:sum(4px,5px)
}混入，命名空间(Less)，继承
Less混入
.show{
display:block
}
.hide(@color){
color:@color
}
.box{
width:100px;
.show
.hide(blue)
}
//()转化css可以不显示内容，()可以传参Scss混入
@mixin show {
display:none
}
@mixin hide($color){
color:$color
}
.box{
width:100px;
@include show;
@include hide(blue)
}Less命名空间
#nm(){
.show{display:inline-block}
}
.box{
#nm.show
}Less继承
.line{
display:inline
}
.box1{
&:extend(.line)
}
.box2{
&:extend(.line)
}Scss继承
%line{
display:inline
}
.box1{
@extend %line
}
.box2{
@extend %line
}合并，媒体查询
Less合并
.box{
background+:url(./'a.png');
background+:url('./b.png')
transform+_:scale(2)
transform+_:rotate(45deg)
}
//+合并用逗号隔开，+_合并用空格隔开Scss合并
$background:{
a:url('./a.png'),
b:url('./b.png')
}
transform:{
a:scale(2),
b:rotate(45deg)
}
.box{
background:map-values($background);//逗号隔开
transform:zip(map-values($transform)...)//空格隔开
}Less和Scss媒体查询
.box{
width:100px;
@media all and (min-width:768px){
width:600px
}
@media all and (min-width:1440px){
width:900px
}
}条件，循环
Less
//条件
@count:6;
.get(@cn) when (@cn > 4){
width:100px + @cn
}
.get(@cn) when (@cn<4){
width:10px + @cn
}
.box{
.get(@count)//width:106px
}
//循环
@count:2;
.get(@cn)when(@cn < 3){
.get((@cn+1))
.box-@{cn}{
width:100px +@cn
}
}
.get2(@count2)Scss
//条件
$count:5;
.box{
@if($count > 4){
width:100px +$count
}
@else{
width:10px +$count
}
}
//循环
@for $i from 0 through 2{
.box-#{$i}{
width:100px + $i
}
}导入
...
自定义变量 如：定义--color：red 使用var(--color)
shape环绕文字
shape-outside：margin-box
clip-path：polygon(0 0,0 100px,100px 100px) 裁切图形 polygon设置未定义多边形
结合shape-outside设置polygon(0 0,0 100px,100px 100px)实现多边形环绕
shape-margin 环绕与图形的间距
scrollbar
html::-webkit-scrollbar{
width:10px
}
滚动条
html::-webkit-scrollbar-thumb{
? background:yellow
}
滚动容器
html::-webkit-scrollbar-track{
? background:#aaaaaa
? box-shadow:inset 0 0 5px gray
}
scrollsnap滚动捕捉
原文：https://www.cnblogs.com/oreic/p/12456584.html