PART4_1
Sass和Less
Sass和Less都属于CSS预处理器,CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,如:变量、语句、函数、继承等概念。将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。
官网地址:http://lesscss.org/
VSCode插件:Easy LESS
官网地址:https://sass-lang.com/
VSCode插件:Easy Sass
添加插件后只需要在新建文件.less和.scss/.sass后缀名的文件后,会自动生成.css文件
less和sass的区别
关于编译
- 两者都是
- 单行注释会被编译出来
- 多行注释,就是css的注释方式,会被编译出来
关于变量
- less用’@变量名’表示变量引用也是用’@变量名’,使用插值写法,引用时写法@{变量名}
- sass用’ 变 量 名 ′ 表 示 变 量 引 用 也 是 用 ′ 变量名'表示变量引用也是用' 变量名′表示变量引用也是用′变量名’,使用插值写法,引用时写法#{$变量名}
作用域
- 两者都是就近原则,靠近优先。
- 不同的是sass的作用域是有顺序的,写在后面的赋值无法被前面的变量所识别,而less可以。
选择器嵌套
-
less
写法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OyeTPTpv-1618799396971)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123161424322.png)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YirbjwM3-1618799396972)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123161440700.png)]
-
sass
写法和效果和less一样
伪类嵌套
-
less
写法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fp60785L-1618799396973)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123161728369.png)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1t1pf5Rs-1618799396974)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123161741142.png)]
-
和less一样
属性嵌套
-
sass
写法:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o84JkOww-1618799396976)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123162453822.png)]
效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NL2ihp7n-1618799396977)(C:\Users\DSH\AppData\Roaming\Typora\typora-user-images\image-20201123162517973.png)]
-
less没有属性嵌套的功能
运算和单位装换
- less
- 运算法可以使用
- 当单位不相同是,以写在前面的单位为准
- 需要转义的时候,通过~" "可以直接输出
- 颜色也可以运算
- sass
- 运算符可以直接使用
- 单位不同不能运算
- 默认/是分割的操作,如需除法,需要用小括号将算式括起来
- 颜色可以运算
函数
- less
- round() :四舍五入
- percentage() :转换为百分数
- sqrt():开方(sass没有此函数)
- sass
- round() :四舍五入
- percentage() :转换为百分数
- random():产生随机数(less没有此函数)
更多异同的函数需要去官网查看
自定义函数
@function sum(n,m){
@return n+m;
}
两个都一样
混入
- less
写法:
.show{
display: none;
}
.hide{
display: block;
}
.box6{
width: 100px;
.show;
.hide;
}
效果:
.show {
display: none;
}
.hide {
display: block;
}
.box6 {
width: 100px;
display: none;
display: block;
}
如果不想要.show和.hide出现在css里则可以写成.show()和.hide()小括号还可以用来传参,例如:
写法:
.show(){
display: none;
}
.hide(@color){
display: block;
color: @color;
}
.box6{
width: 100px;
.show();
.hide(blue);
}
效果:
.box6 {
width: 100px;
display: none;
display: block;
color: blue;
}
- sass
写法:
@mixin show {
display: block;
}
@mixin hide($color) {
display: none;
color: $color;
}
.box6{
width: 100px;
@include show();
@include hide(red);
}
效果:
.box6 {
width: 100px;
display: block;
display: none;
color: red;
}
sass默认不会将样式添加到css中,同样可以传参但注意用的是$
命名空间
- less
写法:
#nm(){
.show{ display: inline-block;}
}
.box7{
#nm.show
}
效果:
.box7 {
display: inline-block;
}
注:不写#nm则会使用全局中的show
继承
- less
写法:
.line{
display: inline;
}
.box7{
&:extend(.line);
}
.box8{
&:extend(.line);
}
效果:
.line,
.box7,
.box8 {
display: inline;
}
- sass
写法:
.line{
display: inline;
}
.box7{
@extend .line;
}
.box8{
@extend .line;
}
效果:
.line, .box7, .box8 {
display: inline;
}
==注:==与less不同的是,sass可以将点换成%以达成不渲染首元素进行继承
例:
%line{
display: inline;
}
.box7{
@extend %line;
}
.box8{
@extend %line;
}
效果:
.box7, .box8 {
display: inline;
}
合并
- less
用逗号
写法:
.box9{
background+: url(a.png);
background+: url(b.png);
}
效果:
.box9 {
background: url(a.png), url(b.png);
}
用空格
写法:
.box9{
background+: url(a.png);
background+: url(b.png);
transform+_: scale(2);
transform+_: rotate(30deg);
}
效果:
.box9 {
background: url(a.png), url(b.png);
transform: scale(2) rotate(30deg);
}
- sass
用逗号和用空格
写法:
$background:(
a : url(a.png),
b : url(b.png)
);
$background:(
a : scale(2),
b : rotate(30deg)
);
.box9{
background : map-values($background);
transfrom : zip(map-values($background)...)
}
效果:
.box9 {
background: scale(2), rotate(30deg);
transfrom: scale(2) rotate(30deg);
}
媒体查询
- less
写法:
.box10{
width: 100px;
@media all and ( min-width:768px){
width: 600px;
}
@meida all and ( min-width:1440px){
width:900px;
}
}
效果:
.box10 {
width: 100px;
}
@media all and (min-width: 768px) {
.box10 {
width: 600px;
}
}
@meida all and ( min-width:1440px) {
width: 900px;
}
- sass与less一样
条件判断
- less
写法:
@count : 3;
.get(@cn) when(@cn>4){
width: 100px + @cn;
}
.get(@cn) when(@cn<4){
width: 10px + @cn;
}
.box11{
.get(@count);
}
效果:
.box11 {
width: 13px;
}
- sass
写法:
$count : 3;
.box11{
@if($count>4){
width: 100px + $count;
}
@else{
width: 10px + $count;
}
}
效果:
.box11 {
width: 13px;
}
循环
- less
写法:
@count2 :0;
.get2(@cn) when (@cn<3){
.box-@{cn}{
width: 100px + @cn;
}
.get2((@cn+1));
}
.get2(@count2);
效果:
.box-0 {
width: 100px;
}
.box-1 {
width: 101px;
}
.box-2 {
width: 102px;
}
- sass
写法:
@for $i from 0 through 2{
.box-#{$i}{
width: 100px + $i;
}
}
效果:
.box-0 {
width: 100px;
}
.box-1 {
width: 101px;
}
.box-2 {
width: 102px;
}
导入
- less
写法:@import ‘./reset.less’;
即可将reset.less的内容导入进来
- sass
想将要导入的文件声明成公共样式,写法:
_base.scss
引入
@import "base"
css架构
文件夹 | 含义 |
---|---|
bash | 一些初始的通用css,如重置默认样式,动画,工具,打印等。 |
components | 用于构建页面的所有组件,如按钮,表单,表格,弹窗等。 |
layout | 用于布局页面的不同部分,如页眉,页脚,弹性布局,网格布局等。 |
pages | 放置页面之间不同的样式,如首页特殊样式,列表页特殊样式等。 |
themes | 应用不同主题样式时,如管理员,买家,卖家等。 |
abstracts | 放置一些如:变量,函数,响应式等辅助开放的部分。 |
vendors | 放置一些第三方独立的css文件,如bootstrap,iconfont等。 |
css新特性
自定义属性
div{
--color: yellow; //优先级高于:root
}
:root{
--color:red;
--number:100px;
--number2:100;
/* --size:50px; */
}
#box{
/* --color:blue; */ //优先级最高
background: var(--color);
width: var(--number);
height: calc(var(--number2)*1px); //通过乘法赋予单位
font-size: var(--size,100px); //不设置变量时使用默认值100px
}
shapes
shape-outside:文字环绕效果
- margin-box:围绕外边距环绕
- border-box:围绕盒子模型环绕
- padding-box:围绕内边距环绕
- center-box:围绕内容环绕
- none:默认值无环绕
想要围绕特殊图形可以根据polygon()定位各个点来达到效果。
shape-margin:增加边距
scrollbar
CSS scrollbar用于实现自定义滚动条样式。
::-webkit-scrollbar
-
width:针对纵向滚动条
-
height:针对横向滚动条
::-webkit-scrollbar-thumb
-
background:改变滚动条颜色
-
border-radius:增加圆角
::-webkit-scrollbar-track
-
background:改变滚动条背景颜色
-
box-shadow:增加阴影
Scroll Snap
CSS Scroll Snap(CSS 滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。
在容器上添加:
scroll-snap-type:x mandatory;表示针对x轴,强制性捕捉
在需要捕捉的子容器上添加:
scroll-snap-align:start/center/end
apes
shape-outside:文字环绕效果
- margin-box:围绕外边距环绕
- border-box:围绕盒子模型环绕
- padding-box:围绕内边距环绕
- center-box:围绕内容环绕
- none:默认值无环绕
想要围绕特殊图形可以根据polygon()定位各个点来达到效果。
shape-margin:增加边距
scrollbar
CSS scrollbar用于实现自定义滚动条样式。
::-webkit-scrollbar
-
width:针对纵向滚动条
-
height:针对横向滚动条
::-webkit-scrollbar-thumb
-
background:改变滚动条颜色
-
border-radius:增加圆角
::-webkit-scrollbar-track
-
background:改变滚动条背景颜色
-
box-shadow:增加阴影
Scroll Snap
CSS Scroll Snap(CSS 滚动捕捉)允许你在用户完成滚动后多锁定特定的元素或位置。
在容器上添加:
scroll-snap-type:x mandatory;表示针对x轴,强制性捕捉
在需要捕捉的子容器上添加:
scroll-snap-align:start/center/end
表示在开始/中间/结尾处捕捉