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

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

  • 相关阅读:
    Sum of Medians
    MINSUB
    Girls Love 233
    How Many Answers Are Wrong
    Sorting It All Out
    Cube Stacking
    Boolean Expressions
    表达式求值
    #1301 : 筑地市场
    用seaborn对数据可视化
  • 原文地址:https://www.cnblogs.com/hao5599/p/4481389.html
Copyright © 2011-2022 走看看