zoukankan      html  css  js  c++  java
  • sass+compass起步

      前言:Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variablesnested rulesmixinsinline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.——《摘自sass官方文档》

      所以我们使用sass+compass组合。(本文只讲windows环境,因为工作电脑是WIN)

      1、ruby环境安装

      sass依赖ruby环境,官网(http://rubyinstaller.org/downloads/)下载合适的版本的ruby,安装时注意在选择路径的那一步勾选Add Ruby executables to your PATH.

      2、sass安装

      在菜单中打开Start Command Prompt with Ruby,运行命令来安装sass:

    gem install sass   //安装sass
    sass -v            //查看sass版本号
    sass -h            //查看sass命令

      3、compass安装

    gem install compass  //安装compass
    compass version      //查看compass版本号

      基本环节配置好之后就可以小试身手了。

      4、启动项目

    compass create <myproject>

      会生成一个名为<myprject>的文件夹,目录结构如下:

      5、编译

      compass是懒编译——只编译有改动的文件。

    compass compile //手动编译sacc文件为css文件
    compass watch //监控scss文件,有改动的时候自动编译为css

      剩下的事情就是熟悉sacc语法及compass的各大模块,compass之于css就像jquery之于javascript,了解sacc基本语法之后,使用compass来干活,事半功倍。

    附录:

    1、compass基本命令:

    Primary Commands:
      * clean       - Remove generated files and the sass cache
      * compile     - Compile Sass stylesheets to CSS
      * create      - Create a new compass project
      * init        - Add compass to an existing project
      * watch       - Compile Sass stylesheets to CSS when they change
    Other Commands:
      * config      - Generate a configuration file for the provided command line options.
      * extension   - Manage the list of compass extensions on your system
      * frameworks  - List the available frameworks
      * help        - Get help on a compass command or extension
      * imports     - Emit an imports suitable for passing to the sass command-line.
      * install     - Install an extension's pattern into your compass project
      * interactive - Interactively evaluate SassScript
      * sprite      - Generate an import for your sprites.
      * stats       - Report statistics about your stylesheets
      * unpack      - Copy an extension into your extensions folder.
      * validate    - Validate your generated css.
      * version     - Print out version information

    2、sacc中文文档http://sass.bootcss.com/docs/sass-reference/

    3、compass官方文档http://compass-style.org/reference/compass/support/

  • 相关阅读:
    HDU----(4291)A Short problem(快速矩阵幂)
    HDU----(2157)How many ways??(快速矩阵幂)
    hdu---(2604)Queuing(矩阵快速幂)
    hdu---(5038)Grade(胡搞)
    齐次方程到矩阵(番外篇)
    uva--1339
    hdu----(5023)A Corrupt Mayor's Performance Art(线段树区间更新以及区间查询)
    hdu----(2848)Repository(trie树变形)
    hdu---(1800)Flying to the Mars(trie树)
    hdu----(1075)What Are You Talking About(trie之查找)
  • 原文地址:https://www.cnblogs.com/lovelyun/p/5785955.html
Copyright © 2011-2022 走看看