首页 > 代码库 > 使用sass命令行，包含bourbon,neat包的项目
使用sass命令行，包含bourbon,neat包的项目
1.安装ruby；
2.安装sass；
3.建立项目，蓝色是建立的文件和文件夹；
2。要在项目中使用bourbom,neat,就在命令行使用gem获取，再安装。cd 打开0-plugins文件，在这个路径下执行以下命令：命令执行后，生成bourbon和neat文件夹。
gem install bourbonbourbon installgem install neatneat install
3.在文件0-plugin/plugins-dir.scss里面包含这两个插件：
@import ‘bourbon/bourbon‘;@import ‘neat/neat‘
这里需要说明一下这个项目的路径包含方案：文件有-dir,结尾的都是包含所在文件夹里的文件路径；而app.scss里面就包含这些-dir文件的路劲；app.scss文件内容：
@import ‘0-plugins/plugins-dir‘;@import ‘1-base/base-dir‘;@import ‘2-modules/modules-dir‘;@import ‘3-layouts/layouts-dir‘;
4.搞清楚了文件的路径，现在看看怎样用sass指令编译把scss文件编译为css文件，刚刚不是有一个包含所有文件路径的app.scss文件吗，但是我们需的是css文件，在css路径下，使用命令：这个命令是使得css路径下的app.scss被监视了，只要app.scss的变化被保存了，那么，app.css就自动更新，忘记说了，这个app.css是在这个命令执行之后自动生成的。
sass --watch app.scss:app.css
注意：这里算是有一个让我头疼的点，就是，你编译的是scss文件，不是sass文件，这两个都是正确的文件类型，只是有严格的语法区分。一般我编译的是scss文件，因为，scss文件是兼容css语法，这样就不用转换以前写css的思路习惯了。
5.index.html使用的样式：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>E</title> <link rel=‘stylesheet‘ href="http://www.mamicode.com/css/app.css"> </head> <body> <div class=‘boxes‘> <div class=‘box‘></div> <div class=‘box‘></div> <div class=‘box‘></div> <div class=‘box‘></div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, officiis sunt neque facilis culpa molestiae necessitatibus delectus veniam provident.</p> </div> </body></html>
使用sass命令行，包含bourbon,neat包的项目
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。