www.bifa88.com 7

指令行编写翻译sass,还有风格www.bifa88.com

1.安装sass

一、安装ruby
1、需要的软件设备:

1.安装ruby

因为sass是用ruby语言写的,所以需要安装ruby环境

打开安装包去安装ruby,记住要勾选 下面选项来配置环境路径

  • [x] Add Ruby executables to your PATH

安装完成之后继续下一步操作


www.bifa88.com 1

2.安装sass

在cmd里通过gem安装sass

gem是ruby的包管理工具,类似于nodejs 的npm

gem install sass

这个时候如果不FQ的话是会出问题的,因为:

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3
上面的资源文件间歇性连接失败。这时候我们可以通过gem
sources命令来配置源,先移除默认的
install sass了

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

安装好之后执行sass -v就可以看到sass的版本了

实在实在不行,就安装离线文件吧,但是失败率也很高

gem install ./…/sass-3.4.22.gem

2、安装过程:
点击上图“应用程序”安装即可,注意安装过程中其中三项都需要打上勾。
如若没有三项都打上勾则需要修改环境变量中的path路径后添加一个分号。

2.编译sass文件的方式

3、打开cmd 或 win+r 输入:gem -v 检查rubyinstaller是否安装成功
输出为:2.4.5 则为安装成功。 如若没有显示,重启一下电脑就好了!!

1.命令行编译

可以通过cmd命令行执行sass方法来编译

例如:

sass scss/a.scss:css/a.css

sass 后面写要编译的sass文件的路径,‘:’后面写的是
要输出的目录及名字

  • 需要注意的是:必须有这个文件夹才能在里面生成css

这样的话写一句执行一次编译一次有些太麻烦

可以开启一个watch来监听文件变化来进行编译

sass --watch scss:css

–watch表示要监听
:前后的两个都是文件夹,表示scss文件夹的文件改变就编译到css文件夹


4、安装sass-3.4.22.gem:
输入:gem install +sass-3.4.22.gem所在的路径 回车即可

2.其他方式编译

除了命令行工具其实还可以用考拉、gulp等工具进行编译,但是ruby和sass是必须要安装的

考拉的方式就不多做介绍了,大家i自己去看一下

gulp的话呢是需要gulp-sass的模块来编译,使用方式类似于gulp-less

这里是网址,点击查看

www.bifa88.com 2
5、安装完成!(或者按上一章中的办法安装即可!)

3.sass四种风格

====================================================================================

sass编译的格式

sass编译输出的css有四种格式

  • nested 嵌套
  • compact 紧凑
  • expanded 扩展
  • compressed 压缩

这些样式会影响输出的css的格式

简单介绍一下:

css默认输出的嵌套

ul{
    font-size:15px;
    li{
        list-style:none;
    }
}

—》

ul {
  font-size: 15px; }
  ul li {
    list-style: none; }

紧凑compact
在编译的时候需要执行

sass --watch scss:css --style compact

这个时候输出的代码就是

ul { font-size: 15px; }
ul li { list-style: none; padding: 5px; }

compressed 压缩
在编译的时候需要执行

sass --watch scss:css --style compressed

—>

ul{font-size:15px}ul li{list-style:none;animation:all 0.4s}

expanded 扩展
更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style expanded

—>

ul {
  font-size: 15px;
}
ul li {
  list-style: none;
  animation: all 0.3s;
}

compressed 压缩
更像是平时写的css一样

在编译的时候需要执行

sass --watch scss:css --style compressed

—>

.a{width:100px;height:100px;border:1px solid red}.a .b{background:red}

demo:

4.sass与scss

新建项目:web文件夹–包括scss文件和css文件!

sass的两个语法版本

sass一开始用的是一种缩进式的语法格式

采用这种格式文件的后缀名是.sass

在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与css语法

scss文件用来放.scss文件的、css是执行sass编译监听后存放.css文件的(用来给.HTML文件引用的css文件)

两个版本的区别

  • 后缀名不同 .sass和.scss
  • 语法不同,请看下面

新版:

/*新版本
多行文本注释*/

//新版本
//单行文本注释

@import "base";

@mixin alert{
    color:red;
    background:blue;
}

.alert-warning{
    @include alert;
}

ul{
    font-size:15px;
    li{
        list-style:none;
    }
}

老版本:

/*新版本
多行文本注释

//新版本
  单行文本注释*/

@import "base"

=alert
    color:red
    background:blue


.alert-warning
    +alert


ul
    font-size:15px
    li
        list-style:none

在命令行执行命令:【监听整个文件夹】

sass --watch  scss:css

 –watch为实时监听
scss:css—->把scss文件里是我.scss文件编译到css文件里成为.css文件

www.bifa88.com 3


 Sass编译出来的样式风格有4种:

  • 嵌套输出方式 nested 它是默认值
  • 展开输出方式 expanded
  • 紧凑输出方式 compact
  • 压缩输出方式 compressed 生产环境当中一般使用这个

单独编译不执行监听单个文件!
若想要实时监听则添加 –watch 即可!

1)默认格式 ,不压缩: sass index.scss index.css –style nested

www.bifa88.com 4

2)常规,页面代码比较清晰:sass
index.scss index.css –style
expanded

www.bifa88.com 5

3)一行展示,不进行压缩: sass index.scss
index.css –style compact

www.bifa88.com 6

4)压缩: sass index.scss index.css
–style compressed

(压缩一般是用在上线的时候使用}

 www.bifa88.com 7