Less和sass安装及使用

news/2024/4/19 0:30:41

CSS预处理器

由来

CSS本身不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。换句话说,CSS基本上是设计师的工具,不是程序员的工具。它并不像其它程序语言,比如说JavaScript等,有自己的变量、常量、条件语句以及一些编程语法,

所以有人在想能不能给CSS像其他程序语言一样,加入一些编程元素,可以使用变量 、循环 、继承 、自定义方法等多种特性的标记语言,逻辑性得以大大增强,让CSS能像其他程序语言一样可以做一些预定的处理。即“CSS预处理器(CSS Preprocessor)”。

概念

即用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处

常见

CSS预处理器技术已经非常的成熟,而且也涌现出了很多种不同的CSS预处理器语言,比如说:

  • Sass(SCSS)

  • LESS

  • Stylus

  • Turbine

  • Swithch CSS

  • CSS Cacheer

  • DT CSS等。

到目前为止,在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀,讨论的也多,对比的也多。所以我们重点学习less 和 sass

Less

less 介绍

1. 什么是Less

less,sass,stylus 都属于css预处理器,基本思想是用一种专门的编程语言,为CSS增加一些编程的特性,如:变量、语句、函数、继承等概念。将CSS 作为目标生成文件,开发者只需要使用这种语言进行CSS 编码工作。

使用原因:

css中 书写很多重复的选择器,导致了我们在工作中无端增加了许多工作量

使用CSS预处理器,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了我们的开发效率。

2. less 官方网站

官方网站 https://less.bootcss.org/

中文网 Less 快速入门 | Less.js 中文文档 - Less 中文网

3. less 示例

4. less 中的注释

单行不会编译到CSS文件中去 //

多行会编译到CSS 文件中去 /* */

使用less

注意:less 文件只有被编译后才能被浏览器识别,浏览器只认识css 文件

Less 编译工具

  1. 考拉 http://koala-app.com

    koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

安装注意:

必须要新建一个文件夹,且该文件夹中没有其他内容,然后将该文件夹设置为安装地址。

