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/

  • 相关阅读:
    ASP.NET MVC 让@Html.DropDownList显示默认值
    ASP.NET MVC View向Controller提交数据
    ASP.NET MVC Controller向View传值的几种方式
    ASP.NET MVC3中Controller与View之间的数据传递总结
    net MVC中的模型绑定、验证以及ModelState
    30分钟LINQ教程
    使用Html.BeginForm来提交表单
    @Html.DropDownList
    uni-app页面导航栏透明背景
    nom install 报错
  • 原文地址:https://www.cnblogs.com/lovelyun/p/5785955.html
Copyright © 2011-2022 走看看