CSS day_14(6.29) Sass基本规则和语法、云服务器的购买和使用

一、sass基本规则

1. 编译

（1）编译命令

sass -w 监听的文件夹名:编译的文件夹名

（2）注意事项

sass语法比较严格，比css严格，因此该有的分号都要写全否则报错。

在编译中cmd可能产生不能马上时时编译，发现cmd没有编译，按ctrl+c一次就可以马上编译。连续按两次ctrl+c退出编译，再编译时需要重新输入编译命令。

编译过程中文件夹，文件不能是中文。同学无限次犯这种错误，不可原谅

（3）vs code 编译方法

 

2.编码规则

@charset "utf-8";

在这个规则下，可以写中文字符。但是不是每个安装方式，每个版本都需要。

注意：改规则写在文件的第一行，这样以下才能识别中文字符。

3.注释规则

/**/ css的注释方式，在scss语法中也可以使用这种多行注释的方式，这种方式的注释将全部被编译到css文件中去

// 双斜线的注释方式，在scss语法中可以用它做单行注释，这种方式的注释不会被编译到css文件中去

4.嵌套规则【重点❤❤❤❤❤】

scss语法中的嵌套规则是按照html标签嵌套的方式，用{}包裹所有的标签和样式。当编译之后，所有的嵌套会自动形成后代选择器，这样保证了html标签的关系，以及结构不会混乱，权重值也能得到保证。

 

二、sass的基本语法

1.sass的变量

$变量的声明，变量名：值。变量名不能是数字开头，值可以是css的任何值，也可以是一个表达式。

一般变量放在最上方，变量是有读取顺序的，从上向下读取，使用变量时也需需要在声明变量之后使用。

$a:100px;
$b:center;
$c:#343434;
$d:1px solid red;
$e:rgb(255,0,0,0);
$f:100px+10px;
$light-blue:blue;
$body-bg:$light-blue;

应用场景：提前做一些颜色库，或者字体字号库，通过变量的引用整体更改，大大提高了效率。

全局变量和局部变量的区别

写在scss文件全局的，没有在任何{}中的都是全局变量。

局部变量是创建在某个选择器的花括号中的，在局部创建一个供自己和内部元素使用的变量。

2.sass的计算功能

在scss文件编辑中可以使用简单的计算，但不宜过复杂的逻辑。

在计算过程中sass对加减法比较友好，对乘除法格式要求不太固定，不友好。

计算可能的失败原因系统I/O调用顺序导致的。

复杂计算尽量不要用scss完成，css就是写样式的，不做逻辑计算使用。

注意事项：

不是每一次使用的计算方式都可以正常快速编译，因此减少scss的计算功能。

编译的过程因为每个电脑不同，暂停时可能失效，遇到一直报错。关闭监听编译，重启监听编译的语句。

编译的过程中出现暂停情况，此时暂停期间报错没有更改。可能更改后依然报错。先退出编译在重启编译，进行新的一次编译就会成功。

3.插值语句

插值语句是使用#{}将变量包裹起来，相当于将变量变成使用其字符串的值。简单说就是把变量的值变成字符串使用。

在选择器中不能直接使用变量，只能用插值语句将变量变成字符串后使用。

4.父选择器&

写在嵌套的语法中，&代表当前花括号上层的选择器。

在嵌套格式中使用伪类，用&父选择器是非常重要，也是必要的。

5.混合指令

混合指令的创建用@mixin btn(形参) {}，使用时@include btn(实参);相当于函数的作用，但是没有返回值，调用直接渲染。

 

6.继承指令

继承

@extend 指令可以让一个选择器，继承另一个选择器的所有样式。并且最后编译之后是用群组选择器完成的。

要继承的选择器一定要写全，如类的. id的#,后代，子代等.

继承多个选择器只需要在@extend后加多个选择器用逗号相连

7.占位符选择器%

占位符选择器也是选择器的一种，它旨在sass中出现，css中没有。

占位符选择器，%选择器名字，同样可以使用继承@extend 来渲染其他元素，但是这个选择器中的内容，包括占位符选择器本身都不进行编译，在css中找不到占位符选择器。

8.scss的高级语法

条件语句

多条件判断

循环语句

循环语句是使用@for指令限制某个范围，重复输出。每一次按照（变量值）对输出结果进行变动。

@for $i from 1 to 5 ，to不包含结束值

@for $i from 1 through 5 ， through包含结束值

 

三、云服务器

阿里云服务器的购买

阿里云首页：https://www.aliyun.com/

下载ftp上的demo.rar 写好的代码

阿里云注册

云服务器购买

进入云服务器产品 > 立即购买

云服务器ECS_云主机_服务器托管_弹性计算-阿里云

 

 

 

 

 

 

 

 

 

 

 

 

 

 

项目启动

找到这个文件夹之后，删除文件夹内的所有内容

把你需要的html文件拷贝进去

直接访问ip地址可以查看这个index.html,不能改名

安全组80端口必须是开放的

 

增加后台端口

拷贝服务器文件夹

 

最后访问ip地址 也可以访问 http://ip:80 也可以

阿里云服务器：

链接: 百度网盘 请输入提取码 提取码: ur7a

新浪云服务器

链接: 百度网盘 请输入提取码 提取码: e3dn