sass安装和sass基础知识

一：sass简介

1. 什么是css预处理器

• 用一种别的专业语言写web样式，这些样式经过编译成为css语言
• 详情参见慕课网笔记 http://www.imooc.com/code/5993

2.有哪些css预处理器语言

• 流行的有三种：sass less stylus

3. 为什么用sass

• 使用变量
• 自动转换rgba颜色值
• 忘记浏览器前缀
• 嵌套规则
• media query 更简单
• 自动压缩css

4. 什么是sass
很简单的说，sass是一门css的预处理器语言，最终编译成的结果是css
5. .sass和.scss的联系
sass最初是为了配合haml而设计的，所以有着和haml一样的缩进风格，从第三代开始，保留缩进风格，完全向下兼容普通的css代码（scss）
一般来说，用scss的多，因为兼容普通css代码，转化方便
6. compass和sass的联系
compass是sass的工具库，在sass的基础上封装了一系列有用的模板和模块，补充sass的功能。compass和sass的关系类似于jQuery和JavaScript的关系
7. compass的5大模块
reset重置
css3
layout
typeography
utitltis
8. 安装sass：

• 因为sass底层是用ruby写的，所以首先要安装ruby，ruby的安装直接下一步下一步就行。（在Windows下需要安装ruby，Mac自带ruby环境，所以不用安装）
  https://rubyinstaller.org/
• 检查ruby是否安装成功
  gem
• 获取sass帮助
  sass -help
• 安装compass
  gem install compass
• 检验compass是否安装成功
  compass -v
• 检验sass是否安装成功
  sass -v
• 获取源
  gem sources
• 移除一个源
  gem sources -r xxx
• 添加一个源 http://ruby.taobao.org
  gem sources -a xxx
• 更新sources
  gem sources -u xxxx

9. sass scss less stylus的差别

• 9.1 注释：
  都支持标准的/*comment*/和 //注释
• 9.2 语法

sass是缩进语法：注意最后没有分号

h1
    font-size:20px

scss和基本的css一样

h1{
    font-size:20px;
}

less的写法和scss是基本一样的

h1{
    font-size:20px;
}

stylus写法有三种，而且这三种写法可以混用

h1{
    font-size:20px;
}
h1
    font-size : 20px;
h1
    font-size 20px

• 9.3 变量定义

sass：
    $color : red
scss:
    $color : red;
less:
    @color : red;
stylus:可以用任何符号开头写变量，但是不要用@符号
    $color : red;
    color : red;

• 9.4 嵌套：

body{
    header{

    }
    h1{

    }
}

上面这种写法在三种语言 scss less stylus上都是一样的

• 9.5 mixins混合

scss中：
    @mixin alert($color:red){
        color : $color;
    }
less中
    .alert(@color:red){
        color : @color;
    }
stylus:
    alert(my_color = red){
        color : my_color;
    }

• 继承

scss
    .block{
        color:red;
        font-size:20px;
    }
    p{
        @extend .block;
    }
less
    p{
        .block;
    }
stylus
    p{
        @extend .block;
    }

10. 创建sass工程

1. 用sass创建
2. 用compass创建

• 打开命令行，输入命令compass create "文件夹名称"
• 带参数的创建方式：compass create--bare--sass-dir "sass" --css-dir "css" --image-dir "img" --javascripts-dir "js"
• 编译sass：进入sass目录（F:\project\sass\sass\sass），打开命令行，输入sass demo1.scss demo1.css
• 四种输出css的方式，运用：compass watch -s expanded
  nested 大括号在最后一个属性后面
  expanded 大括号另起一行输出
  compact 每个选择器的属性放在一行上
  compressed 压缩版的输出
• sass监控，不需要手动编译，直接就能自动编译 sass --watch demo1.scss:demo1.css
• sass监视整个文件夹：sass --watch sass:stylesheets
• compass编译结果：compass compile，进入sass目录 F:\project\sass\sass
• compass监视文件夹：compass watch
• compass强制编译：compass watch --force，无论有无更新都编译

11. sass注释

• 单行注释//不会在css中显示
• 多行注释/**/会在css中显示
• 重要注释：/*! */，第一个字符是感叹号，这样在压缩格式中也会显示了

12让sass支持中文：
打开ruby的安装目录，我的是：D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.4.25\lib\sass目录下的engin.rb文件，在model sass下面添加 Encoding.default_external = Encording.find("utf-8")来支持中文
13. sublime sass 高亮, 直接安装sass插件即可
14.进入目录，在地址栏输入cmd即可在当前目录里打开命令行

sass监视单个命令：
sass 将input.scss文件转化为output.css文件