安装nvm
前提条件:如果电脑已经安装过node,需要先卸载
卸载node
打开控制面板–程序与功能–搜索node–右键卸载
为了保证卸载的干净,c:\user\用户名 查看有没有 .npmrc或者yarnrc这些文件,有的话就删掉
到环境变量查看是否存在与node相关的环境变量 删除
window + r — cmd — node -v — npm -v
安装nvm
找到nvm安装路径 -》settings.txt文件 -》 配置下载源
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
通过nvm安装node
安装指定版本的node
nvm install 14.18.0
# 查看所有可下载的node版本
nvm list available
使用下载的node版本
nvm use 14.18.0
通过 node-v npm -v
查看以安装的所有node版本
nvm list
通过nvm安装8版本以上的node 不会自动安装npm
所以可以通过去官网下载指定版本的zip文件,之后将它解压到nvm的文件中
将文件名称改为对应下载的版本号即可。
sass安装
通过npm下载
npm install -g sass
sass
scss其实和sass是一样的,只不过scss是sass的第三代语法。
在学习css过程中我们清除的发现,css如它的概念一样;并不是一门编程语言。在书写样式的过程中,没有涉及到变量、条件语句、函数等等。这就导致在实现某些重复度较高的样式时,仍然需要一行行单纯的去描述,这是一件很繁琐的事情。
于是,就有人开始为css加入一些编程元素,这些工具被叫做css预处理器。
它的基本思想是用一种专门的编程语言,进行网页样式的开发,然后在编译成正常的css文件。
文件编译
一般直接进入到项目的根目录,然后开启终端来启动编译,分为单文件编译和多文件编译
单文件编译
sass --watch index.scss:index.css
该命令的意思是,sass会自动监听当前文件夹下的index.scss,并自动编译为index.css,然后将编译完的文件保存在当前目录下
也可以以下这种写法
sass --watch scss/index.scss:css/index.css
以上命令的意思是,将scss文件夹下的index.scss文件编译到css文件夹下的index.css中。
多文件编译
sass --watch scss:css
将当前目录下的scss文件夹中所有的scss文件编程到css文件夹下并生成css文件。
导入其他的样式文件
在开发过程中,多个页面之间可能存在重复的样式代码片段,这时可以将它单独抽离出来作为一个公共的样式文件。之后通过@import ‘文件名’;引入到需要的页面样式文件中即可。
@import './reset.scss';
忽略编译(局部文件)
xxxxxxxxxx1 1npm install -g sassbase
语法:在需要忽略编译的文件名称前加上一个下划线 _
。
scss五大基础语法
scss嵌套规则(语法规则)
在scss中允许我们在书写样式时,可以像写结构一样进行嵌套
示例:
有如下结构
<div class="wrap">
<header>
<nav>
<div class="logo">
<img src="../day10/作业/images/logo.png" alt="">
</div>
<ul>
<li>集团简介</li>
<li>集团简介</li>
<li>集团简介</li>
<li>集团简介</li>
<li>集团简介</li>
</ul>
</nav>
</header>
</div>
css样式写法
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
a {
color: #000;
}
.wrap {
width: 100%;
}
.wrap header nav {
display: flex;
background-color: #f9f9f9;
height: 70px;
align-items: center;
}
.wrap header nav .logo {
height: 50px;
padding: 0 40px;
}
.wrap header nav .logo img {
height: 100%;
display: block;
}
.wrap header nav ul {
display: flex;
}
.wrap header nav ul li {
font-size: 20px;
font-weight: 900;
font-style: italic;
line-height: 70px;
padding: 0 20px;
border-right: 1px solid #000;
}
.wrap header nav ul li:hover {
background-color: red;
}
scss写法
@import "./reset.scss";
.wrap {
width: 100%;
header{
nav{
display: flex;
background-color: #f9f9f9;
height: 70px;
align-items: center;
.logo{
height: 50px;
padding: 0 40px;
img{
height: 100%;
display: block;
}
}
ul{
display: flex;
li{
font: {
size: 20px;
weight:900;
style:italic;
};
line-height: 70px;
padding: 0 20px;
border-right: 1px solid #000;
// font-size: 20px;
// font-weight: 900;
// font-style: italic;
&:hover{
background-color: red;
}
}
}
}
}
}
父选择器 &
在scss嵌套规则中,在花括号内书写表示选择到当前的元素为其设置样式
li{
font: {
size: 20px;
weight:900;
style:italic;
};
line-height: 70px;
padding: 0 20px;
border-right: 1px solid #000;
&:hover{
background-color: red;
}
}
样式属性嵌套
前提条件:有相同的属性前缀
li{
font: {
size: 20px;
weight:900;
style:italic;
};
}
等价于
li{
font-size:20px;
font-style:italic;
font-weight:900;
}
变量声明
作用:将一段高复用(例如十六进制颜色值或rgb颜色值等等或全局的统一字体)样式以一个变量名的方式存储起来。之后在scss中使用变量名即可调用对应的样式值。
基础语法:
$变量名:变量值
使用
$kernColor:#000;
li{
font: {
size: 20px;
weight:900;
style:italic;
};
line-height: 70px;
padding: 0 20px;
border-right: 1px solid #000;
&:hover{
background-color: $kernColor;
}
}
全局变量、局部变量
- 全局变量:在最外层元素外面定义的变量就是全局变量
- 局部变量:在元素内部声明的变量就是局部变量
继承 @extend
作用:当有一段代码片段被大量重复使用,就可以通过@extend来继承使用,减少冗余代码。
它允许一个选择器继承另一个选择器的样式(不可以继承子代元素的样式)
{
@extend 选择器名;
}
% 占位符
用于定义公共的被继承样式代码片段
特点:不被@extend调用就不会被编译,且不用担心于页面中的类名发生冲突。
%common {
width: 100px;
height: 200px;
background-color: blueviolet;
}
.son2 {
// background-color: red;
@extend %common;
}
mixin 混合器
基础语法:
// 通过@mixin定义代码块
@mixin gcolor{
color:red;
background:pink;
}
// 使用
// 通过@include 调用声明的代码块
button{
@include gcolor;
}
向混合器传递参数
// 通过@mixin定义代码块
// 定义在@mixin这里的两个变量,我们叫做形参(形式参数),形式参数并没有具体的值,也就两个空变量
@mixin gcolor($c,$bgc){
color:$c; // 所以现在我的color值为 $c 就是两个普通的字符没有东西
background:$bgc;
}
// 使用
// 通过@include 调用声明的代码块
button{
// 定义在@include小括号里的值,我们叫做实参(实际参数),这两个实际参数会按顺序 给到形式参数上,也就是让上面两个空变量拥有了值
@include gcolor(red,pink);
}
// 需要注意,此时调用这个混合器,必须传递对应的参数过去,否则将会报错,传递的顺序与定义时一致。
还可以为形式参数定义默认值
// 通过@mixin定义代码块
// 此时为两个形式参数设置了默认的拥有值
@mixin gcolor($c:red,$bgc:pink){
color:red;
background:pink;
}
// 使用
// 通过@include 调用声明的代码块
button{
// 此时调用这个混合器的时候可以不传递参数,也可以传递参数,如果不传递,那么参数的值将会值默认值,如果传递,则应用传递进去的值
// 不传递
@include gcolor;
// 传递
@include gcolor(green,skyblue);
}
还可以传入指定的对应值
// 通过@mixin定义代码块
@mixin gcolor($c:red,$bgc:pink){
color:red;
background:pink;
}
// 使用
// 通过@include 调用声明的代码块
button{
// 此时,我不想改变文字颜色,只改变背景颜色
// 通过指定形参的名字给到它对应的值,另一个则可以不传递(前提是形参有默认值,否则将会报错)。
// 1、不用考虑传递顺序 2、不用担心漏掉参数
@include gcolor($bgc:skyblue);
}
向混合器传递样式片段
// 定义
// 在定义mixin代码块时,可以在代码块内部添加 @content,之后在调用这个代码块时,传入对应的样式片段,传入的样式片段就会替代@content,出现在对应的位置
@mixin gcolor($c:red,$bgc:pink) {
color: $c;
background: $bgc;
@content;
}
.btn2{
@include gcolor($bgc:skyblue){
border: none;
width: 400px;
height: 50px;
border-radius: 50px;
font-size: 20px;
};
}
// 经过混合后,最终的css样式代码如下
.wrap header .btn2 {
color: red;
background: skyblue;
border: none;
width: 400px;
height: 50px;
border-radius: 50px;
font-size: 20px;
}
自定义函数
允许用户自己编写自定义函数,可以将一些需要计算的值传递进去,然后经过运算后返回出一个结果值。
基础语法:
// 通过 @function 来声明一个函数 然后为这个函数自定义一个名称,再然后在小括号中写上自定义参数(形参),最后在函数内部通过 @return 来返回结果值
// 定义
@function sum($num1,$num2){
@return $num1 + $num2;
}
// 使用
p{
width:sum(10px,30px)
}