05月05, 2016

【SASS-01】Sass安装与使用

安装

  • 应用安装:下载对应系统的安装包安装即可,在此不再赘述。
  • 命令行安装: 在使用命令行安装时,需要下载gem文件。

    1. 确保自己系统安装了ruby。如果输入ruby -v显示了系统版本就说明安装成功了。Mac系统会自带ruby,无需再安装。
      ruby -v 
      ruby 2.0.0p481 (2014-05-08 revision 45883) [universal.x86_64-darwin14]
      
    2. 淘宝将gem的数据源进行了镜像备份,所以为了墙的原因,要把源设置成淘宝镜像。

      //查看gem源
      gem sources
      //删除默认的gem源 
      gem sources --remove http://rubygems.org/
      //增加taobao作为gem源 
      gem sources -a http://ruby.taobao.org/
      //查看当前的gem源
      gem sources
      *** CURRENT SOURCES ***
      http://ruby.taobao.org
      //请确保只有 ruby.taobao.org
      //清空源缓存
      gem sources -c
      //更新源缓存
      gem sources -u
      
    3. 安装sass

      sudo gem install sass
      
    4. 验证是否安装成功

      //返回正确的版本就说明安装成功了。本文返回的是 3.4.22版本
      sass -v 
      Sass 3.4.22 (Selective Steve)
      

使用

在使用中主要用的命令有如下两个:

//将input.scss转成out.css文件
sass input.scss output.css
//监控input.scss文件,如果它有变化,会自动更新input.css目录。
sass --watch input.scss
//监控test.scss ,如果它有变化,就更新到test1.css
scss --watch test.scss:test1.css

在上面两个命令执行时,都会在目录下产生同名文件.css和同名文件.map。在map中记载了要映射的.css文件名称,如果没指定,就生成同名.css。指定了就生成指定的文件名。 这里写图片描述 这里写图片描述

本文链接:http://fengbaiyang.cn/post/sass-01.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~