Sass和Less

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用’$变量{名}^{\prime }表示变量引用也是{用}^{\prime }$变量名’，使用插值写法，引用时写法#{$变量名}

作用域

• 两者都是就近原则，靠近优先。
• 不同的是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

表示在开始/中间/结尾处捕捉