亚洲欧美成人综合一区_国产精品一区二区无码_亚洲风情偷拍区_成?人免费无码视频在线看

在線客服與您一對(duì)一交流
當(dāng)前位置: 主頁(yè) > 行業(yè)新聞 > IT技術(shù) >

sass/scss 和 less的區(qū)別

來源：未知 日期：2016-07-25 | 分類：IT技術(shù)
一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一種動(dòng)態(tài)樣式語(yǔ)言，Sass語(yǔ)法屬于縮排語(yǔ)法，比css比多出好些功能(如變量、嵌套、運(yùn)算,混入(Mixin)、繼承、顏色處理，函數(shù)等)，更容易閱讀。
Sass與Scss是什么關(guān)系?
Sass的縮排語(yǔ)法，對(duì)于寫慣css前端的web開發(fā)者來說很不直觀，也不能將css代碼加入到Sass里面，因此sass語(yǔ)法進(jìn)行了改良，Sass 3就變成了Scss(sassy css)。與原來的語(yǔ)法兼容，只是用{}取代了原來的縮進(jìn)。
Less也是一種動(dòng)態(tài)樣式語(yǔ)言. 對(duì)CSS賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算， 函數(shù).  Less 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可在服務(wù)端運(yùn)行 (借助 Node.js)。
二. Sass/Scss與Less區(qū)別
1.編譯環(huán)境不一樣
Sass的安裝需要Ruby環(huán)境，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放到項(xiàng)目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
2.變量符不一樣，Less是@，而Scss是$，而且變量的作用域也不一樣。
復(fù)制代碼
Less-作用域
@color: #00c; /* 藍(lán)色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 紅色邊框 */
}
#footer {
  border: 1px solid @color; /* 藍(lán)色邊框 */
}
Less-作用域編譯后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}
scss-作用域
$color: #00c; /* 藍(lán)色 */
#header {
  $color: #c00; /* red */
  border: 1px solid $color; /* 紅色邊框 */
}
#footer {
  border: 1px solid $color; /* 藍(lán)色邊框 */
}
Sass-作用域編譯后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
我們可以看出來，less和scss中的變量會(huì)隨著作用域的變化而不一樣。
復(fù)制代碼
3.輸出設(shè)置，Less沒有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded。
輸出樣式的風(fēng)格可以有四種選擇，默認(rèn)為nested
nested：嵌套縮進(jìn)的css代碼
expanded：展開的多行css代碼
compact：簡(jiǎn)潔格式的css代碼
compressed：壓縮后的css代碼
4.Sass支持條件語(yǔ)句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。
復(fù)制代碼
/* Sample Sass “if” statement */
@if lightness($color) > 30% {
} @else {
}
/* Sample Sass “for” loop */
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}
復(fù)制代碼
 5. 引用外部CSS文件
scss引用的外部文件命名必須以_開頭, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分別設(shè)置的h1 h2 h3。文件名如果以下劃線_開頭的話，Sass會(huì)認(rèn)為該文件是一個(gè)引用文件，不會(huì)將其編譯為css文件.
復(fù)制代碼
// 源代碼：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 編譯后：
h1 {
  font-size: 17px;
}
h2 {
  font-size: 17px;
}
h3 {
  font-size: 17px;
}
復(fù)制代碼
Less引用外部文件和css中的@import沒什么差異。
6.Sass和Less的工具庫(kù)不同
Sass有工具庫(kù)Compass, 簡(jiǎn)單說，Sass和Compass的關(guān)系有點(diǎn)像Javascript和jQuery的關(guān)系,Compass是Sass的工具庫(kù)。在它的基礎(chǔ)上，封裝了一系列有用的模塊和模板，補(bǔ)充強(qiáng)化了Sass的功能。
Less有UI組件庫(kù)Bootstrap,Bootstrap是web前端開發(fā)中一個(gè)比較有名的前端UI組件庫(kù)，Bootstrap的樣式文件部分源碼就是采用Less語(yǔ)法編寫。
三. 總結(jié)
不管是Sass，還是Less，都可以視為一種基于CSS之上的高級(jí)語(yǔ)言，其目的是使得CSS開發(fā)更靈活和更強(qiáng)大，Sass的功能比Less強(qiáng)大,基本可以說是一種真正的編程語(yǔ)言了，Less則相對(duì)清晰明了,易于上手,對(duì)編譯環(huán)境要求比較寬松?？紤]到編譯Sass要安裝Ruby,而Ruby官網(wǎng)在國(guó)內(nèi)訪問不了,個(gè)人在實(shí)際開發(fā)中更傾向于選擇Less。