直接安装在一个有其他文件的目录中 会导致 在安装过程中,把该目录下其他的文件都删除了且回收站都找不到

  1. 编辑器自动编译less插件

    (1)hbuliderX

    首先 “菜单栏” 找到 “工具”,选择“插件安装”,找到“less编译” "sass/scss编译" 点击安装,重启hbuilderX

    其次 安装成功后,“菜单栏” 找到 “工具”,选择“插件配置”,选择“compile-less”,选择package.json

    搜索属性名: onDidSaveExecution,配置保存的时候是否触发执行,默认false, 在此修改为 true;

    搜索属性名:key ,默认“”,设置为"ctrl+s", 即保存文件时自动编译

    "commands": [{"id": "LESS_COMPILE","name": "%external.commands.name%","command": ["${programPath}","${file}","../less/${fileBasename}.css"  // 这里的路径设置是相对路径,从当前.less文件所在目录出发   ],"extensions": "less","key": "ctrl+s","showInParentMenu": false,"onDidSaveExecution": true  // 配置保存的时候触发执行}]

    注意:修改完配置文件重启编辑器才会生效

    (2)Vscode

    首先 选择左侧菜单“扩展”,搜索”easyless“ 插件,安装完成, 重启Vscode

    其次 选择顶部菜单”文件“,找到”首选项“ ,点击”设置“ ,搜索less.complie 选择 setting.json 添加配置

    "less.compile": {"compress": false, // 不压缩,默认不压缩"sourceMap": false, // 不生成源码文件,默认不生成"out": "./css/"       // 这里是代表编译后生成的css文件所放的位置 
    }     

说明:

  1. "./css/" 代表基于当前less文件目录,和.less 文件同级目录下创建css文件夹,且生成的css文件名称默认为原less文件的名称

  2. css 后面不写/ , 代表文件名

  3. css 后面写/,代表文件夹

客户端调式方式

1. 自动编译less文件

利用编辑器插件实现自动编译

原理:页面中引入css文件,实际编写css时操作less文件,页面中引入的是less 文件自动编译的css文件

2. 手动编译less文件

原理:页面中引入less文件和less.js 文件,页面根据less.js 将less 文件编译成css文件

  1. 引用.less 文件

link 引入需要将rel 属性设置为 rel="stylesheet/less"

本页面使用less语法时 指定类型 text/less

  1. 引用less.js

必须放置在less 样式文件之后

语法注意

css样式语法后面必须跟";"号

定义的变量后面必须跟";"号

变量

1. 普通的变量

变量的定义方式@

示例:

less 语句 :

@red:#ff000;
.box{color:@red;
}

编译结果:

 .box{color:#ff000;}

注意:由于变量只能定义一次,实际上他们就是”常量“

2. 作为选择器和属性名

使用规则:@{变量名}

示例:

less 语句:

 @myselector:width  .@{myselector}{@{myselector}:960px}

编译结果:

 .width{width:900px}

3. 作为URL

使用规则:”“ 将变量值包裹起来,@{变量名} 使用

示例:

less 语句:

 @bgUrl:"http://www.baidu.com".box{background-image:url("@{bgUrl}/logo.png");}

编译结果:

.box{background-image:url("http://www.baidu.com/logo.png");}

4. 延迟加载

说明:变量是延迟加载的,在使用前不一定要预先声明

大意:在前面使用了这个变量,但没有定义,但可以在后面给他定义出来,不影响输出。

示例:

less 语句

.box{color:@red
}
@red:red

编译结果

.box{color:red
}

5. 定义多个相同名称的变量时的规则

定义一个变量多次时,按最后定义的变量走,less 会从当前作用域中向上搜索( 类似 css 属性值 覆盖)

@font:12px;
ul{@font:16px;font-size: @font;li{@font:20px;a{                       font-size: @font;@font:24px;}@font:12px;font-size: @font;}@font:12px
}
// 编译结果:ul=12px li=12px a=24px

混合

说明:将需要重复使用的代码封装到一个类中,在需要使用的地方调用封装好的类即可,在预处理的时less会自动将用到的封装好的类中的代码拷贝过来,本质就是ctrl+c 到 ctrl + v 的过程

1. 普通混合

说明:将一系列属性从一个规则集引入到另一个规则集

示例:

less 语句:

.bg{color:red;background:blue;
}
.box1{width:100px;.bg
}
.box2{width:100px;.bg
}

编译结果:

.box1{width:100px;color:red;background:blue;
}
.box2{width:100px;color:red;background:blue;
}

2. 不带输出的混合

用法:创建一个混合集,但不让它编译到最终的CSS样式中,在不想输出的混合集的名字后面加一个括号()

说明:如果混合名称的后面没有(), 那么在预处理的时候,会保留混合的代码(意思是在输出的css中,会含有.my-other-mixin这部分代码),如果混合名称的后面加上(),那么在预处理的时候,不会保留混合的代码,

大白话理解:加上()该类不会编译到css文件中

示例:

less 语句:

.my-mixin{font-size:16px;
}
.my-other-mixin(){color:red;
}
.box{.my-mixin;.my-other-mixin;
}

编译结果:

.my-mixin{font-size:16px;
}
.box{font-size:16px;color:red;
}

3. 带选择器的混合 比如 伪类

less 语句:

.hover-mixin{ // 不带输出的混合&:hover{color:pink;}
}a{.hover-mixin
}

编译结果:

a:hover{color:pink;
}

4. 带参数的混合

定义混合

.border(@border-color){border:1px solid @border-color;
}

使用混合( 需要传参数进去)

div{.border(red) 
}

编译结果:

div{border: 1px solid red;
}

5. 带参数且有默认值

定义混合

.border(@border-color:pink){border:1px solid @border-color;
}

使用混合( 不传参)

div{.border() 
}

编译结果:

div{border:1px solid pink;
}

传参时如有实参即按所传参数走

6. 带多个参数的混合

一个组合可带多个参数,参数之间用逗号或者分号分割

示例:

less 语句:

.mixin(@color: red; @fontSize: 14px) {color: @color;font-size: @fontSize;
}
.box1{.mixin(@color: #ccc, @fontSize: 18px);
}
.box2{.mixin(@fontSize: 22px,#eee;); // 注意带;了
}

编译结果:

.one {color: #ccc;font-size: 18px;
}
.two {color: red;font-size: 22px, #eee;
}

总结:

形参括号里全是以 逗号(,)分割,那么会依次传给各个参数值

形参括号里是以 逗号(,)和分号(;)分割,那么会将分号前看作一个整体,传给一个参数值

7. 命名参数

形参通过特定的参数名称而不是参数位置来提供参数值

.box2{.mixin(@fontSize: 22px,@color:#eee); 
}

8. @arguments 变量

说明:代表所有的可变参数

注意点:所传参数必须是一一对应,若不想传参,写默认值

less 语句

.boxShadow(@x,@y,@blur,@color){-moz-box-shadow: @arguments;-webkit-box-shadow: @arguments;box-shadow: @arguments;
}
.box4{.boxShadow(2px,2px,3px,#FF36)
}

编译结果

.box4 {-moz-box-shadow: 2px 2px 3px #FF36;-webkit-box-shadow: 2px 2px 3px #FF36;box-shadow: 2px 2px 3px #FF36;
}

9. 匹配模式

传值的时候定义一个字符,在使用的时候使用那个字符,就调出那条规则

.border(all,@color:red){border:1px solid @color;
}
.border(b-l,@color:red){border-left:1px solid @color;
}
.border(b-r,@color:red){border-right:1px solid @color;
}
.border(b-t,@color:red){border-top:1px solid @color;
}
.border(b-b,@color:red){border-bottom:1px solid @color;
}
.box4{.border(b-r,blue)
}	

编译结果

.box4{border-right: 1px solid #0000ff;
}	

10. 得到混合变量中的返回值

less 语句

.compute(@a,@b){@sum:(@a + @b); // @cha:(@a - @b)
}
.box4{.compute(200px,100px);width:@sum;// height:@cha
}	

编译结果

.box4{width: 300px;height: 100px;
}

嵌套规则

1. 什么是嵌套规则

模仿了HTML结构,让css代码更加简洁明了

2. 示例

传统css写法

.header{background:blue;
}
.header .logo{width:100px;
}
.header nav{width:500px;
}

less 写法

.header{background:blue;.logo{width:100px;}nav{width:500px;}
}

3.父元素选择器 &

传统css写法

li{background:pink;
}
li a{color:#fff;
}
li a:hover{color:#000
}

less 写法

li {background:pink;a{color:#fff;&:hover{color:#000 }}
}

4. 改变选择器的顺序

说明:把&放到当前选择器后,就会将当前选择器插入到所有的父选择器之前

注意:& 符号 前后有无空格的区别

less 语句

ul {li {.box & {background:red}}
}

编译结果

.box ul li{background:red  // 指定当前子选择器所属的父选择器
}

5. 组合使用生成所有可能的选择器列表

less 语句

ul,li,a{border:1px solid red;& &{ // & 代表所有父类 & & 代表 两两组合  & & & 三三组合border-top:0;}
}

编译结果

ul ul,
ul li,
ul a,
li li,
li a{border-top:0;
}

运算

1. 运算说明

任何数值,颜色,变量都可以进行运算

2. 数值型运算

less 会自动推算数值的单位,不必每一个值都加单位

运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算

示例

.box{width:500px + 100width:calc(500px + 100)
}

优先级运算

.box{width: (150px - 50) * 6  
}

结果

.box{width:600px
}

3. 颜色值运算

less 在运算时,先将颜色转化为rgb模式,然后转换为16进制的颜色值并且返回

示例:

less运算

.box{color:#000000 + 21
}

编译结果

.box{color:#151515
}

注意:rgb 取值范围 0-255 ,所以所加的值不能超过这个区间,超过后默认使用最大值255计算

不能直接以颜色值进行运算

函数

less 中提供了许多用于准换颜色,处理字符串和进行算术运算的函数,使用起来非常简单

1. 常见的rgb()函数

将rgb 转换成16进制

less 示例

.bg{background:rgb(0,0,0)
}

编译结果

.bg{background:#000000
}

2. 提取蓝色值 blue()函数

less 示例

.bg{background:blue(#ffff00)  // 255,255,0
}

编译结果

.bg{background:0
}

命名空间

1. 什么是命名空间

将一些需要的混合组合在一起,可通过嵌套多层id或者class来实现

less 语句

.bg-color{background: #FFFF00;.color1{color:yellow;&:hover{font-size: 20px;}.color2{color:green;font-size: 30px;}}.color3{color:orchid;font-size: 30px;}
}

编译结果

.box4{.bg-color  //  background: #FFFF00;.bg-color>.color1  // color:yellow; hover:font-size: 20px;.bg-color>.color1>.color2  //  color:green; font-size: 30px;.bg-color>.color3  // color:orchid; font-size: 30px;
}

2. 省略写法

大于号 可有空格 替代

.box4{.bg-color .color1   // 调用 .bg-color 这个类 下面的 .color1 类里面的样式
}

作用域

1. 什么是作用域

less 中的作用域和编程语言中的作用域概念相似,首先会在局部查找变量和混合,如果没有找到,编辑器就会在父作用域中查找,以此类推

less 语句

@border:1px solid red;
.box4{background: #000000;color: #fff;a {border:@border;}@border:1px solid yellow;
}

编译结果

.box4 a{border:1px solid yellow;   // a 自己的作用域里没有这个变量 去父级找
}

less 语句

@border:1px solid red;
.box4{background: #000000;color: #fff;a {@border:1px solid pink;border:@border;}@border:1px solid yellow;border:@border
}

编译结果

.box4 a{border:1px solid pink;   // a 自己的作用域里有
}

引入 importing

1. 什么是引入

可以引入一个或者多个less 文件,这个文件中的所有变量都可以在当前的less 项目中使用

比如:有一个style.less 文件,其中一个变量为@bg:red

现在我们想引入这个文件,然后使用其中的变量 @bg

当前项目文件 index.less

(1) import "main" // 引入main.less 文件

(2) 使用main.less 文件的变量

.box{background:@bg
}

注意:引入.css 文件会被原样输出到编译文件中

示例:b.less 引入a.css

a.css

.aBorder{border:20px dashed #007AFF;
}

b.less

@import "test";
@import "a.css";

编译b.less 结果

@import "a.css";

2. 引用文件 带参数

(1)reference 使用less文件 但不输出

a.less 文件

@bg:red;
.test{color:pink
}

b.less

@import "a";
.box{border-color:@bg
}

b.css (b.less 编译结果)

.test{color:pink
}
.box{border-color:red
}

b.less

@import (reference) "a"; // 注意reference 前后空格   
.box{border-color:@bg
}

b.css (b.less 编译结果)

.box{border-color:red
}

(2)inline 引用less 文件 但不作任何处理,包括不适用其中的变量混合等

a.less

@bg:red;

b.less

@import (inline) "test.less";
.box{width:100px;
}

b.css (b.less 编译结果)

@bg:red;
.box{width:100px;
}

3. 将less 作为文件对象,无论其扩展名是什么,都以less 文件来操作

@import (less) "a.css";

可在a.css 中定义变量 ,在当前less 文件中使用

4. 将css作为文件对象,无论其扩展名是什么,都以css 文件来操作,且原样输出

less 文件

@import (css) "a.less";

编译结果:

@import "a.less";

5. multiple 允许引入多次 文件名相同的文件

a.less

.color{color:red
}

less 文件

@import (multiple) "a.less";
@import (multiple) "a.less";
@import (multiple) "a.less";

编译文件

.color{color:red
}
.color{color:red
}
.color{color:red
}

关键字

说明:在调用的合集后面加!important ,所有混合集都继承它

.med(@color,@font,@height){color:@color;font-size: @font;height:@height
}.box5{.med(red,30px,300px) !important
}

编译结果

.box5 {color: #ff0000 !important;font-size: 30px !important;height: 300px !important;
}

条件表达式

1. 带条件的混合

比较运算符 <、>、<=、>=、=

注意:Less使用关键字 when 而不是 if/else来实现条件判断

.mixin (@a) when (@a = 20px){color:red;
}
.mixin (@a) when (@a < 20px){color:blue;
}
.mixin (@a) {font-size: @a;
}
.box{.mixin (20px)
}

编译结果

.box6 {font-size: 20px;color: red;
}

还可以使用关键字true,它表示布尔真

.class (@a) when (@a) { ... }
.class (@a) when (@a = true) { ... }

在Less中,只有 true 表示布尔真,关键字true以外的任何值,都被视为布尔假

.myclass {.truth(40);  // 不会匹配以上任何定义
}

Less中,条件可以是多个表达式,多个表达式之间,使用逗号‘,’分隔。如果其中任意一个表达式的结果为 true,则匹配成功,这就相当于“或”的关系。如:

.mixin (@a) when (@a < -10), (@a > 10) {width: 100px;
}

上述表达式: [-10,10] 之间的值将匹配失败,其余均匹配成功。

.class1 {.mixin(-20);
}
.class2 {.mixin(0);
}
.class3 {.mixin(20);
}

编译结果

.class1 {width: 100px;
}
.class3 {width: 100px;
}

使用 and 和 not 来进行逻辑运算

less 语句

.mixin (@a) when (@a > 50%) and (@a > 5px){font-size: 14px;
}
.mixin (@a) when not (@a < 50%) and not (@a < 5px){font-size: 20px;
}
.mixin (@a) {color: @a;
}
.class1 {.mixin(#FF0000)}
.class2 {.mixin(#555)
}

编译结果

.class1 {color: #ff0000;
}
.class2 {color: #555555;
}

2.类型检查函数

如果想基于值的类型、或特定的单位进行匹配,就可以使用 is* 函数。如:

.mixin (@a, @b: 0) when (isnumber(@a)) { ... }
.mixin (@a, @b: black) when (iscolor(@b) and (@a > 0)) { ... }`

常见的类型检查函数:

  • Iscolor:是否为颜色值。

  • Isnumber:是否为数值。

  • Isstring:是否为字符串。

  • Iskeyword:是否为关键字。

  • Isurl:是否为URL字符串。

.mixin (@a) when (Ispixel(@a)) { ... }
.mixin (@a) when (ispercentage(@a)) { ... }

3. 常见的单位检查函数:

  • Ispixel:是否为像素单位。

  • ispercentage:是否为百分比。

  • isem:是否为em单位。

  • isunit:是否为单位。

循环

循环在编程语言中应该是很常见的,一般编程语言中都有循环,例如在 JavaScript 中有 for 循环、while 循环等,但是在 Less 中没有这两种语法,而是通过自身调用来实现循环。

在 Less 中,混合可以调用它自身,当一个混合递归调用自身,再结合 表达式和模式匹配这两个特性,就可以写出循环结构。

例1:循环输出四个 padding 属性:

.loop(@i) when (@i > 0) {.loop((@i - 1));    // 递归调用自身padding: (10px + 5 * @i); }.call{.loop(4); // 调用循环
}

编译结果

.call {padding: 15px;padding: 20px;padding: 25px;padding: 30px;
}

分析:

  • 首先看第一行,是一个带有条件判断的混合,这个前面学过。.loop 带有一个参数 @i,当满足条件 @i > 0 时可以执行花括号中的代码。

  • 然后 .loop((@i - 1)) 表示调用混合自身,并且将参数值减去一,这一步只要满足条件判断就会执行,一直执行到 @i > 0

  • 最后就是在 .call 中调用 .loop,给参数 @i 赋值,因为要求是循环输出四次 padding 属性,所以可以给 @i 参数赋值为 4。

例2:使用递归循环生成栅格系统的CSS。

.xkd(@n, @i: 1) when (@i =< @n) {.grid@{i} {width: (@i * 100% / @n);}.xkd(@n, (@i + 1));
}.xkd(5);

编译结果:

.grid1 {width: 20%;
}
.grid2 {width: 40%;
}
.grid3 {width: 60%;
}
.grid4 {width: 80%;
}
.grid5 {width: 100%;
}

例3:在实际项目中,我们经常会将字体、边距等样式作为公共样式放到一个公共的文件中,然后定义一些列的样式,例如字体大小定义 12px、14px、16px 等等,这样一个一个写会比较麻烦,如果使用循环,几句代码就能实现:

.f14{font-size:14px}.font(@i) when(@i <= 28){.f@{i} {font-size: @i + 0px ; //为了生成12px}.font((@i + 2));
}.font(12);

编译结果:

.f12 {font-size: 12px;
}
.f14 {font-size: 14px;
}
.f16 {font-size: 16px;
}
.f18 {font-size: 18px;
}
.f20 {font-size: 20px;
}
.f22 {font-size: 22px;
}
.f24 {font-size: 24px;
}
.f26 {font-size: 26px;
}
.f28 {font-size: 28px;
}

例4:改变颜色

循环需要知道两个函数的用法,

length:用来获取定义的变量的长度,

extract:用来获取定义的变量的第n个元素(类似于js的通过下标获取数据)

// 定义颜色数组
@colorArr: #37a2da, #32c5e9, #67e0e3, #9fe6b8;// 定义循环最大值,此处使用颜色数组的长度
@len: length(@colorArr); // 4/*** 定义循环方法* @index--传入的循环起始值* @len--循环的最大值  也可使用常量  eg:(@index<4)*/ 
.Loop(@index) when(@index<@len){// 执行内容 // 类名参数要加大括号@{index}   // 根据index获取对应的某个值 extract(数组名, 对应的序号)li:nth-child(@{index}){  // 作为选择器color:extract(@colorArr,@index);}//递归调用 达到循环目的.Loop(@index+1);}// 调用循环
.Loop(0);

编译结果

li:nth-child(1){color: #37a2da;
}
li:nth-child(2){color: #32c5e9;
}
li:nth-child(3){color: #67e0e3;
}
li:nth-child(4){color: #9fe6b8;
}

合并属性

1. ”+“逗号分割所合并的属性

.mixin() {box-shadow+: inset 0 0 10px #555 ;
}
.myclass {.mixin();box-shadow+: 0 0 20px black;
}

编译结果

.myclass {box-shadow: inset 0 0 10px #555 , 0 0 20px black;
}

2. "+_" 空格分隔所合并的属性

.a(){background+:#f60;background+_:url("/sss.jod") ;background+:no-repeat;background+_:center;
}
.myclass {.a()
}

编译结果

.myclass {background: #f60 url("/sss.jod"), no-repeat center;
}

函数库

长度相关函数

  1. length() 函数

    length(1px solid red)// 输出3
  2. extract() 函数

    返回数组变量中指定索引的值

    @list:"red","blue","pink","grey";
    n:length(@list)n:4

其他函数参考官方文档

总结

常用的语法

  1. 定义变量

    url : http://127.0.0.1:8848

    @url/01%202021%20H5/06%20Less/01%20%E8%87%AA%E5%8A%A8%E7%BC%96%E8%AF%91.html

    比如:图片路径

  2. 混合

    (1) 不带输出的混合

    .img-100(){display:block;width:100%;
    }
    .box{img{.img-100}
    }
  3. 带选择器的伪类混合

    .hover-a(@color,@bg:transparent){ // 不带输出的混合&:hover,&.active{color:@color;background:@bg}
    }li{a{.hover-a(red)}
    }
  4. 嵌套规则

    .box{.content{.left{width:50%;}.right{width:50%;}}
    }
  5. 命名空间

为了更好地封装,我们会将会一些变量或是混合模块进行打包操作,为了后续进行复用

common.less // 定义类,变量 //  定义类
.bundle{ // 打包    // 关于伪类的.hover(@color,@bg){color:@color;background:@bg;}// 关于背景图片的.back(@path,@img,@repeat,@position:left top,@size:auto){background: url("@{path}@{img}") @{repeat} @{position}/@{size}}// 定位的.postion-r(@way,@left,@right,@top,@bottom){position:@way;left:@left;right:@right;top:@top;bottom:@bottom;}
}实际页面对应的less样式
index.less  使用:
1.引入定义的类  import "common"
2.调用类 
.bundle .hover(red)
调用 .bundle 这个类里面的 .hover 类里面的样式
  1. 导入

可以将所有的变量和类单独放在一个less文件中,便于修改和管理

实战页面:中关村创业大街

要求:1.flex 布局 2. 最大化使用less封装类

Sass和Scss

sass和scss 介绍

ruby社区的工程师觉得CSS很难用于是发明了sass,sass可以理解为简洁版CSS,但是传统前端表示看不懂,于是设计者在sass新增功能的基础上改的比较像CSS,从而方便传统前端使用,最终形成了SCSS。

Sass最后还是会编译出合法的CSS让浏览器使用,即它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

1.sass有两套语法

  1. 最新的语法叫scss,它是css 语法的扩展,即语法与css相同

  2. 更旧的语法叫sass,是一种类Ruby的缩进式语法,对空格敏感,不使用花括号,并且每个属性之间通过换行来分割

    #main p color: #00ff00;width: 97%;.redbox background-color: red;color: #000000;

注意:

(1) .sass适用于Ruby,Python等语言的开发,而纯前端的更适用于.scss,只需将 .css 改为 .scss即可。

(2) 可以在一个项目中混合使用两种语法,但不能在一个文件中混合使用两种语法。

2. sass 官网

英文网站 Sass: Syntactically Awesome Style Sheets

中文网 Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

使用scss

注意:scss 文件只有被编译后才能被浏览器识别,浏览器只认识css 文件

scss 基于服务端 node ,需要下载 node.js 下载 | Node.js 中文网

node.js 下载选择长期支持版本— windows 安装包 — 64位

1. scss 编译工具

  1. 考拉 http://koala-app.com

  2. 安装时必须要新建一个文件夹,且该文件夹中没有其他内容,然后将该文件夹设置为安装地址,直接安装将会删除该目录下所有文件。

2. 编辑器自带sass插件编译

  1. HbuliderX

    同less 安装和json 设置相同

    (1)菜单栏 — 工具 — 插件安装 — scss/sass 编译

    (2)菜单栏 — 工具 — 插件配置 — compile-node-sass 打开package.json

    "commands": [{"id": "SASS_COMPILE","name": "编译scss/sass","command": ["${programPath}","${file}","../css/${fileBasename}.css"  // 编译后的css文件位置 ],"extensions": "scss,sass","key": "ctrl+s",  // 设置编译快捷键  保存时编译"showInParentMenu": false,"onDidSaveExecution": true   }
    ]

    安装报错:

    以下信息可提炼为 缺失win32-x64-93\binding.node 文件

     LibSass 的二进制文件(F:\HBuilderX.3.5.3.20220729\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-93\binding.node)缺失,请执行下面3条命令下载对应版本的二进制文件:(有可能引发此错误的原因是 Node 版本变更)mkdir -p F:\HBuilderX.3.5.3.20220729\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-93cd F:\HBuilderX.3.5.3.20220729\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-93
    curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/win32-x64-93_binding.node

    解决方案:下载win32-x64-93\binding.node 文件

    报错原因:一般都是node-sass版本和node版本不对应

    下载方法:

    1. 电脑工具栏搜索,输入cmd 打开命令行工具 检查node 版本

    2. 输入命令 node -v 显示node版本

    3. 根据node 版本 去找 windows 对应下的 node-sass 版本

    去GitHub(代码托管服务)找到node-sass的对应版本:Releases · sass/node-sass · GitHub

    根据编辑器报错信息,下载对应版本,放到对应报错文件夹下,且修改文件名 binding.node

    比如对应报错文件夹如下:

    F:\HBuilderX.3.5.3.20220729\HBuilderX\plugins\compile-node-sass\node_modules\node-sass-china\vendor\win32-x64-93
    1. 文件夹位置 编辑器已给出提示

      具体操作:桌面— 编辑器— 右击— 打开文件位置— plugins — compile-node-sass— node_modules—

      node-sass-china —vendor —win32-x64-93 — binding.node

      注意:

      (1)如果vendor 里没有这个文件夹,自己创建一个

      (2)将下载好的darwin-x64-93_binding.node 修改为 binding.node

      (3)修改完以上操作,重启编辑器

  2. vscode

    选择左侧菜单“扩展”,搜索”easy Sass “ 插件,安装完成, 重启Vscode

    顶部菜单-->文件-->首选项--> 设置--> 搜索sass--> 选择easy sass --> 在setting.json中编辑

    "easysass.formats": [ //expanded:没有缩进的、扩展的css代码。//compact:简洁格式的 css 代码。//compressed:压缩后的 css 代码{"format": "expanded","extension": ".css" //设置编译输出的文件名},{"format": "compressed","extension": ".min.css" //设置编译输出的文件名}],"easysass.targetDir": "./css/" //提供 css 输出路径的设置(可以是绝对路径或者相对路径)

scss 语法

1. 声明变量

语法:以$开头

$avtive-color:red;
div{border: 1px solid $active-color
}

属性连写

.userCard-name {color: black;font: {size: 28px;weight: bold;family: 'Courier New', Courier, monospace;}
}

编译结果

.userCard-name {color: black;font-size: 28px;font-weight: bold;font-family: 'Courier New', Courier, monospace;
}

2. 选择器嵌套,可配合>使用

 .box {height: 100vh;background: grey;.xxx {height: 50vh;background: yellow;> .x {height: 25vh;background: blue;}}}

3. 选择器复用

.xxx{backgrond:red;&:hover{backgrond:blue;}
}  

4. 函数function

示例:rem 替换 vw时自动计算占比

$designWidth: 640;
@function px($px){return $px/$designWidth * 10 + rem;
}
.box{width:px(320)
}

5. 引入外部CSS

@import 'markdown-css'

6.mixin直接复用

@mixin debug{border:1px solid red;
}.xxx{@include debug;
}

可以配合变量使用

@mixin debug($color:red) {border: 1px solid $color;
}.text {@include debug(blue);height: 100%;margin: 0.5em 0.5em;
}

7.placeholder,重复使用相同CSS时直接将选择器并列

 %font{color:red;}.text1 {@extend %font;height: 100%;margin: 0.5em 0.5em;}.text2 {@extend %font;height: 100%;margin: 0.5em 0.5em;}

8.配合变量循环生成CSS

 $class: col-;@for $n from 1 through 24 {.#{$class}#{$n} {width: ($n/24)*100%;}}@for $n from 1 through 24 {.offset-#{$n} {margin-left: ($n/24)*100%;}
}

http://www.ppmy.cn/news/73370.html

相关文章

C#中使用git将项目代码上传到远程仓库的操作

一、远程仓库创建操作&#xff08;远程仓库使用的是gitHub&#xff09; 1、登录GitHub官网&#xff0c;注册登录账号后&#xff0c;点击创建仓库 2、仓库名称命名&#xff0c;如下所示&#xff1a; 3、创建成功如下所示&#xff1a;获得https协议&#xff08;https://github.c…

JuiceFS 在多云存储架构中的应用 | 深势科技分享

2020 年末&#xff0c;谷歌旗下 DeepMind 研发的 AI 程序 AlphaFold2 在国际蛋白质结构预测竞赛上取得惊人的准确度&#xff0c;使得 “AI 预测蛋白质结构” 这一领域受到了空前的关注。今天我们邀请到同领域企业&#xff0c;深势科技为大家分享其搭建基础平台时的实践与思考。…

在阿里做了6年软件测试,4月无情被辞,想给划水的兄弟提个醒

先简单交代一下背景吧&#xff0c;某不知名 985 的本硕&#xff0c;17 年毕业加入阿里&#xff0c;以“人员优化”的名义无情被裁员&#xff0c;之后跳槽到了有赞&#xff0c;一直从事软件测试的工作。之前没有实习经历&#xff0c;算是6年的工作经验吧。 这6年之间完成了一次…

python 图片保存成视频

&#x1f468;‍&#x1f4bb;个人简介&#xff1a; 深度学习图像领域工作者 &#x1f389;工作总结链接&#xff1a;https://blog.csdn.net/qq_28949847/article/details/128552785 链接中主要是个人工作的总结&#xff0c;每个链接都是一些常用demo&#xff0c…

洛谷 池塘计数 floor-fill BFS 模板题

&#x1f351; OJ专栏 &#x1f351; P1596 Lake Counting 题面翻译 由于近期的降雨&#xff0c;雨水汇集在农民约翰的田地不同的地方。我们用一个 N M ( 1 ≤ N ≤ 100 , 1 ≤ M ≤ 100 ) N\times M(1\leq N\leq 100, 1\leq M\leq 100) NM(1≤N≤100,1≤M≤100) 的网格图表…

Qt——Qt控件之显示窗口-QLabel标签控件的使用总结(例程:QLabel显示文本标签及图片)

【系列专栏】:博主结合工作实践输出的,解决实际问题的专栏,朋友们看过来! 《项目案例分享》 《极客DIY开源分享》 《嵌入式通用开发实战》 《C++语言开发基础总结》 《从0到1学习嵌入式Linux开发》

【CSS 选择器应用在QSS】第二天

CSS 选择器应用在QSS 【1】元素选择器&#xff08;元素通用性&#xff09;【2】id 选择器&#xff08;唯一性&#xff09;【2.1】CSS【2.2】QSS 【3】类选择器【3.1】CSS【3.2】QSS 【4】类选择器&#xff08;只针对指定元素&#xff09;【4.1】CSS【4.2】QSS 【5】通用选择器【…

语音合成工具_bark

1 介绍 多语言的文字转语音模型。 地址: https://github.com/suno-ai/bark 2 模型原理 Bark通过三个Transformer模型&#xff0c;将文本转换为音频。 2.1 文本到语义Token 输入&#xff1a;由Hugging Face的BERT标记器分词的文本 输出&#xff1a;编码生成音频的语义Token…

【面试高频 time: 2023-5-18】做分布式文件存储,如何保证分布式存储的高性能与高可用?

大家可以想到基本就是副本备份、双活、多活这种架构 在系统中通过复制协议将数据同步到多个存储节点&#xff0c;并确 保多个副本之间的数据⼀致性&#xff0c;当某个存储节点出故障 时&#xff0c;系统能够⾃动将服务切换到其他的副本 在分布式存储中⾼性能与⾼可⽤是⽭盾的&…

手把手教你怎么搭建自己的ChatGPT和Midjourney绘图(含源码)

AI程序采用NUXT3LARAVEL9开发&#xff08;目前版本V1.1.7&#xff09; 授权方式&#xff1a;三个顶级域名两次更换 1.AI智能对话-对接官方和官方反代&#xff08;markdown输出&#xff09;PS:采用百度与自用库检测文字 2.AI绘图-根据关键词绘图-增加dreamStudio绘画-增加mid…

Requests的使用例子

Requests库是一个Python HTTP客户端库&#xff0c;用于向Web服务器发送HTTP请求。它提供了简单而直观的API&#xff0c;使得向Web服务器发送HTTP请求变得非常容易。以下是Requests库的一些功能和示例&#xff1a; 1、发送HTTP GET请求 发送HTTP GET请求非常简单&#xff0c;只…

查看linux日志以及处理不能登录mysql的错误

要查看MariaDB的日志文件&#xff0c;可以使用以下命令&#xff1a; 1. 错误日志文件&#xff1a; bash sudo cat /var/log/mariadb/error.log 这将显示MariaDB的错误日志文件的内容。如果在默认位置找不到错误日志文件&#xff0c;您可以尝试查找其他可能的位置&#…

Activiti实战——Springboot整合Activiti

目录 一、Activiti数据库表名说明 二、Spring boot整合activiti 1. 创建springboot项目 2. 引入activiti依赖及项目依赖 3. 配置数据源 &#xff08;1&#xff09;创建数据源配置文件 &#xff08;2&#xff09;配置文件 4. 配置Acitviti引擎 5. 启动项目 三、Activiti…

DJ5-4 交换局域网(第一节课)

目录 一、局域网概述 1、LAN 的特点和分类 2、常见的网络拓扑结构 二、计算机与局域网的连接 三、局域网体系结构 四、链路层寻址地址 1、MAC 地址分配 2、MAC 地址识别 五、ARP 地址解析协议 1、ARP 地址解析协议 2、ARP&#xff1a;两个主机位于同一个局域网 3、…

Godot引擎 4.0 文档 - 入门介绍 - Godot 关键概念概述¶

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a;Overview of Godots key concepts — Godot Engine (stable) documentation in English Godot 关键概念概述 每个游戏引擎都围绕您用来构建应用程序的抽象展开。在 Godo…

AUTOSAR知识点 之 COM (二):ISOLAR-AB的配置

目录 1、概述 2、ISOLAR-AB配置 2.1、ComGeneral 2.2、ComConfig 2.2.1、ComGwMapping 2.2.2、ComIPduGroups 2.2.3、ComIPdus

超越大数据的边界:Apache Flink实战解析【上进小菜猪大数据系列】

上进小菜猪&#xff0c;沈工大软件工程专业&#xff0c;爱好敲代码&#xff0c;持续输出干货。欢迎订阅专栏 Apache Flink是一种快速、可靠、可扩展的开源流处理框架&#xff0c;被广泛应用于大数据领域。本文将介绍Apache Flink的实战运用&#xff0c;包括其核心概念、架构设…

LeetCode346场周赛

2023.5.21LeetCode346场周赛 A. 删除子串后的字符串最小长度 思路 使用栈模拟&#xff0c;每当遇到AB和CD时出栈 代码 class Solution { public:int minLength(string s) {string res s.substr(0, 1);for (int i 1; i < s.size(); i ) {res s[i];int n res.size()…

选择性搜索算法(Selective Search )——SS算法

文章目录 一、前言二、object Detection VS object Recognition&#xff08;Selective Search的提出&#xff09;2.1object recognition与object detection的关系2.2滑动窗口方法的局限性2.3Selective search算法的提出 三、Selective Search算法3.1什么是Selective Search&…

基于yolov3训练自己的数据集

训练数据集的教学视频链接 42. 第六章&#xff1a;基于YOLO-V3训练自己的数据集与任务_哔哩哔哩_bilibili 数据打标签 下载labelme标注工具 通过pip install labelme下载&#xff0c;打开anaconda prompt&#xff0c;切换到下载labelme的环境&#xff08;我的是pytorch&…