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