相關(guān)文章：

  • 作為競(jìng)價(jià)推廣營(yíng)銷人員，我們要堅(jiān)決反對(duì)用惡意點(diǎn)擊的方式進(jìn)行競(jìng)爭(zhēng)，這種手段只會(huì)讓一個(gè)好的廣告渠道變得無比骯臟。但我們都知道，總有人喜歡惡意點(diǎn)擊，我們得有辦法去抓住他們，解決...

  • 中小企業(yè)做SEO的初衷是為了在互聯(lián)網(wǎng)時(shí)代通過線上營(yíng)銷為公司帶來訂單，但僅僅有網(wǎng)站排名是不足以打動(dòng)用戶馬上下單的，不能單純地為了優(yōu)化而優(yōu)化。需要思考如何才能把SEO的效果越...

  • 很多網(wǎng)站做的很不錯(cuò)，頁(yè)面內(nèi)容豐富，動(dòng)畫效果也出眾到位，堪稱是一個(gè)非常完美高質(zhì)量的網(wǎng)站，但是問題也來了，一些網(wǎng)頁(yè)的加載速度緩慢，令用戶沒有耐心去訪問，要么就是打開到...

  • 隨著互聯(lián)網(wǎng)的發(fā)展，越來越多的企業(yè)開始進(jìn)行網(wǎng)站建設(shè)。雖然說企業(yè)進(jìn)行網(wǎng)站建設(shè)可以很好的進(jìn)行網(wǎng)絡(luò)營(yíng)銷，但是同時(shí)企業(yè)也要注意網(wǎng)站建設(shè)的一些細(xì)節(jié)，只有重視好網(wǎng)站建設(shè)的這些細(xì)...

  • 其實(shí)對(duì)于網(wǎng)站來說，進(jìn)行網(wǎng)站建設(shè)總是要有一定的風(fēng)險(xiǎn)的，因?yàn)楹芸赡茏约航ㄔO(shè)出來的網(wǎng)站，并沒有別的網(wǎng)站效果好?？v觀哪那些好的網(wǎng)站，它們究竟有哪些共同點(diǎn)，它們是如何進(jìn)行建...

  • 網(wǎng)站建設(shè)是使用標(biāo)識(shí)語(yǔ)言，通過設(shè)計(jì)、建模、和執(zhí)行，將信息通過互聯(lián)網(wǎng)傳輸，以圖形用戶界面的形式被用戶所瀏覽，達(dá)到營(yíng)銷和傳播的效應(yīng)。這個(gè)過程就是網(wǎng)站制作和建設(shè)。 西安網(wǎng)站...

  • 競(jìng)價(jià)賬戶托管每天需要做哪些優(yōu)化工作，下面小編就來講解一下他們每天需要做的工作內(nèi)容。 西安競(jìng)價(jià)托管 首先是數(shù)據(jù)的分析。 數(shù)據(jù)分析是整個(gè)競(jìng)價(jià)工作中最為重要的，因?yàn)橥ㄟ^數(shù)據(jù)...

  • 網(wǎng)站SEO優(yōu)化基礎(chǔ)規(guī)劃分享一個(gè)網(wǎng)站的入口頁(yè)面越多流量就越大，單頁(yè)網(wǎng)站(包括幾個(gè)頁(yè)面)本身就存在seo的死角，優(yōu)化是相對(duì)很難!那么我們做單頁(yè)網(wǎng)站SEO必須做好基礎(chǔ)規(guī)劃! 一個(gè)普通網(wǎng)站...

  • 有人做網(wǎng)站是為了賺錢，也有朋友做博客是為了個(gè)人興趣，還有朋友是為了公益或者實(shí)現(xiàn)夢(mèng)想。也許我說的有點(diǎn)大，建站的緣由可能各不一樣，但是我相信各位站長(zhǎng)都是充滿激情，又帶...

  • 網(wǎng)站建設(shè)是現(xiàn)在企業(yè)網(wǎng)絡(luò)競(jìng)爭(zhēng)的利器，幾乎每一家知名的企業(yè)都有一個(gè)自己的官方網(wǎng)站 網(wǎng)站建設(shè)，分為三個(gè)階段，網(wǎng)站建設(shè)前期、中期、后期。 網(wǎng)站建設(shè)前期需提醒節(jié)點(diǎn)：樣式，網(wǎng)址...

  • 公司：西安蟠龍網(wǎng)絡(luò)科技有限公司
  • 聯(lián)系人：張經(jīng)理
  • 手機(jī)/微信：
  • Q Q： 點(diǎn)擊這里給我發(fā)消息
  • 地址：西安市雁塔區(qū)唐延南路11號(hào)逸翠園i都會(huì)