CSS作為前端開發的三駕馬車之一，無時無刻不在影響著前端的發展。為了讓 CSS 變得更加的好用，出現了一些預處理語言。 它們讓 CSS 徹底變成一門可以使用變量 、循環 、繼承 、自定義方法等多種特性的標記語言，邏輯性得以大大增強

Sass

Sass是成熟、穩定、強大的CSS預處理器，而SCSS是Sass3版本當中引入的新語法特性，完全兼容CSS3的同時繼承了Sass強大的動態功能。

后綴為.scss

• 安裝

- https://www.sass.hk/install/ 官網

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

- npm

• 變量

在sass中可以將需要復用的屬性存在一個變量中。通過$符來表示復用的變量$variable : pink;div{color:$variable}

• 嵌套

css中重復寫選擇器是非常惱人的。如果要寫一大串指向頁面中同一塊的樣式時，往往需要 一遍又一遍地重復的寫。在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有一個特別不常用的特性，即@import規則，它允許在一個css文件中導入其他css文件。sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。// _reset.scsshtml, body, ul, ol { margin: 0; padding: 0;}// base.scss@import 'reset';body { font: 100% Helvetica, sans-serif; background-color: #efefef;}引入后base也會存在_reset的屬性默認變量值 - !default用于變量，含義是：如果這個變量被聲明賦值了，那就用它聲明的值，否則就用這個默認值。

• 靜默注釋

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

• 混合器

混合(Mixin)用來分組那些需要在頁面中復用的CSS聲明，開發人員可以通過向Mixin傳遞變量參數來讓代碼更加靈活，該特性在添加瀏覽器兼容性前綴的時候非常有用，SASS目前使用@mixin name指令來進行混合操作@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面向對象的css的理念，選擇器繼承是說一個選擇器可以繼承為另一個選擇器定義的所有樣式。這個通過@extend語法實現//通過選擇器繼承繼承樣式.error { border: 1px solid red; background-color: #fdd;}.seriousError { @extend .error; border-width: 3px;}

Less

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

• 安裝

- 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變量甚至整個變量變量運算 - 支持大小的運算，還支持包括顏色的運算/* Less作用域 */遵循就近原則

• 嵌套

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

• 混合方法
• 繼承

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

• 導入

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

• 函數

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

• 注釋

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

總結

兩者都是適用性很廣的框架，沒有存在誰好誰壞的情況，只有存在誰更適合當前項目的問題。這邊對兩者做了簡單概述，并沒有做很細致的深入解析，如果有興趣可以做更深入的研究，兩者的官網貼在上面。當然優秀的CSS預處理庫當然不止這兩個，還有許多優秀的庫等待著大家去發掘。 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。