首頁  >  文章  >  web前端  >  Sass 和 Less 兩者之間的區別

Sass 和 Less 兩者之間的區別

Guanhui
Guanhui原創
2020-06-01 09:23:293488瀏覽

Sass 和 Less 兩者之間的區別

「我該選擇哪一種CSS預處理器語言?」

#什麼是CSS 預處理器?

CSS 預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為CSS 增加了一些程式設計的特性,將CSS 作為目標產生文件,然後開發者就只要使用這種語言進行CSS的編碼工作。

為什麼要使用CSS預處理器?

CSS只是一個標記語言,不可以自訂變量,不可以引用。

CSS有具體以下幾個缺點:

  • #語法不夠強大,例如無法嵌套書寫,導致模組化開發需要書寫很多重複的選擇器;

  • 沒有變數和合理的樣式重複使用機制,使得邏輯上相關的屬性值必須以字面量的形式重複輸出,導致難以維護。

預先編譯很容易造成後代選擇器的濫用

使用預處理器的優點

  • #提供CSS層缺少的樣式層重複使用機制

  • #減少冗餘程式碼

  • 提高樣式程式碼的可維護性

Sass&Less

  • Less (Leaner Style Sheets 的縮寫) 是一門向後相容的CSS擴展語言。因為 Less 和 CSS 非常像,Less 只對 CSS 語言增加了少許方便的擴展,學習很容易。

  • sass,作為」世界上最成熟、最穩定、最強大的專業級CSS擴展語言」。相容於所有版本的css,且有無數框架使用sass構建,如Compass,Bourbon,和Susy。

SASS版本3.0之前的字尾名為.sass,而版本3.0之後的字尾名.scss。

Sass 和Less 這類語言,其實可以理解成CSS 的超集,它們在CSS 原本的語法格式基礎上,增加了程式語言的特性,如變數的使用、邏輯語句的支援、函數等。讓 CSS 程式碼更容易維護和重複使用。

但瀏覽器最終肯定是只認識CSS 檔案的,它無法處理CSS 中的那些變數、邏輯語句,所以需要有一個編譯的過程,將Sass 或Less 寫的程式碼轉換成標準的CSS程式碼,這個過程就稱為CSS 預處理。

補充說明

ruby sass

Ruby Sass 是Sass 的最初實現,但是已經於2019年3 月26 日將壽終正寢。我們已經不再對它提供任何支援了,請 Ruby Sass 用戶 遷移到其它實作版本(LibSass 或 Dart Sass)。

why?

最開始,用Ruby 寫Sass 能夠很方便地吸引現有的使用者甚至整個Ruby 生態來使用

後來,Node.js 在前端開發中變得無處不在,而Ruby 則逐漸淡入了後台。同時,Sass 專案的規模 已經遠遠超出了作者最初的設想,對 Sass 在性能上的需求 也已經超過了 Ruby 的能力。

Dart-sass

因為不怎麼用sass,感謝@WashingtonHua的提醒

sass於2016年11月正式對外公佈了alpha版本的Dart Sass 42項目,即他們使用Dart對Sass進行了重寫。

根據sass-lang官方網站的說法:

Dart Sass是Sass的主要實現,這意味著它在其他實現之前先獲得了新功能。它快速,易於安裝,並且可以編譯為純JavaScript,從而可以輕鬆整合到現代網頁開發工作流程中。

純 JS 版本 比獨立版本執行速度慢,但是它很容易整合到 現有的工作流程中,並且允許你透過 JavaScript 自訂函數和 importer。透過執行 npm install --save-dev sass 命令將其新增至專案並透過 require() 引入。

透過 npm 安裝時,Dart Sass 提供了一個 JavaScript API 用於 相容 Node Sass。完全相容的工作正在進行中

libSass

Sass 最初是用 Ruby 寫的。 LibSass 是用 C/C 實現的 Sass 引擎。核心點在於其簡單、快速、易於整合。

LibSass 只是一個工具庫。如需在本地運行(即,編譯 Sass 程式碼),你需要一個 LibSass 的封裝。目前已經有很多 針對 LibSass 的封裝了。

Sass C,用 C 語言開發的封裝

sass.cr 是針對 Crystal 程式語言 的 LibSass 封裝。

go-libsass 是最活躍的Go 語言封裝

具體請參考sass.bootcss.com/libsass

#Less

Less 是一門CSS 預處理語言,它擴展了CSS 語言,增加了變數、Mixin、函數等特性,使CSS 更易於維護和擴展。

Less 可以運行在 Node 或瀏覽器端。一個合法的CSS代碼段本身也是一段合法的LESS代碼段。

LESS 提供了變數、巢狀、混合、運算子、函數等一般程式設計所需的抽象機制。

變數

變數允許我們在一個地方定義一系列通用的值,然後在整個樣式表中呼叫。

在做全域樣式調整的時候,可能只要修改幾行程式碼就可以了。

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}

編譯為:

#header {
  width: 10px;
  height: 20px;
}

#混合(Mixins)

混合(Mixin)是一種將一組屬性從一個規則集包含(或混入)到另一個規則集的方法。假設我們定義了一個類別(class)如下:

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果希望在其它規則集中使用這些屬性,只需像下面這樣輸入所需屬性的類別(class)名稱即可

#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

嵌套(Nesting)

Less 提供了使用巢狀(nesting)代替層疊或與層疊結合使用的能力。假設我們有以下 CSS 程式碼:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 語言我們可以這樣書寫程式碼:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 寫的程式碼更加簡潔,並且模仿了 HTML 的組織結構。

