Sass和LESS-动态CSS技术

时间 2019-11-06

标签 sass 动态 css 技术栏目 CSS 繁體版

原文原文链接

1、简介

2、Sass/Scss的使用

变量

注释

css中注释的做用包括帮助你组织样式、之后你看本身的代码时明白为何这样写，以及简单的样式说明。可是，你也并不但愿每一个浏览网站源码的人都能看到全部注释。所以，scss注释方式有两种：javascript

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

混合宏mixin VS 继承 VS 占位符

何时用混合宏，何时用继承，何时使用占位符？三者各有优缺点，详细比较能够参考 http://www.imooc.com/code/7041 ，总的来讲就是：
优先使用占位符，若是必定须要基类则用继承，若是须要传递参数则使用混合宏mixin。css

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

运算

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

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

SASS的编译输出格式

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

expanded
nested
compact
compressed

其中expanded是默认的格式，和咱们平时手动书写CSS的一致，全部式样都是展开的。github

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

compact：将每一个选择器的全部的属性汇总到一行，这时你们更多的关注是选择器的关系而不选择器的shell

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组件支持。