zoukankan      html  css  js  c++  java
  • haml scss转换编写html css的前期工作

    http://www.w3cplus.com/sassguide/install.html

     先下载ruby

    $ gem sources

    $ gem sources --remove https://rubygems.org/

    $ gem sources -a https://ruby.taobao.org/

    $ gem sources -1

    $ gem install haml

    $ gem install scss

    $ gem install sass

    $ gem install rails

    $ gem install compass

    $ compass -v

    $gem install hpricot ---html转换haml

    $ html2haml index.html index.haml

    --- --- --- --- --- ----
    添加目录 |
    --- --- --- --- --- ----

    mkdir css 添加

    rmdir css 删掉

    --- --- --- --- --- ----
    添加目录 |
    --- --- --- --- --- ----


    --- --- --- --- --- ----
    scss转换 |
    --- --- --- --- --- ----

    $ cd

    $ cd scss
    //scss目录有一个scss
    $ scss --watch style.scss:style.css
    //scss目录的scss已经转换为css了

    --- --- --- --- --- ----
    scss转换 |
    --- --- --- --- --- ----


    --- --- --- --- --- ----
    haml转换 |
    --- --- --- --- --- ----

    $ cd

    $ cd haml
    //haml目录有一个scss
    $ haml style.haml style.html
    //haml目录的haml已经转换为haml了


    --- --- --- --- --- ----
    haml转换 |
    --- --- --- --- --- ----

    --- --- --- --- --- ----
    html转换 |
    --- --- --- --- --- ----

    $ cd

    $ cd html
    //html目录有一个index.html
    $ html2haml index.html:index.haml
    //html目录的index.html已经转换为haml了


    --- --- --- --- --- ----
    html转换 |
    --- --- --- --- --- ----


    --- --- --- --- --- ----
    退出目录 |
    --- --- --- --- --- ----

    cd...

    cd: css/
    _
    _
    ctrl + c

    --- --- --- --- --- ----
    退出目录 |
    --- --- --- --- --- ----

    --- --- --- --- --- ----
    查看文件 |
    --- --- --- --- --- ----

    $ cd

    $ cd web

    $ type index.scss

    $ scss --watch index.scss:index.css

    --- --- --- --- --- ----
    查看文件 |
    --- --- --- --- --- ----

  • 相关阅读:
    浅谈Oracle12c 数据库、用户、CDB与PDB之间的关系
    ECLIPSE快捷键
    Oracle12cWindows安装、介绍及简单使用(图文)
    金士顿DT100 G3 PS2251-07海力士U盘量产修复成功教程
    tomcat绑定域名
    TCP慢启动、拥塞避免、快速重传、快速恢复
    理解HTTP幂等性
    TCP协议缺陷不完全记录
    Nginx模块开发入门
    一步步构建大型网站架构
  • 原文地址:https://www.cnblogs.com/hao5599/p/4481389.html
Copyright © 2011-2022 走看看