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

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

  • 相关阅读:
    java基础 -- 经典排序
    java 基础 ----- Arrays 工具类
    java基础 ---- 二维数组
    java基础 ---- 一维数组
    java基础 ---- 练习for循环
    AI 偏微分方程
    AI 反向传播神经网络
    AI 判别式模型和生成式模型
    AI 隐含狄利克雷分布
    AI 朴素贝叶斯分类
  • 原文地址:https://www.cnblogs.com/hao5599/p/4481389.html
Copyright © 2011-2022 走看看