你也可以使用此方法將偽選擇器(pseudo-selectors)與混合式(mixins)一同使用。以下是一個經典的clearfix 技巧,重寫為一個混合(mixin) (& 表示目前選擇器的父級):

.clearfix {
  display: block;
  zoom: 1;
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

運算(Operations)

#算術運算子、-、*、/ 可以對任何數字、顏色或變數進行運算

注意,如果運算子兩側變數單位不同,在加、減或比較之前會進行單位換算。計算的結果以最左側操作數的單位類型為準。如果單位換算無效或失去意義,則忽略單位。無效的單位換算例如:px 到 cm 或 rad 到 % 的轉換。

沒有單位則不做轉換

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义,一个长度乘以一个长度就得到一个区域,而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作,并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算:
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

函數(Functions)

Less 內建了多種函數用於轉換顏色、處理字串、算術運算等。這些函數在Less 函數手冊中有詳細介紹。

函數的用法非常簡單。以下這個範例將介紹如何利用percentage 函數將0.5 轉換為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);
}

#匯入( Importing)

你可以匯入一個.less 文件,此文件中的所有變數就可以全部使用了。如果匯入的檔案是 .less 副檔名,則可以將副檔名省略掉:

@import "library"; // library.less
@import "typo.css";

本文僅列舉less的幾種特性的簡單介紹。關於less更詳細介紹參見文末參考文件2

Sass

Sass 是一款強化CSS 的輔助工具,它在CSS 語法的基礎上增加了變數( variables)、嵌套(nested rules)、混合(mixins)、導入(inline imports) 等高級功能,這些拓展令CSS 更加強大與優雅。

特色功能(Features)

  • #完全相容CSS3

  • 在CSS 基礎上增加變數、巢狀(nesting)、混合(mixins) 等功能

  • 透過函數進行顏色值與屬性值的運算

  • 提供控制指令(control directives)等高階功能

  • 自訂輸出格式

變數

sass使用$符號來標識變數(舊版的sass使用!來標識變數。

$highlight-color: #F90;

與CSS屬性不同,變數可以在css規則區塊定義之外存在。當變數定義在css規則區塊內,那麼變數只能在此規則區塊內使用。

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}
//编译后
nav {
  width: 100px;
  color: #F90;
}

在宣告變數時,變數值也可以引用其他變數。

嵌套(Nesting)

基本用法與less相同

子組合選擇器和同層組合選擇器:>、 和~

這三個組合選擇器必須和其他選擇器一起使用,以指定瀏覽器僅選擇某種特定上下文中的元素。

這些組合選擇器可以毫不費力地應用到sass的規則嵌套中。可以把它們放在外層選擇器後邊,或裡層選擇器前邊:

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

sass會如你所願地將這些嵌套規則一一解開組合在一起:

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選擇器,屬性也可以進行嵌套。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

嵌套屬性的規則是這樣的:把屬性名稱從中劃線-的地方斷開,在根屬性後邊添加一個冒號:,緊跟一個{ }塊,把子屬性部分寫在這個{ }塊中。就像css選擇器嵌套一樣,sass會把你的子屬性一一解開,把根屬性和子屬性部分通過中劃線-連接起來,最後生成的效果與你手動一遍遍寫的css樣式一樣:

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

對於屬性的縮寫形式,你甚至可以像下邊這樣來嵌套,指明例外規則:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

混合器;

混合器使用@mixin標識符定義,這個標識符給一大段樣式賦予一個名字,可以輕易地引用這個名字重用這段樣式。

下边的这段sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

然后就可以在样式表中通过@include来使用这个混合器。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:

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都支持混合器传参,具体内容参见参考文档 2、3

导入SASS文件;

css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。

sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求。

使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀

使用SASS部分文件

当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。

sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css

默认变量值;

!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

在上例中,如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量,那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明,则$fancybox-width将默认为400px。

相同与差异

相同之处:

Less和Sass在语法上有些共性,比如下面这些:

1、混入(Mixins)——class中的class;

2、参数混入——可以传递参数的class,就像函数一样;

3、嵌套规则——Class中嵌套class,从而减少重复的代码;

4、运算——CSS中用上数学;

5、颜色功能——可以编辑颜色;

6、名字空间(namespace)——分组样式,从而可以被调用;

7、作用域——局部修改样式;

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

目前大部分的实现都是随着前端项目一起打包构建,只在学习或演示的时候才区分使用环境,所以不用在意处理机制,以上只是单纯的对比两者本身。

请不要忘记Dart Sass,它快速,易于安装,并且可以编译为纯JavaScript,从而可以轻松集成到现代Web开发工作流中。

在Less中,仅允许循环数值。

在Sass中,我们可以遍历任何类型的数据。但在Less中,我们只能使用递归函数循环数值。

条件语句

Less 中并不支持条件语句,当然,可以通过内置函数 if 以及 and,or,not 这些来模拟条件语句。

在 Sass 中是支持条件语句的,但也不是像其他编程语言直接 if 这样通过保留字来编写,需要加个 @ 符号

框架-

sass框架谁有空可以在评论区补充一下

用哪个?

不知道~

  • LESS环境较Sass简单

  • LESS使用较Sass简单,大概?

  • 相对而言,国内前端团队使用LESS的同学会略多于Sass

  • 从功能出发,Sass较LESS略强大一些

  • Sass在市面上有一些成熟的框架,比如说Compass,而且有很多框架也在使用Sass,比如说Foundation

  • 就国外讨论的热度来说,Sass绝对优于LESS

  • 就学习教程来说,Sass的教程要优于LESS(本身来说,less官方文档也够用了)。

推荐教程:《CSS教程》《PHP教程

以上是Sass 和 Less 兩者之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn