寫在前面亂七八糟的前言：

emmm，還是決定把Sass與Less單獨出來寫成一篇，可能會稍微好辣么一丟丟？TAT語法特性是真的香，通篇下來能吸收個10%自我感覺已經很nice了，畢竟渣渣的我有渣渣的自覺~本文側重于輸出Sass，對于Less的話簡單帶過，畢竟學會了Sass再看Less基本上就都很ok了，如果想簡單上手，建議先從Less開始入門，最后再吃下我Compass的安利，┓(?′?`?)┏慢慢盤吧。

目錄

1、Sass（Syntactically Awesome Style Sheets）

2、Less（emm找不到全稱）

3、Sass與Less的區別

4、Compass（Sass的toolkit）

內容

1、Sass（Syntactically Awesome Style Sheets）

1.1安裝：

安裝ruby環境，安裝過程中請注意勾選Add Ruby executables to your PATH添加到系統環境變量

在命令行輸入gem install sass

1.2轉譯Sass（最后引用的還是css文件的！）

在屏幕上直接轉化：sass test.scss

轉化成文件：sass test.scss test.css

ps：文件命名方式最好使用英文，如提示gbk與utf-8等關鍵字的報錯時，文件命名方式使用英文即可

1.3監聽Sass

//watch a file

sass --watch test.scss：test.css

//watch a directory

sass --watch ./sass：./css

1.4Vscode的easy Sass

1.4.1安裝easy Sass插件

1.4.2設置轉譯目標目錄

文件->首選項->設置(快捷鍵ctrl+，)->搜索設置->easysass->Target Dir->方框內填寫（或直接在settings.json中編輯"easysass.targetDir": "./css/"）

ps："easysass.targetDir": "./css/"
意思：easysass的目標目錄：""
所以在變更文件夾時記得修改這個目錄
比如將原先的css文件放在sass文件夾內時，應將路徑更改為./sass/css/

1.5使用

1.5.1變量：

聲明：$變量名：變量值；

調用：$變量名

ps：若變量名需在字符串內嵌套，則需使用#{ }包裹；

如：$black：#000；

如：$side：left；

.test{

border-#{$side}-color: $black；

}

編譯為：

.test{border-left-color：#000；}

1.5.2運算

.test{

margin:（14px/2）；

top：20px+20px；

right：$var *10%；

}

ps：單位會進行運算，注意最終單位

1.5.3嵌套

1.5.3.1選擇器嵌套：

ul{

? ?li{ }

}

1.5.3.2屬性嵌套

border：{

? ? ? ? ? ? ?color：red；

? ? ? ? ? ? ?width：10px；

}

1.5.3.3偽類嵌套

ul{

? ? li{

? ? ? &：hover{ }

? ? ?}

}

1.5.4混合

聲明：@mixin name（$param:value）{ }；

調用：@include name（value）

ps：聲明時可帶參可不帶，可帶默認值，但調用需符合命名規范

優點：可傳參，不會生成同名class

缺點：將混合代碼copy到對應的選擇器中

1.5.5擴展

緣起：通常都是p，ul{ common style}，往往我們需要給單獨元素添加另外的樣式，這個時候我們就需要把其中選擇器單獨出來寫樣式，如此一來我們維護樣式就相當的麻煩，有了擴展就很舒服了

聲明：.class{ }

調用：@extend .class

優點：繼承相同代碼并提取到并集選擇器中

缺點：不可傳參，在CSS中生成一個同名class

1.5.6占位符

聲明：%class{ }

調用：@extand %class

優點：繼承相同代碼并提取到并集選擇器，不會生成同名的class選擇器

缺點：無法傳參

ps：傳參用混合，先有class用繼承，無須參數無須class用占位符

1.5.7if語句

@if{ }

@else{ }

1.5.8for循環

@for $i from 1 to 10{ }不含十；

@for $i from 1 through 10{ }含十；

1.5.9while循環

$j：1；

@while $j<10{

? ? ? ? ? ? ? .while#{$j}{

? ? ? ? ? ? ? ? ? ? ? ? border：#{$j}px solid red;

? ? ? ? ? ? ? ?}

? ? ? ? ? ? ? ?$j:$j+1；

}

1.5.0each循環遍歷

@each item in a，b，c，d{

//item 表示每一項

}

1.5.11函數

@function func（$length）{

? ? ? ? ? ? $length：$length*5；

? ? ? ? ? ? @return $length；

}

調用：func（10px）；

2、Less（emm找不到全稱）

2.1安裝：

引入node.js

在命令行輸入$ npm install -g less

2.2轉譯Less（可引用less文件也可引用css文件）

2.2.1命令行：

在屏幕上直接轉化：$ lessc styles.less

轉化成文件：$ lessc styles.less styles.css

轉化成壓縮版：$ lessc --clean-css styles.less styles.min.css

2.2.2代碼：略

2.2.3瀏覽器端：

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

?

下載鏈接?

CDN加速：<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

2.3使用：

2.3.1變量：

聲明：@變量名：變量值；

調用：@變量名

2.3.2其他：略

3、Sass與Less的區別

3.1Less優勢：讓開發者平滑地從現存CSS文件過渡到LESS，而無需像Sass一樣將CSS文件轉換成Sass；有全局變量

3.2編譯環境：

Sass需要安裝ruby環境，是服務端處理的

Less需node js環境，引入less.js，是客戶端處理的

3.2變量符

Sass用$

Less用@

3.3輸出設置

Sass：四種輸出風格，默認nested

nested：嵌套縮進

expanded：展開多行

compact：簡潔格式

compressed：壓縮

Less：嵌套與壓縮min

3.4工具庫

Sass：Compass，基于Sass的封裝

Less：UI組件庫Bootstrap

3.5文件轉譯

Sass：源文件不能給瀏覽器直接識別，需轉譯為css

Less：源文件無需轉譯為css

3.6作用域

Sass：無全局作用域，定義相同變量名時，在調用要注意

Less：首先定義局部定義的變量，若無，像冒泡一樣一級級往下查找，直到根為止

3.7使用

3.7.1混合：

Sass：

/*聲明一個Mixin叫作“error”*/ @mixin error($borderWidth:2px){border:$borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { @include error();/*直接調用error mixins*/ } .login-error { @include error(5px);/*調用error mixins，并將參數$borderWidth的值重定義為5px*/ }

Less：

/*聲明一個Mixin叫作“error”*/ .error(@borderWidth:2px){border:@borderWidth solid #f00; color: #f00; } /*調用error Mixins*/ .generic-error { .error();/*直接調用error mixins*/ } .login-error { .error(5px);/*調用error mixins，并將參數@borderWidth的值重定義為5px*/ }

3.7.2其他高級語法：略

4、Compass（Sass的toolkit）

4.1Compass是什么

簡單講：Compass是Sass的工具庫（toolkit）

Sass本身只是一個編譯器，Compass由SASS的核心團隊成員Chris Eppstein創建，在它的基礎上，封裝了一系列有用的模塊和模板，補充Sass的功能。它們之間的關系，有點像Javascript和jQuery、Ruby和Rails、python和Django的關系

4.2Compass安裝與編譯

1.安裝
Linux或OS X且已安裝ruby 命令行輸入：sudo gem install compass Windows系統且已安裝ruby 省略sudo
2.項目初始化
compass create test
3.編譯
compass complie
該命令在項目根目錄下運行，會將sass子目錄中的scss文件，編譯成css文件，保存在stylesheets子目錄中
默認狀態下，編譯出來的css文件帶有大量的注釋。但是，生產環境需要壓縮后的css文件，這時要使用--output-style參數
compass compile --output-style compressed
Compass只編譯發生變動的文件，如果你要重新編譯未變動的文件，需要使用--force參數
compass compile --force
除了使用命令行參數，還可以在配置文件config.rb中指定編譯模式
output_style = :expanded
:expanded模式表示編譯后保留原格式，其他值還包括:nested、:compact和:compressed。進入生產階段后，就要改為:compressed模式
output_style = :compressed
也可以通過指定environment的值（:production或者:development），智能判斷編譯模式
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
在命令行模式下，除了一次性編譯命令，compass還有自動編譯命令
compass watch
運行該命令后，只要scss文件發生變化，就會被自動編譯成css文件 1.gem安裝SassC:\Users\DELL>gem install sass2.查看Sass版本C:\Users\DELL>sass -vSass 3.4.13 (Selective Steve)3.編譯Sass文件sass main.scss main css// 一般很少使用sass命令,一般都是用Compass命令;4.gem安裝CompassC:\Users\DELL>gem install compass5.查看Compass版本C:\Users\DELL>compass -vCompass 1.0.3 (Polaris) 6.Compass搭建項目C:\Users\DELL\compass create sass// 結果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/directory sass/sass/ // sass文件所在目錄;directory sass/stylesheets/ // css文件所在目錄;create sass/config.rb // 項目配置文件;create sass/sass/screen.scss // 主要針對屏幕的sass文件;create sass/sass/print.scss // 主要針對打印設備;create sass/sass/ie.scss // 主要針對IE瀏覽器;write sass/stylesheets/ie.csswrite sass/stylesheets/print.csswrite sass/stylesheets/screen.css // scss文件編譯后對應的css文件;最終將引入到HTML中的文件;// You may now add and edit sass stylesheets in the sass subdirectory of your project.// 你現在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和編輯項目的樣式表;// 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.// Sass文件以"_"開頭的叫做局部文件,不會被編譯成CSS;但它們可以被引入到其他Sass文件中;// You can configure your project by editing the config.rb configuration file.// 你可以通過編輯config.rb配置文件來配置項目信息; // You must compile your sass stylesheets into CSS when they change.// 當Sass文件被修改后,必須要編譯Sass文件到CSS;// 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] // 監聽項目變化并且自動編譯; // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:// <head>// <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />// <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />// <!--[if IE]>// <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />// <![endif]-->// </head>// 將編譯后的文件引入到HTML頁面中;

更多命令行方法參考：Compass官網

4.3Compass使用

Compass采用模塊結構，不同模塊提供不同的功能。目前，它內置五個模塊：

* reset
* css3
* layout
* typography
* utilities

你還可以自行加載網上的第三方模塊，或者自己動手編寫模塊

4.3.1reset模塊

編寫自己的樣式之前，有必要重置瀏覽器的默認樣式

@import "compass/reset";

@import命令，用來指定加載模塊，這里就是加載reset模塊。編譯后，會生成相應的css reset代碼

4.3.2css3模塊

該模塊提供19種CSS3命令

圓角

@import "compass/css3";

?

　　.rounded {
　　　　@include border-radius(5px);
　　}

@include命令，表示調用某個mixin（類似于C語言的宏），5px是參數，這里用來指定圓角的半徑

編譯后的代碼為

.rounded {
　　　　-moz-border-radius: 5px;
　　　　-webkit-border-radius: 5px;
　　　　-o-border-radius: 5px;
　　　　-ms-border-radius: 5px;
　　　　-khtml-border-radius: 5px;
　　　　border-radius: 5px;
　　}

如果只需要左上角為圓角，寫法為

@include border-corner-radius(top, left, 5px);

透明

@import "compass/css3";

　　#opacity {
　　　　@include opacity(0.5);?
　　}

編譯后生成

#opacity {
　　　　filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
　　　　opacity: 0.5;
　　}

行內區塊

@import "compass/css3";

　　#inline-block {
　　　　@include inline-block;
　　}

編譯后生成

#inline-block {
　　　　display: -moz-inline-stack;
　　　　display: inline-block;
　　　　vertical-align: middle;
　　　　*vertical-align: auto;
　　　　zoom: 1;
　　　　*display: inline;
　　}

4.3.3layout模塊

提供布局功能

比如，指定頁面的footer部分總是出現在瀏覽器最底端：

@import "compass/layout";

　　#footer {
　　　　@include sticky-footer(54px);
　　}

比如，指定子元素占滿父元素的空間：

@import "compass/layout";

　　#stretch-full {
　　　　@include stretch;?
　　}

4.3.4typography模塊

提供版式功能

指定鏈接顏色的mixin為：

　link-colors($normal, $hover, $active, $visited, $focus);

使用時寫成：

@import "compass/typography";

　　a {
　　　　@include link-colors(#00c, #0cc, #c0c, #ccc, #cc0);
　　}

4.3.5utilities模塊

供某些不屬于其他模塊的功能

比如，清除浮動：

import "compass/utilities/";

　　.clearfix {
　　　　@include clearfix;
　　}

比如表格：

@import "compass/utilities";

　　table {
　　　　@include table-scaffolding;
　　}

編譯后生成

table th {
　　　　text-align: center;
　　　　font-weight: bold;
　　}

　　table td,
　　table th {
　　　　padding: 2px;
　　}

　　table td.numeric,
　　table th.numeric {
　　　　text-align: right;
　　}

4.3.6Helper函數

除了模塊，Compass還提供一系列函數。

有些函數非常有用，比如image-width()和image-height()返回圖片的寬和高。

再比如，inline-image()可以將圖片轉為data協議的數據。

@import "compass";

　　.icon { background-image: inline-image("icon.png");}

編譯后得到

　　.icon { background-image: url('data:image/png;base64,iBROR...QmCC');}

函數與mixin的主要區別是，不需要使用@include命令，可以直接調用。

參考文獻：

Sass與Compass入門

阮一峰Compass用法指南

Less入門手冊

Sass中文網

environment = :development

　　output_style = (environment == :production) ? :compressed : :expanded

轉載于:https://www.cnblogs.com/nightnight/p/10745897.html

總結

以上是生活随笔為你收集整理的20190421-那些年使用过的CSS预处理器（CSS Preprocessor）之Sass and Less的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。