SASS从安装到使用

1.SASS安装

一、安装Ruby
 Sass是用Ruby语言写的,但是两者的语法没有关系,所以学 Sass 不用学 Ruby,只是必须先安装Ruby,然后再安装Sass。
 戳这里下载,根据自己对应的版本进行下载
二、安装完成
完成后运行cmd进入命令符,输入ruby -v查看版本号,如果能正确显示版本号,则说明ruby安装成功。
这里写图片描述
然后输入gem install sass进行安装。
安装成功后出现下面的截图
这里写图片描述

2.SASS使用

新建目录如图
这里写图片描述
.sass-cache文件不用管,只需要新建css文件夹,文件内的内容不用新建。新建sass文件夹,sass文件夹下有main文件夹包含一个main.sass文件同理module和page.

这样写的目的是为了整体结构的完善这样写好顶层的架构方便日后维护

接下来
最重要的core.sass是作为所有文件的入口如图
这里写图片描述

接下来就是在你的main.sass page1.sass button.sass 文件中写样式了 写好过后进行css转换

打开cmd运行命令

C:\Users\NT\Desktop\test\sass_test>sass --watch sass\core.sass:css\init.css

具体的文件路径以你的为准 –watch是用于监测文件是否有变化:后是用于输出css文件,也就是你sass写好过后输出的css样式,注意文件路径中不要有中文路径
具体的看看阮一峰的sass指南http://www.ruanyifeng.com/blog/2012/06/sass.html
执行成功后

>>> Sass is watching for changes. Press Ctrl-C to stop.
      write branch\public\static\css\core\init.css
      write branch\public\static\css\core\init.css.map

接下来就可以看看你的init.css的文件了至于引入,跟正常css引入相同
这里写图片描述

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值