zoukankan      html  css  js  c++  java
  • sass02

    新建一个文件夹
    1 cd 进入文件夹 ,cd E:360data重要数据桌面sass,
    2 compass creat hello:当前目录创建sass工程,
    3 sass文件夹放置sass文件,stylesheets生成的css文件,
    4 compass create --bare --sass-dir "sass" --css-dir "css" --images-dir "img" --javascripts-dir "js" 指定创建的目录
    5 E:360data重要数据桌面sasshellosass ,创建demo1.scss文件写样式,编译sass demo1.scss demo1.css编译成css文件,
    6 sass -watch demo1.scss:demo1.css当scss文件变化的时候css文件自动变化
    7 compass compile 编译文件  compass watch 监视文件的变化
    8 config.rb:config.rubby文件,定义了一些路径。
    
            require 'compass/import-once/activate'
            # Require any additional compass plugins here.
    
            # Set this to the root of your project when deployed:
            http_path = "/"
            css_dir = "stylesheets"
            sass_dir = "sass"
            images_dir = "images"
            javascripts_dir = "javascripts"
    
            # You can select your preferred output style here (can be overridden via the command line):输出风格
            # output_style = :expanded or :nested or :compact or :compressed
    
            # To enable relative paths to assets via compass helper functions. Uncomment: 是否使用绝对路径
            # relative_assets = true
    
            # To disable debugging comments that display the original location of your selectors. Uncomment:是否使用注释
            # line_comments = false
    9 中文注释  
    Encoding.default_external = Encoding.find('utf-8')
     
    engine.rb文件路径:
    C:Ruby22-x64lib
    ubygems2.2.0gemssass-3.4.15libsass

    demo1.scss

    body{
      background: lightgray;
      font-size: 14px;
      margin:0px;
      margin-left:0px;
      // this is the header style. 
      header{
        font-weight: bold;
      }
      
      footer{/*! This is the footer style.重要注释,压缩模式也会编译到css文件*/ 
        text-align: center;
      }
    }

    demo1.css

    @charset "UTF-8";
    body {
      background: lightgray;
      font-size: 14px; }
      body header {
        font-weight: bold; }
      body footer {
        /*! This is the footer style.重要注释,压缩模式也会编译到css文件*/
        text-align: center; }
    
    /*# sourceMappingURL=demo1.css.map */
  • 相关阅读:
    SpringBoot集成Swagger2中不同环境开关配置
    mysql
    pip 命令汇总
    mysql 时间查询(当天、本周,本月,上一个月的数据)
    MYSQL 常用函数
    java8 array、list操作 汇【6】)- Java8 Lambda表达式增强版Comparator和排序
    解决pip安装超时的问题
    Java对象为空时,将null转换为"" 保存值为空的属性
    mysql -- 模糊查询的四种方法
    Mysql 查询以某个字符开头的语句
  • 原文地址:https://www.cnblogs.com/yaowen/p/6997845.html
Copyright © 2011-2022 走看看