一、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

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

20190421-那些年使用过的CSS预处理器（CSS Preprocessor）之Sass and Less
写在前面乱七八糟的前言: emmm,还是决定把Sass与Less单独出来写成一篇,可能会稍微好辣么一丢丢?TAT语法特性是真的香,通篇下来能吸收个10%自我感觉已经很nice了,毕竟渣渣的我有渣渣的自 ...
Css、less和Sass（SCSS）的区别
随着前端开发的不断发展,CSS也逐渐延伸出了很多新的语言,less和Sass就是其中两种,下面我们就一起来看看它们到底有何区别. 背景 CSS(Cascading Style Sheets,层叠样式表 ...
css 预处理器 less sass
文章目录 1. less 1.1 less 的安装 1.2 less用法 1.2.1 命令行用法 1.2.2 变量 1.2.3 混合 1.2.4 嵌套 2. Sass 2.1 Sass简介 2.1.1 ...
[css] 为什么要使用sass/less？
[css] 为什么要使用sass/less? 为了提示开发效率,使得css编写更加灵活个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣 ...
[css] 你有用过sass中的Mixin功能吗？它有哪些作用？
[css] 你有用过sass中的Mixin功能吗?它有哪些作用? 1.混合用法 2.函数用法1. @mixin ellipsis-one {overflow: hidden;text-overflow ...
[css] 说说你对sass的嵌套规则的理解？
[css] 说说你对sass的嵌套规则的理解? 嵌套类型有:选择器嵌套.属性嵌套.伪类嵌套.群组选择器嵌套 . .tenant-detail { background: transparent!imp ...
CSS的预编译——less语言基本语法教程（入门）
less语言基本语法教程(入门) 一.CSS解析 css是一门标记性语言,语法简单,对使用者的要求也比较低. 缺点:1.对于css:使用css时需要书写大量的看似没有逻辑的代码,不方便维护和扩展,不利 ...
sass/lsee 转换css 网站 SASS 转 CSS 工具，在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
sass/lsee 转换css 网站 SASS 转 CSS 工具,在线 SASS/SCSS 编译工具 - 在线工具-wetools.com微工具
W3school：CSS基础：教程、简介、语法、选择器、使用（在HTML中引入）
W3school:CSS基础:教程.简介.语法.选择器.使用(在HTML中引入) 教程.简介: 链接:https://www.w3school.com.cn/css/index.asp 一.CSS语法 ...
HTML5+css+jquery网页设计+加静态网页部署到服务器上
文章目录前言一.使用软件二.实际效果主页面效果关于我们界面效果个人博客页面效果收藏视频页面效果三.js实现的动态效果概述四.将网页部署在服务器上购买服务器和域名域名解析 SSL证 ...

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

一、sass基本规则

二、sass的基本语法

三、云服务器

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

最新文章

热门文章