Sass基础学习（一）

把Sass编译成css
1、打开命令提示符工具，用“cd desktop”进入到桌面。
2、“mkdir ninghao-sass && cd $_”在桌面创建一个名叫“ninghao-sass”的文件夹，并打开此文件。（倘若显示系统找不到指定路径，则需要输入“cd ninghao-sass” 命令即打开此文件）
3、输入“atom”则会打开atom编辑软件（为了一致，更加容易清楚，我也安装了atom编辑软件，在命令行中未能执行此命令，便自行打开atom编辑软件）。

4、打开atom之后，创建名叫“sass”和“css”的两个文件夹，在“sass”文件夹之下创建“style.scss”文件，进行简单编辑。

5、命令行中输入“sass sass/style.scss:css/style.css”,回车之后将在css文件夹之下编译一个名为“style.css”的文件（手动方法：编辑一次sass/style.scss就可以使用此命令编译一次css/style.css）此方法较为繁琐！

自动编译sass

1、命令行输入“sass –watch sass:css”回车（将sass文件进行监视，倘若sass文件有改动，则会自动编译到css文件之中，比手动方法方便快捷！）

2、自主测试
回到atom软件编辑器中，进行设置，当保存时，css/style.css则会自动编译成功

修改编译输出的css样式的格式
1、输出格式有四种：nested(嵌套)、compact（紧凑）、expanded（扩展）、compressed（压缩）。默认嵌套格式
2、 nested(嵌套)样式

编译过后的css样式会自动识别层级关系，但是显示的样式也是在内部紧凑！

3、回到命令符，按住“Ctrl+C”将停止监视，终止自动编译。
4、输入“sass --watch sass:css --style compact(编译风格)”，回车。回到atom即可看到紧凑css样式。

5、输入“sass --watch sass:css --style compressed (编译风格)”，回车。回到atom即可看到压缩css样式。

6、输入“sass --watch sass:css --style expanded (编译风格)”，回车。回到atom即可看到扩展css样式。

此样式是我们在前端开发中最清楚、明了、常用的css格式。

.sass与scss的区别

Sass有两种语法，一种是.sass的命名方式，另外一种是.scss命名方式，从图中可以看出两种方式在书写过程中在注释、引用、结束分号等地方的方式是不一样的。

变量-Variables
1、声明变量的格式是$变量名：变量值（切记在.scss文件中书写值时，要加引号，否则会报错）
2、声明变量之后，我们在.scss中定义css样式时引用变量，编译之后的css样式则会将变量值加载到css样式之中。

3、在变量之中也可以再嵌套变量使用，当定义css样式时，则会通过变量值进行加载，最后按照css格式的样式编译出来。

嵌套-Nesting
嵌套则是在.scss文件中，按照需要定义的css样式直接嵌套输入，比如说，在我们前端开发之中，往往在nav导航栏之下，用ul列表进行样式设置，直接嵌套css样式的定义，不会影响当前（nav）属性之外的同样属性，编译之后的css样式则会根据css格式层级编译出来。

嵌套时调用父选择器
1、当我们在伪类选择器使用父选择器嵌套时，我们会看到编译之后的伪类选择器和上级之间是有空格显示的，这样是不正确的应用。

2、所以直接需要调用父类选择器时，我们需要在.scss文件中需要调用父类的前面添加一个&符号，这样编译之后，可以看到编译之后伪类选择器中的css样式之中是没有空格显示的。

3、同理，我们来测试调用父选择器：可以看出，使用了&符号的地方则是调用了父选择器进行编译。

Sass基础学习（一）相关推荐

bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>boo ...
Sass基础——Rem与Px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-size进行计算.这样一 ...
前端工程师就业班Sass基础+进阶+案例开发经验【JS++前端】-艾小野-专题视频课程...
前端工程师就业班Sass基础+进阶+案例开发经验[JS++前端]-98人已学习课程介绍本套课程是摘选自JS++第三期前端工程师精英就业班系列课程,进行系统深度的对Sass技术知识点 ...
零基础学习大数据分析难吗？
之前看到过一个行业招聘难度的对比,在这里列一下:(来源是<2021年互联网人才招聘白皮书>) 无论是DBA还是大数据分析师,和java前端后端相比,都不算是最卷的,甚至还算是挺好的, 你看 ...
lua基础学习笔记-字符串
lua基础学习笔记-字符串字符串 Lua 语言中字符串可以使用以下三种方式来表示: 单引号间的一串字符. 双引号间的一串字符. [[ 与 ]] 间的一串字符. 例: string1 = " ...
【转】oracle PLSQL基础学习
[转]oracle PLSQL基础学习 --oracle 练习: /**************************************************PL/SQL编程基础****** ...
python创建对象的格式为_Python入门基础学习(面向对象)
python基础学习笔记(四) 面向对象的三个基本特征: 封装:把客观事物抽象并封装成对象,即将属性,方法和事件等集合在一个整体内继承:允许使用现有类的功能并在无须重新改写原来的类情况下,对这些功能 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...
动画产业基础学习教程 Rad How to Class – Animation Industry Fundamentals
如何分类--动画产业基础大小解压后:6.2G 含课程素材 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 信息: 绘画技巧.解剖学.角色设计.透视和整体讲故事--这门 ...
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender
Blender纹理基础学习视频教程 CGCookie – Fundamentals of Texturing in Blender Blender纹理基础学习视频教程 CGCookie – Funda ...

Sass基础学习（一）

Sass基础学习（一）相关推荐

最新文章

热门文章