文章目录
sass的学习笔记
一.sass的介绍
它是css的预编译框架:自称世界上最成熟.最稳定.最强大的专业级css扩展语言!
css不是一个编程语言,可以它来开发网页,但是没办法用它来编程。但sass的出现,让css实现了通过代码编程来实现的方式。
SASS是一种CSS开发工具,提供了许多便利的写法,让css的处理实现了可编程处理。
sass基于ruby语言,Ruby,一种简单快捷的面向对象(面向对象程序设计)脚本语言。
sass的扩展名:第一种:.sass(基于ruby语法,没有{}和分号)。 第二种:.scss(正常的css代码)
二.环境搭建及编译指令
1.sass编译环境:将sass代码编译成css代码(html加载的还是css代码)
考拉软件koala
vscode下面easysass
利用ruby环境进行编译 - 配置ruby环境
利用gulp进行编译 - 优先选择
利用webpack进行编译 - 更优先选择
2.利用ruby环境进行编译 - 配置ruby环境
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。
默认安装 第二步复选框全部勾选或者参考官网。
如何检测是否安装成功
cmd -> ruby -v(打印ruby的版本) ->显示版本,代表安装成功
gem -v (gem是ruby自带的包管理工具)
gem install sass 通过gem安装sass,由于网络原因,安装不成功。
通过本地下载的sass文件进行安装()
gem install sass文件的本地路径(最好路径中不要出现中文)
sass -v 进行测试
三.编译后输出格式
默认情况下,SASS 提供了四种格式的 CSS 输入,默认情况输出是嵌套格式
nested 嵌套(默认)
compact 紧凑 每个选择器代码在一行
expanded 扩展(完全格式化标准)
compressed 全部压缩成一行
四.sass扩展名
sass 有两种后缀名文件:
第一种后缀名为 sass,不使用大括号和分号;
第二种就是使用的 scss 文件,这种和写的 css 文件格式差不多,使用大括号和分号。
在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求而报错。
五.sass-变量的定义(重点)
变量:必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:
进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。
引用变量的值,直接使用变量名称,即可引用定义的变量的值。
特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作
为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
1.变量可以参与任意的运算(+ - * / % random() floor() ceil() )
2.变量存储公有的值(颜色,尺寸…)
//编写的scss代码
$box_width:100px; //普通变量
$box_height:200px!default; //默认的普通办理
$bgcoloe:#00ff00; //普通变量
$none:none;
body {
width: $box_width - 10;
height: $box_height+50;
font-size: random()+px;
width: percentage(1/2)
}
//生成的css代码
body {
width: 90px;
height: 250px;
font-size: 0.20904