美文网首页
SASS学习系列之(一)--------- SASS,SCSS环

SASS学习系列之(一)--------- SASS,SCSS环

作者: WiFi_Uncle | 来源:发表于2017-09-21 14:20 被阅读0次
    1. 下载RubyInstaller

    window下载RubyInstaller: http://rubyinstaller.org/downloads/

    这里写图片描述
    根据自己机型,下载对应的安装包。
    1. 安装RubyInstaller

    选择你的安装路径(等哈要用), 记得勾选把Ruby加到你的PATH

    这里写图片描述
    其他没什么注意的····
    1. 安装

        1.) 找到之前安装路径,点击ruby.exe (最后文件是自己测试的)
    
    这里写图片描述

    2.) 淘宝RubyGems镜像安装 sass
    输入命令:

    第一步

    这里写图片描述
    : 移除源 gem sources --remove https://rubygems.org/

    第二步

    这里写图片描述
    : 更换源(截图提示不支持https,)
    gem sources -a https://ruby.taobao.org/

    第三步

    : 不支持https,,否则跳过 gem sources -a http://gems.ruby-china.org

    这里写图片描述

    第四步

    : 显示源列表 gem sources -l 请确保只有 ruby.taobao.org

    这里写图片描述

    第五步

    : 安装sass $ gem install sass
    提示安装完成就可以编译sass文件了


    这里写图片描述

    第六步

    这里写图片描述

    : 切换路径至你的Ruby路径(不是必须项,),

    第七步

    : 新建一个test.scss文件(注意后缀)
    `#main p {
    color: #00ff00;
    width: 97%;

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

    ` 保存

    第八步

    :  输入: sass test.scss test.css 第二个是要编译的scss文件, 第三个是生成的文件 (中途没有路径显示,只有一个小光标在闪时,那是正在编译,不要终止! )

    这里写图片描述

    第九步

    : 进你的目录看下结果···


    这里写图片描述

    到此就基本结束了。
    编译后的文件(没格式化下。。)


    这里写图片描述

    大概流程汇总

    这里写图片描述

    http://sass.bootcss.com/
    安装的参考地址: https://www.w3cplus.com/sassguide/install.html
    阮一峰的sass入门blog: http://www.ruanyifeng.com/blog/2012/06/sass.html

    相关文章

      网友评论

          本文标题:SASS学习系列之(一)--------- SASS,SCSS环

          本文链接:https://www.haomeiwen.com/subject/grwzsxtx.html