Sass和LESS-动态CSS技术

最新推荐文章于 2024-01-04 13:47:21 发布

weixin_34082695

最新推荐文章于 2024-01-04 13:47:21 发布

阅读量215

点赞数

原文链接：https://my.oschina.net/u/658505/blog/676719

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、简介

二、Sass/Scss的使用

变量

注释

css中注释的作用包括帮助你组织样式、以后你看自己的代码时明白为什么这样写，以及简单的样式说明。但是，你也并不希望每个浏览网站源码的人都能看到所有注释。因此，scss注释方式有两种：

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合宏mixin VS 继承 VS 占位符

什么时候用混合宏，什么时候用继承，什么时候使用占位符？三者各有优缺点，详细比较可以参考 http://www.imooc.com/code/7041 ，总的来说就是：
优先使用占位符，如果一定需要基类则用继承，如果需要传递参数则使用混合宏mixin。

下图同样是上面链接中关于三者比较的一张图片。

运算

运算包括数字运算、变量运算

数字运算包括：加法、减法、乘法和除法等运算，

SASS的编译输出格式

Sass/Scss 编译后生成的CSS的式样格式有：

expanded
nested
compact
compressed

其中expanded是默认的格式，和我们平时手动书写CSS的一致，所有式样都是展开的。

nested：输出CSS是，根据在Scss中的“嵌套”显示相应的缩进，嵌套的越深，缩进的越多。

compact：将每个选择器的所有的属性汇总到一行，这时大家更多的关注是选择器的关系而不选择器的

compressed：将所有选择器的所有属性都汇总到一行，最不具备可读性，但是占用空间最少。

Sass与Compass

Sass如上面所述的，是CSS的动态生成技术，只是一个编译器，而Compass则在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。我们可以把Sass当成钉子，那么Compass就相当与锤子，它们都是工具，都可以使得我们的效率得到提高。但是compass + sass ，也就是说“锤子”+“钉子”的工具组合，可以使得我们开发CSS的效率上个台阶。

因此，简单说，Compass是Sass的工具库（toolkit）和式样库。

安装和使用compass

Compass的安装很简单，通过如下命令：

gem instal compass

然后便可以通过’compass -v’命令查看版本。

然后通过‘compass -h’可以查看命令的帮助：

compass -h
Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you
  build and maintain your stylesheets and makes it easy
  for you to use stylesheet libraries provided by others.

Donating:
  Compass is charityware. If you find it useful please make a tax deductable donation: http://umdf.org/compass

To get help on a particular command please specify the command.

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

Available Frameworks & Patterns:

  * compass
    - compass/ellipsis  - Plugin for cross-browser ellipsis truncated text.
    - compass/extension - Generate a compass extension.
    - compass/project   - The default project layout.

Global Options:
    -r, --require LIBRARY            Require the given ruby LIBRARY before running commands.
                                       This is used to access compass plugins without having a
                                       project configuration file.
    -l, --load FRAMEWORK_DIR         Load the framework or extensions found in the FRAMEWORK directory.
    -L, --load-all FRAMEWORKS_DIR    Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.
    -I, --import-path IMPORT_PATH    Makes files under the IMPORT_PATH folder findable by Sass's @import directive.
    -q, --quiet                      Quiet mode.
        --trace                      Show a full stacktrace on error
        --force                      Allows compass to overwrite existing files.

        --boring                     Turn off colorized output.
    -?, -h, --help                   Show this message

新建compass bootstrap-sass项目

新建一个compass Bootstrap-sass项目的方法如下：

# gem install bootstrap-sass
# compass create my-new-project -r bootstrap-sass --using bootstrap
# compass watch my-new-project

也就是在Bootstrap-sass官方项目的同一层级目录下，通过compass命令拷贝bootstrap-sass项目的文件到新建的compass项目中，最后通过‘compass watch my-new-project ’命令监察.scss 文件的变更，自动生成相应的css文件。

项目创建成功后的输出信息如下：

directory my-new-project/
directory my-new-project/fonts/bootstrap/
directory my-new-project/javascripts/
directory my-new-project/javascripts/bootstrap/
directory my-new-project/sass/
directory my-new-project/stylesheets/
   create my-new-project/config.rb
   create my-new-project/sass/styles.scss
   create my-new-project/sass/_bootstrap-variables.scss
   create my-new-project/javascripts/bootstrap/affix.js
   create my-new-project/javascripts/bootstrap/alert.js
   create my-new-project/javascripts/bootstrap/button.js
   create my-new-project/javascripts/bootstrap/carousel.js
   create my-new-project/javascripts/bootstrap/collapse.js
   create my-new-project/javascripts/bootstrap/dropdown.js
   create my-new-project/javascripts/bootstrap/modal.js
   create my-new-project/javascripts/bootstrap/popover.js
   create my-new-project/javascripts/bootstrap/scrollspy.js
   create my-new-project/javascripts/bootstrap/tab.js
   create my-new-project/javascripts/bootstrap/tooltip.js
   create my-new-project/javascripts/bootstrap/transition.js
   create my-new-project/javascripts/bootstrap-sprockets.js
   create my-new-project/javascripts/bootstrap.js
   create my-new-project/javascripts/bootstrap.min.js
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.eot
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.svg
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.ttf
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.woff
   create my-new-project/fonts/bootstrap/glyphicons-halflings-regular.woff2
    write my-new-project/stylesheets/styles.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

自定义Bootstrap的方法

1. 拷贝 _bootstrap.scss 到 my-new-project/sass/ 目录下，并重命名为自定义名字 _bootstrap-custom.scss

2. 修改my-new-project/sass/styles.scss 文件

将
@import 'bootstrap';
替换为：
@import 'bootstrap-custom';

3. 修改_bootstrap-custom.scss，自定义所需的bootstrap模块。修改_bootstrap-variables.sass，调整颜色尺寸等。

4. 因为执行了’compass watch my-new-project’命令，因此会compass会自动监测.sass文件的变更，并重新生成相应的styles.css的文件。

# compass watch my-new-project
>>> Compass is watching for changes. Press Ctrl-C to Stop.
    write my-new-project/stylesheets/styles.css
 modified my-new-project/sass/_bootstrap-custom.scss
    write my-new-project/stylesheets/styles.css
 modified my-new-project/sass/_bootstrap-custom.scss
    write my-new-project/stylesheets/styles.css

总结下，通过SASS+Compass+Bootstrap，我们既可以利用SASS强大的编程能力，Compass强大的底层函数，又可以获取Bootstrap丰富的UI组件支持。