您好,登錄后才能下訂單哦!
Sass&Less
Less (Leaner Style Sheets 的縮寫(xiě)) 是一門(mén)向后兼容的 CSS 擴(kuò)展語(yǔ)言。因?yàn)?Less 和 CSS 非常像,Less 僅對(duì) CSS 語(yǔ)言增加了少許方便的擴(kuò)展,學(xué)習(xí)很容易。
sass,作為”世界上最成熟、最穩(wěn)定、最強(qiáng)大的專業(yè)級(jí)CSS擴(kuò)展語(yǔ)言”。兼容所有版本的css,且有無(wú)數(shù)框架使用sass構(gòu)建,如Compass,Bourbon,和Susy。
SASS版本3.0之前的后綴名為.sass,而版本3.0之后的后綴名.scss。
Sass 和 Less 這類(lèi)語(yǔ)言,其實(shí)可以理解成 CSS 的超集,它們?cè)贑SS 原本的語(yǔ)法格式基礎(chǔ)上,增加了編程語(yǔ)言的特性,如變量的使用、邏輯語(yǔ)句的支持、函數(shù)等。讓 CSS 代碼更容易維護(hù)和復(fù)用。
但瀏覽器最終肯定是只認(rèn)識(shí) CSS 文件的,它無(wú)法處理 CSS 中的那些變量、邏輯語(yǔ)句,所以需要有一個(gè)編譯的過(guò)程,將 Sass 或 Less 寫(xiě)的代碼轉(zhuǎn)換成標(biāo)準(zhǔn)的 CSS 代碼,這個(gè)過(guò)程就稱為 CSS 預(yù)處理。
補(bǔ)充說(shuō)明
ruby sass
Ruby Sass 是 Sass 的最初實(shí)現(xiàn),但是 已經(jīng)于 2019年 3 月 26 日將壽終正寢。我們已經(jīng)不再對(duì)它提供任何支持了,請(qǐng) Ruby Sass 用戶 遷移到其它實(shí)現(xiàn)版本(LibSass 或 Dart Sass)。
why?
最開(kāi)始,用 Ruby 編寫(xiě) Sass 能夠很方便地 吸引已有的用戶甚至整個(gè) Ruby 生態(tài)來(lái)使用
后來(lái),Node.js 在前端開(kāi)發(fā)中變得無(wú)處不在,而 Ruby 則 逐漸淡入了后臺(tái)。與此同時(shí),Sass 項(xiàng)目的規(guī)模 已經(jīng)遠(yuǎn)遠(yuǎn)超出了作者最初的設(shè)想,對(duì) Sass 在性能上的需求 也已經(jīng)超過(guò)了 Ruby 的能力。
Dart-sass
因?yàn)椴辉趺从胹ass,感謝@WashingtonHua的提醒
sass于2016年11月正式對(duì)外公布了alpha版本的Dart Sass 42項(xiàng)目,即他們使用Dart對(duì)Sass進(jìn)行了重寫(xiě)。
根據(jù)sass-lang官方網(wǎng)站的說(shuō)法:
Dart Sass是Sass的主要實(shí)現(xiàn),這意味著它在其他實(shí)現(xiàn)之前先獲得了新功能。它快速,易于安裝,并且可以編譯為純JavaScript,從而可以輕松集成到現(xiàn)代Web開(kāi)發(fā)工作流中。
純 JS 版本 比獨(dú)立版本執(zhí)行速度慢,但是它很容易集成到 現(xiàn)有的工作流中,并且允許你通過(guò) JavaScript 自定義函數(shù)和 importer。通過(guò)執(zhí)行 npm install --save-dev sass 命令將其添加到項(xiàng)目中并通過(guò) require() 引入。
通過(guò) npm 安裝時(shí),Dart Sass 提供了一個(gè) JavaScript API 用于 兼容 Node Sass。 完全兼容的工作正在進(jìn)行中
libSass
Sass 最初是用 Ruby 編寫(xiě)的。LibSass 是用 C/C++ 實(shí)現(xiàn)的 Sass 引擎。 核心點(diǎn)在于其簡(jiǎn)單、快速、易于集成。
LibSass 只是一個(gè)工具庫(kù)。如需在本地運(yùn)行(即,編譯 Sass 代碼),你需要一個(gè) LibSass 的封裝。目前已經(jīng)有很多 針對(duì) LibSass 的封裝了。
Sass C,個(gè)用 C 語(yǔ)言開(kāi)發(fā)的封裝
sass.cr 是針對(duì) Crystal 編程語(yǔ)言 的 LibSass 封裝。
go-libsass 是最活躍的 Go 語(yǔ)言封裝
具體參見(jiàn) sass.bootcss.com/libsass
Less
Less 是一門(mén) CSS 預(yù)處理語(yǔ)言,它擴(kuò)展了 CSS 語(yǔ)言,增加了變量、Mixin、函數(shù)等特性,使 CSS 更易維護(hù)和擴(kuò)展。
Less 可以運(yùn)行在 Node 或?yàn)g覽器端。一個(gè)合法的CSS代碼段本身也是一段合法的LESS代碼段。
LESS 提供了變量、嵌套、混合、操作符、函數(shù)等一般編程所需的抽象機(jī)制。
變量
變量允許我們?cè)谝粋€(gè)地方定義一系列通用的值,然后在整個(gè)樣式表中調(diào)用。
在做全局樣式調(diào)整的時(shí)候,可能只需要修改幾行代碼就可以了。
@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }
編譯為:
#header { width: 10px; height: 20px; }
混合(Mixins)
混合(Mixin)是一種將一組屬性從一個(gè)規(guī)則集包含(或混入)到另一個(gè)規(guī)則集的方法。假設(shè)我們定義了一個(gè)類(lèi)(class)如下:
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
如果希望在其它規(guī)則集中使用這些屬性,只需像下面這樣輸入所需屬性的類(lèi)(class)名稱即可
#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }
嵌套(Nesting)
Less 提供了使用嵌套(nesting)代替層疊或與層疊結(jié)合使用的能力。假設(shè)我們有以下 CSS 代碼:
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
用 Less 語(yǔ)言我們可以這樣書(shū)寫(xiě)代碼:
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
用 Less 書(shū)寫(xiě)的代碼更加簡(jiǎn)潔,并且模仿了 HTML 的組織結(jié)構(gòu)。
你還可以使用此方法將偽選擇器(pseudo-selectors)與混合(mixins)一同使用。下面是一個(gè)經(jīng)典的 clearfix 技巧,重寫(xiě)為一個(gè)混合(mixin) (& 表示當(dāng)前選擇器的父級(jí)):
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
運(yùn)算(Operations)
算術(shù)運(yùn)算符 +、-、*、/ 可以對(duì)任何數(shù)字、顏色或變量進(jìn)行運(yùn)算
注意,如果運(yùn)算符兩側(cè)變量單位不同,在加、減或比較之前會(huì)進(jìn)行單位換算。計(jì)算的結(jié)果以最左側(cè)操作數(shù)的單位類(lèi)型為準(zhǔn)。如果單位換算無(wú)效或失去意義,則忽略單位。無(wú)效的單位換算例如:px 到 cm 或 rad 到 % 的轉(zhuǎn)換。
沒(méi)有單位則不做轉(zhuǎn)換
// 所有操作數(shù)被轉(zhuǎn)換成相同的單位 @conversion-1: 5cm + 10mm; // 結(jié)果是 6cm @conversion-2: 2 - 3cm - 5mm; // 結(jié)果是 -1.5cm // conversion is impossible @incompatible-units: 2 + 5px - 3cm; // 結(jié)果是 4px // example with variables @base: 5%; @filler: @base * 2; // 結(jié)果是 10% @other: @base + @filler; // 結(jié)果是 15% 乘法和除法不作轉(zhuǎn)換。因?yàn)檫@兩種運(yùn)算在大多數(shù)情況下都沒(méi)有意義,一個(gè)長(zhǎng)度乘以一個(gè)長(zhǎng)度就得到一個(gè)區(qū)域,而 CSS 是不支持指定區(qū)域的。Less 將按數(shù)字的原樣進(jìn)行操作,并將為計(jì)算結(jié)果指定明確的單位類(lèi)型。 @base: 2cm * 3mm; // 結(jié)果是 6cm 你還可以對(duì)顏色進(jìn)行算術(shù)運(yùn)算: @color: #224488 / 2; //結(jié)果是 #112244 background-color: #112244 + #111; // 結(jié)果是 #223355
函數(shù)(Functions)
Less 內(nèi)置了多種函數(shù)用于轉(zhuǎn)換顏色、處理字符串、算術(shù)運(yùn)算等。這些函數(shù)在Less 函數(shù)手冊(cè)中有詳細(xì)介紹。
函數(shù)的用法非常簡(jiǎn)單。下面這個(gè)例子將介紹如何利用 percentage 函數(shù)將 0.5 轉(zhuǎn)換為 50%,將顏色飽和度增加 5%,以及顏色亮度降低 25% 并且色相值增加 8 等用法:
@base: #f04615; @width: 0.5; .class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); }
導(dǎo)入(Importing)
你可以導(dǎo)入一個(gè) .less 文件,此文件中的所有變量就可以全部使用了。如果導(dǎo)入的文件是 .less 擴(kuò)展名,則可以將擴(kuò)展名省略掉:
@import "library"; // library.less @import "typo.css";
本文僅列舉less的幾種特性的簡(jiǎn)單介紹。關(guān)于less更詳細(xì)介紹參見(jiàn)文末參考文檔2
Sass
Sass 是一款強(qiáng)化 CSS 的輔助工具,它在 CSS 語(yǔ)法的基礎(chǔ)上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導(dǎo)入 (inline imports) 等高級(jí)功能,這些拓展令 CSS 更加強(qiáng)大與優(yōu)雅。
特色功能 (Features)
完全兼容 CSS3
在 CSS 基礎(chǔ)上增加變量、嵌套 (nesting)、混合 (mixins) 等功能
通過(guò)函數(shù)進(jìn)行顏色值與屬性值的運(yùn)算
提供控制指令 (control directives)等高級(jí)功能
自定義輸出格式
變量
sass使用$符號(hào)來(lái)標(biāo)識(shí)變量(老版本的sass使用!來(lái)標(biāo)識(shí)變量。
$highlight-color: #F90;
與CSS屬性不同,變量可以在css規(guī)則塊定義之外存在。當(dāng)變量定義在css規(guī)則塊內(nèi),那么該變量只能在此規(guī)則塊內(nèi)使用。
$nav-color: #F90; nav { $width: 100px; width: $width; color: $nav-color; } //編譯后 nav { width: 100px; color: #F90; }
在聲明變量時(shí),變量值也可以引用其他變量。
嵌套(Nesting)
基本用法與less相同
子組合選擇器和同層組合選擇器:>、+和~
這三個(gè)組合選擇器必須和其他選擇器配合使用,以指定瀏覽器僅選擇某種特定上下文中的元素。
這些組合選擇器可以毫不費(fèi)力地應(yīng)用到sass的規(guī)則嵌套中。可以把它們放在外層選擇器后邊,或里層選擇器前邊:
article { ~ article { border-top: 1px dashed #ccc } > section { background: #eee } dl > { dt { color: #333 } dd { color: #555 } } nav + & { margin-top: 0 } }
sass會(huì)如你所愿地將這些嵌套規(guī)則一一解開(kāi)組合在一起:
article ~ article { border-top: 1px dashed #ccc } article > footer { background: #eee } article dl > dt { color: #333 } article dl > dd { color: #555 } nav + article { margin-top: 0 }
嵌套屬性;
在sass中,除了CSS選擇器,屬性也可以進(jìn)行嵌套。
nav { border: { style: solid; width: 1px; color: #ccc; } }
嵌套屬性的規(guī)則是這樣的:把屬性名從中劃線-的地方斷開(kāi),在根屬性后邊添加一個(gè)冒號(hào):,緊跟一個(gè){ }塊,把子屬性部分寫(xiě)在這個(gè){ }塊中。就像css選擇器嵌套一樣,sass會(huì)把你的子屬性一一解開(kāi),把根屬性和子屬性部分通過(guò)中劃線-連接起來(lái),最后生成的效果與你手動(dòng)一遍遍寫(xiě)的css樣式一樣:
nav { border-style: solid; border-width: 1px; border-color: #ccc; }
對(duì)于屬性的縮寫(xiě)形式,你甚至可以像下邊這樣來(lái)嵌套,指明例外規(guī)則:
nav { border: 1px solid #ccc { left: 0px; right: 0px; } }
混合器;
混合器使用@mixin標(biāo)識(shí)符定義,這個(gè)標(biāo)識(shí)符給一大段樣式賦予一個(gè)名字,可以輕易地通過(guò)引用這個(gè)名字重用這段樣式。
下邊的這段sass代碼,定義了一個(gè)非常簡(jiǎn)單的混合器,目的是添加跨瀏覽器的圓角邊框。
@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
然后就可以在樣式表中通過(guò)@include來(lái)使用這個(gè)混合器。@include調(diào)用會(huì)把混合器中的所有樣式提取出來(lái)放在@include被調(diào)用的地方。如果像下邊這樣寫(xiě):
notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; } //sass最終生成: .notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
less及sass都支持混合器傳參,具體內(nèi)容參見(jiàn)參考文檔 2、3
導(dǎo)入SASS文件;
css有一個(gè)特別不常用的特性,即@import規(guī)則,它允許在一個(gè)css文件中導(dǎo)入其他css文件。然而,后果是只有執(zhí)行到@import時(shí),瀏覽器才會(huì)去下載其他css文件,這導(dǎo)致頁(yè)面加載起來(lái)特別慢。
sass也有一個(gè)@import規(guī)則,但不同的是,sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。這意味著所有相關(guān)的樣式被歸納到了同一個(gè)css文件中,而無(wú)需發(fā)起額外的下載請(qǐng)求。
使用sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名。你可以省略.sass或.scss文件后綴
使用SASS部分文件
當(dāng)通過(guò)@import把sass樣式分散到多個(gè)文件時(shí),你通常只想生成少數(shù)幾個(gè)css文件。那些專門(mén)為@import命令而編寫(xiě)的sass文件,并不需要生成對(duì)應(yīng)的獨(dú)立css文件,這樣的sass文件稱為局部文件。
sass局部文件的文件名以下劃線開(kāi)頭。這樣,sass就不會(huì)在編譯時(shí)單獨(dú)編譯這個(gè)文件輸出css
默認(rèn)變量值;
!default用于變量,含義是:如果這個(gè)變量被聲明賦值了,那就用它聲明的值,否則就用這個(gè)默認(rèn)值。
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; }
在上例中,如果用戶在導(dǎo)入你的sass局部文件之前聲明了一個(gè)$fancybox-width變量,那么你的局部文件中對(duì)$fancybox-width賦值400px的操作就無(wú)效。如果用戶沒(méi)有做這樣的聲明,則$fancybox-width將默認(rèn)為400px。
相同與差異
相同之處:
Less和Sass在語(yǔ)法上有些共性,比如下面這些:
1、混入(Mixins)——class中的class;
2、參數(shù)混入——可以傳遞參數(shù)的class,就像函數(shù)一樣;
3、嵌套規(guī)則——Class中嵌套class,從而減少重復(fù)的代碼;
4、運(yùn)算——CSS中用上數(shù)學(xué);
5、顏色功能——可以編輯顏色;
6、名字空間(namespace)——分組樣式,從而可以被調(diào)用;
7、作用域——局部修改樣式;
8、JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。
、
目前大部分的實(shí)現(xiàn)都是隨著前端項(xiàng)目一起打包構(gòu)建,只在學(xué)習(xí)或演示的時(shí)候才區(qū)分使用環(huán)境,所以不用在意處理機(jī)制,以上只是單純的對(duì)比兩者本身。
請(qǐng)不要忘記Dart Sass,它快速,易于安裝,并且可以編譯為純JavaScript,從而可以輕松集成到現(xiàn)代Web開(kāi)發(fā)工作流中。
在Less中,僅允許循環(huán)數(shù)值。
在Sass中,我們可以遍歷任何類(lèi)型的數(shù)據(jù)。但在Less中,我們只能使用遞歸函數(shù)循環(huán)數(shù)值。
條件語(yǔ)句
Less 中并不支持條件語(yǔ)句,當(dāng)然,可以通過(guò)內(nèi)置函數(shù) if 以及 and,or,not 這些來(lái)模擬條件語(yǔ)句。
在 Sass 中是支持條件語(yǔ)句的,但也不是像其他編程語(yǔ)言直接 if 這樣通過(guò)保留字來(lái)編寫(xiě),需要加個(gè) @ 符號(hào)
框架-
sass框架誰(shuí)有空可以在評(píng)論區(qū)補(bǔ)充一下
用哪個(gè)?
不知道~
LESS環(huán)境較Sass簡(jiǎn)單
LESS使用較Sass簡(jiǎn)單,大概?
相對(duì)而言,國(guó)內(nèi)前端團(tuán)隊(duì)使用LESS的同學(xué)會(huì)略多于Sass
從功能出發(fā),Sass較LESS略強(qiáng)大一些
Sass在市面上有一些成熟的框架,比如說(shuō)Compass,而且有很多框架也在使用Sass,比如說(shuō)Foundation
就國(guó)外討論的熱度來(lái)說(shuō),Sass絕對(duì)優(yōu)于LESS
就學(xué)習(xí)教程來(lái)說(shuō),Sass的教程要優(yōu)于LESS(本身來(lái)說(shuō),less官方文檔也夠用了)。
以上就是Sass 和 Less 兩者之間的區(qū)別的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注億速云其它相關(guān)文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。