sass 的下载、安装、初次使用、入门

1.Sass的安装

Sass是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样可以正常使用Sass。只是必须先安装Ruby,然后再安装Sass。

首先安装Ruby,如果你使用的是IOS系统,那么你的系统已经安装好了Ruby。如果你使用的是微软的Windows系统,那么安装就有些许的麻烦。不过也不用过于担心,按照下面的步骤就能帮你快速的安装好。

sass 安装步骤

1.到RubyInstaller官网上下载Ruby安装文件(随意选择一个版本)

sass 的下载、安装、初次使用、入门_第1张图片 sass 的参考手册

2.打开安装包,出现如下图,点击OK
sass 的下载、安装、初次使用、入门_第2张图片

3 选择(I accept the License) 点击next

sass 的下载、安装、初次使用、入门_第3张图片

4最好选择第二个 点击install

sass 的下载、安装、初次使用、入门_第4张图片

5安装成功了,然后开始正式通过ruby 安装,点击打开红色框内。

sass 的下载、安装、初次使用、入门_第5张图片

6打开后截图

sass 的下载、安装、初次使用、入门_第6张图片

7在命令版中输入如下命令后回车,如果安装不上可以多试几次。

gem install sass

8安装成功截图

sass 的下载、安装、初次使用、入门_第7张图片

sass使用

1.例如在D:中新建一个test文件夹 再创建sass文件夹 创建 sass.scss 文件
可以在sass.scss中加入如下代码

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

2.启动ruby,可以设置快捷键(右键开始菜单中的ruby,选择属性设置快捷键),(我设置的是Ctrl+Alt+l)。

sass 的下载、安装、初次使用、入门_第8张图片

3.先找到存放sass.scss文件夹的位置,我的放在d:内找到test

sass 的下载、安装、初次使用、入门_第9张图片

4.输入命令

sass sass.scss sass.css 

sass 的下载、安装、初次使用、入门_第10张图片

5.文件夹内生成如下图两个文件

sass 的下载、安装、初次使用、入门_第11张图片

6.或者监听整个文件夹,另存为css文件夹里面操作如下图(接着第三步骤)

sass --no-cathe --watch --style compressed sass:css

sass 的下载、安装、初次使用、入门_第12张图片

结果如下生成css文件夹并把所有的sass生成对应的css文件

sass 的下载、安装、初次使用、入门_第13张图片


还有其他的命令 参考sass中文参考手册

你可能感兴趣的:(web)