sass的学习笔记

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