• 使用sass命令行,包含bourbon,neat包的项目


    1.安装ruby;

    2.安装sass;

    3.建立项目,蓝色是建立的文件和文件夹;

    2。要在项目中使用bourbom,neat,就在命令行使用gem获取,再安装。cd 打开0-plugins文件,在这个路径下执行以下命令:命令执行后,生成bourbon和neat文件夹。

    gem install bourbon
    bourbon install
    gem install neat
    neat 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="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>
    

      

      

  • 相关阅读:
    HU 参考错误修正:/SCWM/RCORR_HUREF
    EWM 强大的数据修复功能
    EWM ODO清理功能
    发布EWM RF ITS Mobile 相关服务
    git上传本地Intellij idea 项目到码云的git仓库中
    linux 学习一:安装jdk和tomcat
    bootstrap-datepicker应用
    vue2 枚举类型转换
    jqGrid时间转换
    (原创)Rocketmq分布式消息队列的部署与监控
  • 原文地址:https://www.cnblogs.com/IanI/p/4056486.html
Copyright © 2020-2023  润新知