Sass-最成熟稳定的css扩展语言

语法

创建和编译

创建工程

使用sass创建：就是手动创建一个文件夹

使用compass创建：进入项目目录，使用compass create

命令

compass 带参数创建：compass create —bare —sass-dir”sass” —css-dir”css”

编译sass文件

使用sass命令行：sass —watch demo1.scss:demo1.css

监视整个文件夹：sass —watch sass:stylesheets

风格：nested：结尾大括号跟在最后一个样式的后面

expanded: js函数风格

compact：一个选择器一行

compressed: 压缩风格，去掉注释，去掉空格，生产环境下用的格式

使用sass命令行：sass demo1.scss demo1.css

监视sass文件

使用compass编译

因为是使用compass create创建的工程，所以compass知道哪个是sass文件，知道编译到哪个文件去

compass compile 命令编译

compass watch 监视整个文件夹

compass watch —force 强制编译，不管文件有没有变动

输出风格compass watch —force -s compressed: -s表示—output-style

注释

// 单行注释，不会编译到css文件中

/**/ 标准css样式

/!/ 重要注释，使用压缩风格该注释也会在

sass不支持中文注释，要使用中文注释的话，找到路径：C:\Ruby24\lib\ruby\gems\2.4.0\gems\sass-3.4.25\lib\sass然后在engine.rb文件中添加：Encoding.default_external = Encoding.find(‘UTF-8’)

基础语法

变量的定义和使用

变量的导入

部分文件以_开头，不会被编译成css文件

嵌套

层级嵌套

属性嵌套：多值属性

& 引用父选择器

@at-root 跳出嵌套：@at-root .div1 但是不能跳出@media块

@at-root(without: media rule){.div1} 跳出@media块 不添加rule就跳不出@media的外层选择器

@at-root和&结合：.text-info}

继承

有相邻选择器的无法继承，如：.div1 +. di2 {}; 还有包含选择器.div1 div2，如果继承的是a元素，具有:hover效果，那么:hover效果也会被继承，@media无法继承@media之外定义的样式

占位选择符

sass进阶

数据类型

Number类型

String类型

List数组类型

Map对象类型

Color颜色

Boolean布尔

Null空值

变量操作

== != 所有类型都支持

< > = 只支持数字类型

+-* / %

使用各种操作符时，一定要用空格隔开两个变量，在使用+连接时，前面的有‘’后面的没有，结果连在一起是有‘’，第一个没有后面的有，结果是没有‘’。在字符串中做运算使用#{$变量}包裹变量；在除法中，两个都是原生的样式，sass是不会做运算的，只有结合变量才会，如果非要原生做运算，使用()括起来。

@mixin混入

函数

Sass高级

@if 三目运算；@if…@else if…@else

@while

@for

@each

插件库：

normalize 样式标准化：compass-normalize 有很多模块，可以按需引入

html5

base

links

typography

embeds

groups

forms

tables

susy 布局

breakpoint 响应式