一、是什么
Css 作為一門標記性語言,語法相對簡單,對使用者的要求較低,但同時也帶來一些問題
需要書寫大量看似沒有邏輯的代碼,不方便維護及擴展,不利于復用,尤其對于非前端開發(fā)工程師來講,往往會因為缺少 Css 編寫經驗而很難寫出組織良好且易于維護的 Css 代碼
Css預處理器便是針對上述問題的解決方案
預處理語言
擴充了 Css 語言,增加了諸如變量、混合(mixin)、函數等功能,讓 Css 更易維護、方便
本質上,預處理是Css的超集
包含一套自定義的語法及一個解析器,根據這些語法定義自己的樣式規(guī)則,這些規(guī)則最終會通過解析器,編譯生成對應的 Css 文件
二、有哪些
Css預編譯語言在前端里面有三大優(yōu)秀的預編處理器,分別是:
- sass
- less
- stylus
sass
2007 年誕生,最早也是最成熟的 Css預處理器,擁有 Ruby 社區(qū)的支持和 Compass 這一最強大的 Css框架,目前受 LESS 影響,已經進化到了全面兼容 Css 的 Scss
文件后綴名為.sass與scss,可以嚴格按照 sass 的縮進方式省去大括號和分號
less
2009年出現,受SASS的影響較大,但又使用 Css 的語法,讓大部分開發(fā)者和設計師更容易上手,在 Ruby社區(qū)之外支持者遠超過 SASS
其缺點是比起 SASS來,可編程功能不夠,不過優(yōu)點是簡單和兼容 Css,反過來也影響了 SASS演變到了Scss 的時代
stylus
Stylus是一個Css的預處理框架,2010 年產生,來自 Node.js社區(qū),主要用來給 Node 項目進行 Css 預處理支持
所以Stylus 是一種新型語言,可以創(chuàng)建健壯的、動態(tài)的、富有表現力的Css。比較年輕,其本質上做的事情與SASS/LESS等類似
三、區(qū)別
雖然各種預處理器功能強大,但使用最多的,還是以下特性:
- 變量(variables)
- 作用域(scope)
- 代碼混合( mixins)
- 嵌套(nested rules)
- 代碼模塊化(Modules)
因此,下面就展開這些方面的區(qū)別
基本使用
less
.box {
display: block;
}
sass
.box
display: block
stylus
.box
display: block
嵌套
三者的嵌套語法都是一致的,甚至連引用父級選擇器的標記 & 也相同
區(qū)別只是 Sass 和 Stylus 可以用沒有大括號的方式書寫
less
.a {
&.b {
color: red;
}
}
變量
變量無疑為 Css 增加了一種有效的復用方式,減少了原來在 Css 中無法避免的重復「硬編碼」
less聲明的變量必須以@開頭,后面緊跟變量名和變量值,而且變量名和變量值需要使用冒號:分隔開
@red: #c00;
strong {
color: @red;
}
sass聲明的變量跟less十分的相似,只是變量名前面使用$開頭
$red: #c00;
strong {
color: $red;
}
stylus聲明的變量沒有任何的限定,可以使用$開頭,結尾的分號;可有可無,但變量與變量值之間需要使用=
在stylus中我們不建議使用@符號開頭聲明變量
red = #c00
strong
color: red
作用域
Css 預編譯器把變量賦予作用域,也就是存在生命周期。就像 js一樣,它會先從局部作用域查找變量,依次向上級作用域查找
sass中不存在全局變量
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
編譯后
.scoped {
color:white;/*是白色*/
background-color:blue;
}
.unscoped {
color:white;/*白色(無全局變量概念)*/
}
所以,在sass中最好不要定義相同的變量名
less與stylus的作用域跟javascript十分的相似,首先會查找局部定義的變量,如果沒有找到,會像冒泡一樣,一級一級往下查找,直到根為止
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
編譯后:
.scoped {
color:white;/*白色(調用了局部變量)*/
background-color:blue;
}
.unscoped {
color:black;/*黑色(調用了全局變量)*/
}
混入
混入(mixin)應該說是預處理器最精髓的功能之一了,簡單點來說,Mixins可以將一部分樣式抽出,作為單獨定義的模塊,被很多選擇器重復使用
可以在Mixins中定義變量或者默認參數
在less中,混合的用法是指將定義好的ClassA中引入另一個已經定義的Class,也能夠傳遞參數,參數變量為@聲明
.alert {
font-weight: 700;
}
.highlight(@color: red) {
font-size: 1.2em;
color: @color;
}
.heads-up {
.alert;
.highlight(red);
}
編譯后
.alert {
font-weight: 700;
}
.heads-up {
font-weight: 700;
font-size: 1.2em;
color: red;
}
Sass聲明mixins時需要使用@mixinn,后面緊跟mixin的名,也可以設置參數,參數名為變量$聲明的形式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus中的混合和前兩款Css預處理器語言的混合略有不同,他可以不使用任何符號,就是直接聲明Mixins名,然后在定義參數和默認值之間用等號(=)來連接
error(borderWidth= 2px) {
border: borderWidth solid #F00;
color: #F00;
}
.generic-error {
padding: 20px;
margin: 4px;
error(); /* 調用error mixins */
}
.login-error {
left: 12px;
position: absolute;
top: 20px;
error(5px); /* 調用error mixins,并將參數$borderWidth的值指定為5px */
}
代碼模塊化
模塊化就是將Css代碼分成一個個模塊\文章來源:http://www.zghlxwxcb.cn/news/detail-563662.html
scss、less、stylus三者的使用方法都如下所示文章來源地址http://www.zghlxwxcb.cn/news/detail-563662.html
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
到了這里,關于css基礎知識二十:說說對Css預編語言的理解?有哪些區(qū)別?的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!