1.sass编译环境依赖于ruby
先下载ruby 本次下载的是 rubyinstaller-2.3.1-x64版本 安装
2.将sass文件下载到本地 cmd 命令: get install 路径 :路径为本地sass文件路径
3.测试是否安装成功:ruby -v gem -v sass -v 查看安装的sass版本号
4. 将sass文件(二种扩展名.sass/.scss)变成css文件
编译单个文件
sass文件目录 sass --watch style.scss:style.css --style expanded
编译整个文件夹
首先要 命令进入开发文件夹 执行sass --watch scss/. : css/. --style expanded命令
sass核心
- 编译输出格式
默认情况下,SASS 提供了四种格式的 CSS 输入,默认情况输出是嵌套格式
nested 嵌套(默认)
compact 紧凑 每个选择器代码在一行
expanded 扩展(完全格式化标准)
compressed 全部压缩成一行
-
- sass 扩展名
sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这 里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。
在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求而报错。
- 变量:必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:
进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。
引用变量的值,直接使用变量名称,即可引用定义的变量的值。
-
- 特殊变量:一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作
为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常 可以用于声明版权信息。
- 选择器嵌套,在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
sass 中可以通过@mixin 声明混合(混合宏),可以传递参数,参数名称以$开始,多个参数之 间使用逗号分隔,@mixin 的混合代码块由@include 来调用。
- 继承扩展--@extend
在 SASS 中,通过继承/扩展来减少重复代码,可以让一个选择器去继承另一个选择中所有
的样式,子类的样式(占位继承--%)。
-
- Sass-导入
CSS 本身包含一个指令@import,但是 CSS 中的@import 每次执行都会发送一次新的请求都会消耗一定的资源。
当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此,sass有一个特殊的约定来命名这些文件。
此约定即,sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。当你@import一个局部文件时,还可以不写文件的全名,即省略文件名开头的下划线。
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时,这非常有用。在这种情况下,有时需要在你的样式表中对导入的样式稍作修改,sass有一个功能刚好可以解决这个问题,即默认变量值。