配置环境:

1、安装:终端输入

gem install compass\\如mac安装遇权限问题需加 sudo gem install sass

3、查看版本

sass -v

4、创建workspace,进入workspace

mkdir workspace

cd workspace

5、搭建前端样式

compass create learn-compass-init (项目名)

翻了一圈居然没有一个人把网址转化成文字好让大家复制的，都在截视频？？？？？

我来：https://www.rubydoc.info/gems/sass/Sass/Script/Functions

css中原生@import指令弊端：

1、放在代码最前边，否则不起作用。

2、对性能不利。识别到@import才下载，浏览器阻塞。

原生的import和sass的import的区别

如果安装特定的版本 gem install --version=3.3

sass是基于ruby开发，基于ruby的，所以使用之前需要先安装ruby

1. 安装ruby  https://rubyinstaller.org/downloads/ 下载最新的版本安装,如果版本太低安装不了sass

2. gem是rubi的包管理工具，相当于node的npm一样，安装sass的话直接 gem install sall

3. sass -v 查看版本

sass中类的属性嵌套

sass中类的嵌套引用

 块注释解释引用样式

基于sass的既定规则

使用css原生import的方法

scss文件中声明标题和文章字体

sass-convert 命令：scss、sass互相转换

利用compass创建项目 

use gem安装compass 

使用gem安装sass

切换gem源

@mixin functionName {}

sass 引入，

@import ‘zxc’ zxc 中 $z=zx

sth=z

跨游览器 normalize P，span等等

sass @import 在编译时，将背引入的文件整合到css中

变量操作：

    1.直接操作变量，即变量表达式。

    2.通过函数。

• 跟代码块无关的函数，多是自己内置函数称functions

• 可重用的代码块。称mixin

1. 通过复制拷贝的方式使用，通过@include方式调用

2. 使用时以组合声明方式存在，以@extend方式调用

——————————————————

H:60黄|120绿|180青|240蓝|300洋红|360红

S(saturation)饱和度

L(lightness)亮度

——————————————————

@mixin通过@include引入

@mixin col-6{
    width:50%;
    float:left;
}

.webdemo-sec{
    @include col-6();//@mixin通过@include引入
    &:hover{
        background-color:#f5f5f5;//
    }
}

带参数mixin

@mixin col ($width: 50%){//默认是50%
    width:$width
}

.webdemo-sec{
    @include col(50%);//引入时传递参数
    &:hover{
        background-color:#f5f5f5;//
    }
}

继承@extend

.error{
  color:#f00;
}
.serious-error{
  @extend .error;//.serious-error插入到.error里
  border: 1px #f00;
}

scss sass转换

sass -convert main.scss main.sass

---------------------------------------------

文件加下划线，局部文件

---------------------------------------------

@import"局部文件目录" 

导入局部文件

@import所在的文件称为宿主文件

---------------------------------------------

reset浏览器默认样式全部清除

Normalize选择性的剔除替换

---------------------------------------------

sass不但提供类的嵌套也提供了属性的嵌套

.main-sec {//一个空格在类选择器后边
 font-family {
     font：{
       family:$main-sec-ff;//@import导入文件的变量
       size:16px;
     }
 }
}

• extend
  

extend

基于sass的既定规则

使用css原生@improt的既定规则

compass安装

gem install compass 

查看版本

compass -v

创建compass框架

compass create 项目名称

早期的sass采用.sass后缀，这是一种类Ruby语言，对空格敏感，且没有大括号。后来采用.scss后缀，和css语法很类似。