国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于sass、scss、less的概念性知識(shí)匯總

HmyBmny / 2453人閱讀

摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。

這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。

1、什么是Sass和Less？

2、為什么要使用CSS預(yù)處理器？

3、Sass和Less的比較

4、為什么選擇使用Sass而不是Less？

什么是Sass和Less？

??Sass和Less都屬于CSS預(yù)處理器，那什么是 CSS 預(yù)處理器呢？

??CSS 預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開發(fā)者就只要使用這種語言進(jìn)行CSS的編碼工作。

??轉(zhuǎn)化成通俗易懂的話來說就是“用一種專門的編程語言，進(jìn)行 Web 頁面樣式設(shè)計(jì)，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項(xiàng)目使用”。

為什么要使用CSS預(yù)處理器？

??作為前端開發(fā)人員，大家都知道，Js中可以自定義變量，而CSS僅僅是一個(gè)標(biāo)記語言，不是編程語言，因此不可以自定義變量，不可以引用等等。

CSS有具體以下幾個(gè)缺點(diǎn)：

??語法不夠強(qiáng)大，比如無法嵌套書寫，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；

??沒有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。

??這就導(dǎo)致了我們?cè)诠ぷ髦袩o端增加了許多工作量。而使用CSS預(yù)處理器，提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性。大大提高了我們的開發(fā)效率。

??但是，CSS預(yù)處理器也不是萬金油，CSS的好處在于簡(jiǎn)便、隨時(shí)隨地被使用和調(diào)試。預(yù)編譯CSS步驟的加入，讓我們開發(fā)工作流中多了一個(gè)環(huán)節(jié)，調(diào)試也變得更麻煩了。更大的問題在于，預(yù)編譯很容易造成后代選擇器的濫用。

??所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，CSS預(yù)處理器有沒有解決更大的麻煩。

Sass和Less的比較 不同之處

1、Less環(huán)境較Sass簡(jiǎn)單

Cass的安裝需要安裝Ruby環(huán)境，Less基于JavaScript，是需要引入Less.js來處理代碼輸出css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成css文件，直接放在項(xiàng)目中，有l(wèi)ess.app、SimpleLess、CodeKit.app這樣的工具，也有在線編輯地址。

2、Less使用較Sass簡(jiǎn)單

LESS 并沒有裁剪 CSS 原有的特性，而是在現(xiàn)有 CSS 語法的基礎(chǔ)上，為 CSS 加入程序式語言的特性。只要你了解 CSS 基礎(chǔ)就可以很容易上手。

3、從功能出發(fā)，Sass較Less略強(qiáng)大一些

①sass有變量和作用域。

$variable，like php；

#｛$variable｝like ruby；

變量有全局和局部之分，并且有優(yōu)先級(jí)。

②sass有函數(shù)的概念

@function和@return以及函數(shù)參數(shù)（還有不定參）可以讓你像js開發(fā)那樣封裝你想要的邏輯。

@mixin類似function但缺少像function的編程邏輯，更多的是提高css代碼段的復(fù)用性和模塊化，這個(gè)用的人也是最多的。

ruby提供了非常豐富的內(nèi)置原生api。

③進(jìn)程控制：

條件：@if @else；

循環(huán)遍歷：@for @each @while

繼承：@extend

引用：@import

④數(shù)據(jù)結(jié)構(gòu)：

$list類型=數(shù)組；

$map類型=object；

其余的也有string、number、function等類型

4、Less與Sass處理機(jī)制不一樣

??前者是通過客戶端處理的，后者是通過服務(wù)端處理，相比較之下前者解析會(huì)比后者慢一點(diǎn)

5、關(guān)于變量在Less和Sass中的唯一區(qū)別就是Less用@，Sass用$。

?

相同之處

Less和Sass在語法上有些共性，比如下面這些：

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á)式賦值。

為什么選擇使用Sass而不是Less？

1、Sass在市面上有一些成熟的框架，比如說Compass，而且有很多框架也在使用Sass，比如說Foundation。
2、就國(guó)外討論的熱度來說，Sass絕對(duì)優(yōu)于LESS。
3、就學(xué)習(xí)教程來說，Sass的教程要優(yōu)于LESS。在國(guó)內(nèi)LESS集中的教程是LESS中文官網(wǎng)，而Sass的中文教程，慢慢在國(guó)內(nèi)也較為普遍。
4、Sass也是成熟的CSS預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。
5、同時(shí)還有Scss對(duì)sass語法進(jìn)行了改良，Sass 3就變成了Scss(sassy css)。與原來的語法兼容，只是用{}取代了原來的縮進(jìn)。
6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113717.html

相關(guān)文章

  • 關(guān)于sass、scss、less的概念性知識(shí)匯總

    摘要：而使用預(yù)處理器，提供缺失的樣式層復(fù)用機(jī)制減少冗余代碼，提高樣式代碼的可維護(hù)性。所以我們?cè)趯?shí)際項(xiàng)目中衡量預(yù)編譯方案時(shí)，還是得想想，比起帶來的額外維護(hù)開銷，預(yù)處理器有沒有解決更大的麻煩。也是成熟的預(yù)處理器之一，而且有一個(gè)穩(wěn)定，強(qiáng)大的團(tuán)隊(duì)在維護(hù)。 這篇文章主要解答以下幾個(gè)問題，供前端開發(fā)者的新手參考。 1、什么是Sass和Less？ 2、為什么要使用CSS預(yù)處理器？ 3、Sass和Less的...

    xuweijian 評(píng)論0 收藏0

  • 前端架構(gòu)gulp與webpack（知識(shí)點(diǎn)整理）

    摘要：是通過加載器和插件對(duì)資源進(jìn)行處理的。另外我們知道是對(duì)整個(gè)過程進(jìn)行控制，所以在其配置文件中配置的每一個(gè)對(duì)項(xiàng)目中該配置路徑下所有的資源都可以管理。 一 概念介紹 gulp 是 task runner，Webpack 是 module bundler?？梢赃@么說， Webpack 和 gulp 本身都有 95% 的功能是不能被對(duì)方替代，或者直接說和對(duì)方不重疊的。 1 什么是gulp Gulp...

    willin 評(píng)論0 收藏0

  • 在vue-cli中應(yīng)用scss/less全局變量

    摘要：首先需要安裝插件修改的，找到的加載設(shè)置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設(shè)置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數(shù)更多詳細(xì)知識(shí)介紹請(qǐng)?jiān)L問我的個(gè)人主頁 首先需要安裝插件：sass-resources-loader npm i sass-resources-loader --save-dev scss: 修改vue-cli的build/uti...

    Alex 評(píng)論0 收藏0

  • 前端入門23-CSS預(yù)處理器（Less&Sass）

    摘要：聲明聲明本篇內(nèi)容梳理自以下幾個(gè)來源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個(gè)時(shí)候，預(yù)處理器就出現(xiàn)了，其實(shí)應(yīng)該是說和這類語言出現(xiàn)了。聲明 本篇內(nèi)容梳理自以下幾個(gè)來源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。 正文-CSS預(yù)處理（less&Sass） CSS預(yù)處理 什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？ 這...

    freecode 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<