CSS作為前端開(kāi)發(fā)的三駕馬車之一，無(wú)時(shí)無(wú)刻不在影響著前端的發(fā)展。為了讓 CSS 變得更加的好用，出現(xiàn)了一些預(yù)處理語(yǔ)言。 它們讓 CSS 徹底變成一門可以使用變量 、循環(huán) 、繼承 、自定義方法等多種特性的標(biāo)記語(yǔ)言，邏輯性得以大大增強(qiáng)

Sass

Sass是成熟、穩(wěn)定、強(qiáng)大的CSS預(yù)處理器，而SCSS是Sass3版本當(dāng)中引入的新語(yǔ)法特性，完全兼容CSS3的同時(shí)繼承了Sass強(qiáng)大的動(dòng)態(tài)功能。

后綴為.scss

• 安裝

- https://www.sass.hk/install/ 官網(wǎng)

- https://www.bootcdn.cn/sass.js/ BootCDN

- npm

• 變量

在sass中可以將需要復(fù)用的屬性存在一個(gè)變量中。通過(guò)$符來(lái)表示復(fù)用的變量$variable : pink;div{color:$variable}

• 嵌套

css中重復(fù)寫選擇器是非常惱人的。如果要寫一大串指向頁(yè)面中同一塊的樣式時(shí)，往往需要 一遍又一遍地重復(fù)的寫。在sass中，可以采用嵌套寫法。/* 編譯后 */#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE }}/* 編譯后 */#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { background-color: #EEE }

• 引入

sass引入

css有一個(gè)特別不常用的特性，即@import規(guī)則，它允許在一個(gè)css文件中導(dǎo)入其他css文件。sass也有一個(gè)@import規(guī)則，但不同的是，sass的@import規(guī)則在生成css文件時(shí)就把相關(guān)文件導(dǎo)入進(jìn)來(lái)。// _reset.scsshtml, body, ul, ol { margin: 0; padding: 0;}// base.scss@import 'reset';body { font: 100% Helvetica, sans-serif; background-color: #efefef;}引入后base也會(huì)存在_reset的屬性默認(rèn)變量值 - !default用于變量，含義是：如果這個(gè)變量被聲明賦值了，那就用它聲明的值，否則就用這個(gè)默認(rèn)值。

• 靜默注釋

css中注釋的作用包括幫助你組織樣式、以后你看自己的代碼時(shí)明白為什么這樣寫，以及簡(jiǎn)單的樣式說(shuō)明。但是，你并不希望每個(gè)瀏覽網(wǎng)站源碼的人都能看到所有注釋。Sass支持靜默注釋，即 // ,使用靜默注釋注釋便不會(huì)出現(xiàn)

• 混合器

混合(Mixin)用來(lái)分組那些需要在頁(yè)面中復(fù)用的CSS聲明，開(kāi)發(fā)人員可以通過(guò)向Mixin傳遞變量參數(shù)來(lái)讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時(shí)候非常有用，SASS目前使用@mixin name指令來(lái)進(jìn)行混合操作@mixin border-radius($radius) { border-radius: $radius; -ms-border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius;}.box { @include border-radius(10px);}

• 繼承

基于Nicole Sullivan面向?qū)ο蟮腸ss的理念，選擇器繼承是說(shuō)一個(gè)選擇器可以繼承為另一個(gè)選擇器定義的所有樣式。這個(gè)通過(guò)@extend語(yǔ)法實(shí)現(xiàn)//通過(guò)選擇器繼承繼承樣式.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}

Less

Less 是一門 CSS 預(yù)處理語(yǔ)言，它擴(kuò)展了 CSS 語(yǔ)言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展。

• 安裝

- CDN //cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js- npm install less -g

• 變量

與Sass不同，變量不在是$而是換成了@/* Less */ @color: #999; #wrap { color: @color;}/* Less變量更多使用方法 */還可用作變量名，屬性名，url變量甚至整個(gè)變量變量運(yùn)算 - 支持大小的運(yùn)算，還支持包括顏色的運(yùn)算/* Less作用域 */遵循就近原則

• 嵌套

& ：代表的上一層選擇器的名字 /* Less */ #header{ &title{#header margin:20px; } }代表 #header title

• 混合方法
• 繼承

extend 關(guān)鍵字同Sass相同all 關(guān)鍵字使用選擇器匹配到的 全部聲明

• 導(dǎo)入

@import ( reference，once，multiple)- reference 引入的 Less 文件，但不會(huì) 編譯它- once 這表明相同的文件只會(huì)被導(dǎo)入一次，而隨后的導(dǎo)入文件的重復(fù)代碼都不會(huì)解析- multiple 允許導(dǎo)入多個(gè)同名文件

• 函數(shù)

isnumber、iscolor、isurl等更多http://lesscss.cn/functions/

• 注釋

// Less提供的一種注釋，不會(huì)被編譯在 CSS 文件中

總結(jié)

兩者都是適用性很廣的框架，沒(méi)有存在誰(shuí)好誰(shuí)壞的情況，只有存在誰(shuí)更適合當(dāng)前項(xiàng)目的問(wèn)題。這邊對(duì)兩者做了簡(jiǎn)單概述，并沒(méi)有做很細(xì)致的深入解析，如果有興趣可以做更深入的研究，兩者的官網(wǎng)貼在上面。當(dāng)然優(yōu)秀的CSS預(yù)處理庫(kù)當(dāng)然不止這兩個(gè)，還有許多優(yōu)秀的庫(kù)等待著大家去發(fā)掘。 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的css less 不要作用到子对象_CSS-预处理语言Sass、Less简述的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。