css less 不要作用到子对象_CSS的亲儿子，居然不是Less？？
先來聊聊sass吧，之前用了很久的less，剛開始接觸的時候感覺這東西就是個神器。
寫CSS時間長了自然就能發現CSS在書寫的時候的不足之處：
不能嵌套，沒有變量，更加不能像js那樣用循環自動生成之類的，這些問題全部都被less解決掉了。
less加入了變量，加入了嵌套式寫法。
還有一大堆好用的功能，在這里就不多說了。
今天要說的是sass。其實剛接觸less的時候就知道有sass這個東西了。
但是那時候的sass很奇怪，寫法過于新穎，大家感受一下：
body
margin: 0
padding: 0
height: 20px
width: 30px
...
看出來了么？
對的，sass早期的時候有規定書寫格式，不這么寫它就給你報錯。
這個在習慣上來說一時間是比較難接受的，特別是我們這種寫CSS好幾年的人來說更加如此。
而后面sass的升級版又把它強加的書寫格式去掉了可能就是考慮到這方面。
第二個不能接受sass的點就是安裝比較麻煩。
從事前端開發的人員，電腦上基本上是少不了node的。
less可以直接用npm包管理器進行安裝，這就很方便了。
而sass就相對麻煩一些了，還需要先安裝ruby。
因為sass是基rub語言開發的(mac系統自帶ruby,后來才知道)從過程來說就多了一步。
另外一點，less可以作為一個js文件直接在客戶端運行，這無疑又拉近了和前端開發者之間的距離。
所以早期的時候大家都比較傾向于less。
Bootstrap也是這么選擇的，Bootstrap 3.0就是用less進行開發的。
而對于前幾年來說，less也足以滿足大家的需求了。
但是經過這幾年的發展，大家的技術在進步，需求也在變得更加復雜。
這時候less就顯得有點力不從心了，并不是它不好了，只是對于工作幾年的中高級程序員來說，大家需要一個功能更加強大的CSS預處理器。
于是這時候回頭一看，sass一直都在我們身邊，看看它的文檔，雖然寫得有點亂，但是各方面都比較符合我們的需求，越看越順眼了。
而且現在的sass也升級了，做到了完全兼容CSS3, 在CSS基礎上增加變量、嵌套、混合等功能。
可以通過函數進行顏色值與屬性值的運算，提供控制指令等高級功能，甚至可以自定義輸出格式。
另外一點，隨著各大框架的推行，less和sass的編譯工作變得越來越簡單，安裝個loader就好了，不需要全局安裝編譯器了。
另外很多編輯器也自帶編譯，這樣一來，less前期的那些優勢蕩然無存。
這里推薦一份大而全的前端全棧資料，更多前端知識點信息，1毛錢帶走
那，接下來，跟我一起來看看sass吧。
通過前面的介紹，我想大家已經知道了，sass是一個CSS預處理語言。
在這里要明確一個概念，什么是CSS預處理語言呢?
簡單來說CSS 預處理器定義了一種新的語言，其基本思想是：
用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件。
然后開發者就只要使用這種語言進行編碼工作。
在編程語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易于代碼的維護等諸多好處。
再通俗一點，就像是文言文和白話文。
文言文幾個字，翻譯成白話文就是一片文章。當然在這里只是一個類比。
基本概念理解清楚了，sass有這么多好用的功能，但是我要如何把sass用到我的項目當中呢？
請往下看。
如何進行Sass的安裝
前面已經提到了，Sass是用Ruby語言開發的，所以在安裝Sass之前，需要先安裝Ruby。
這里要注意幾點：
Mac系統是自帶Ruby的，所以就不需要再次安裝啦。
所以下面安裝Ruby的方法也只適用于Windows系統。
一些基于插件的編輯器，比如vsCode、Atom之類的，不需要安裝sass，直接安裝插件就可以進行編譯。
Windows下安裝Sass首先需要安裝Ruby, 先從官網下載Ruby并安裝。
安裝的過程中請注意勾選 Add Ruby executables to your PATH添加到系統環境變量。
如下圖：
安裝完成之后需要測試安裝有沒有成功，在命令行工具(cmd)里面運行以下下命令：
rubu -v 如果安裝成功會打印下面這句話：
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
Ruby安裝好了之后，我們就可以利用Ruby的包管理工具gem安裝Sass了。
同樣還是在Cmd里運行以下命令：
gem install sass
安裝完成之后，還是老辦法檢查以下安裝是否成功：
sass -v
如果安裝成功，則會打印以下代碼：
Ruby Sass 3.7.4
看到這里，我們基本上就可以順利的玩耍啦~ 附上一些其他相關命令～
更新sass:
gem update sass
查看sass版本:
sass -v
查看sass幫助：
sass -h
現在我們寫去一點sass代碼吧?
你沒有看錯，以上看起來和CSS簡直一模一樣的代碼其實就是sass代碼！
是不是很神奇？當然這段代碼編譯使用過后的效果當然也就和CSS一樣啦。
看到這里，我想說的是，大家學習sass千萬不要有任何的負擔。
因為安裝好sass之后，sass就可以和CSS一樣寫，如果你現在還沒有任何的CSS預處理語言的編寫經驗，你完全可以像以前寫CSS那樣來寫代碼。
如果你在看這篇文章的過程當中，一不小心學會了一招半式的，那就是提升了。
不過這里有一點需要提一下。
sass有兩個文件后綴，一個是.sass 一個是.scss scss是sass的升級版，他們都統稱Sass 只是文件后綴不一樣。
然后.sass后綴的文件是固定代碼格式的，就是在一開始我提到的那樣寫：
去掉“{}”，去掉“;” 這讓代碼看起來有點怪，不過習慣就好了。
而.scss后綴結尾的文件就比較友好了，怎么寫都可以，而且它是升級版，所以我們以后在使用的過程中就用.scss就好了。
寫好了sass代碼之后，我們就需要把sass編譯成CSS然后應用到我們的項目當中了。
這個過程就可以稱為編譯了。
開始Sass的編譯
sass編譯有很多種方式，如命令行編譯模式、編輯器自動編譯、編譯軟件koala、sass-loader等。
先來看第一種：命令行編譯
剛才我在test文件夾里面已經建立了一個style.scss文件，現在我需要把這個文件編譯成CSS文件。
那么我可以先用命令行工具進入這個文件夾 “cd”就是進入某個文件夾的命令。
后面跟上你電腦上文件夾的路徑就可以了：
cd test
進入文件夾之后再使用sass的編譯命令:
sass input.scss output.css
編譯成功不會有任何的提示，但是文件夾里面馬上就會出現output.css這個文件。
這個input是原本的scss文件的名稱。
然后output是編譯出來之后的CSS文件的名稱，這個名稱大家可以隨意，保持基本命名規則就可以了。
利用命令還可以實時監測某個文件，當這個文件發生變化的時候，自動完成編譯過程。
//單文件監聽命令
sass --watch input.scss:output.css
在監聽成功之后會打印以下代碼：
>>> Sass is watching for changes. Press Ctrl-C to stop.
根據提示，這時候按Ctrl + C可以停止這個命令。
在監聽的過程中如果文件發生改變，并且自動編譯成功則會打印以下代碼：
>>> Change detected to: tests.scss
write output.css
write output.css.map
利用命令還可以實時監測某個文件夾，這個文件夾下的所有scss文件都會被監聽。
sass --watch targetFolder:outputFolder
在監聽成功之后會打印以下代碼:
>>> Sass is watching for changes. Press Ctrl-C to stop.
前面的targetFolder是要監聽的目標文件夾，后面的outputFolder是要輸出的文件夾。
比如我想把CSS文件夾里的scss文件編譯到style文件夾里，就可以這樣寫：
sass --watch css:style
在這里要注意一點：
這個時候你需要在CSS和style文件夾的共同父級文件夾里面才能開啟這個功能，否則會報錯。
在編譯的時候，還可以配合編譯選項，用于調整輸出文件。
sass提供四種編譯格式：
nested
expanded
compact
compressed
看看區別：
//未編譯樣式?
nested 編譯排版格式
/*命令行內容*/
sass style.scss:style.css --style nested
/*編譯過后樣式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 編譯排版格式
/*命令行內容*/
sass style.scss:style.css --style expand-ed
/*編譯過后樣式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 編譯排版格式
/*命令行內容*/
sass style.scss:style.css --style compact
/*編譯過后樣式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 編譯排版格式
/*命令行內容*/
sass style.scss:style.css --style compr-essed
/*編譯過后樣式*/
不同的編譯格式得到的代碼其實是一樣的，只是排版格式不同，大家看情況去用就好了。
我的建議是，開發的時候用expanded格式，比較清楚。
當你需要發布你的代碼的時候，使用compressed格式，這個格式會讓CSS文件相對較小。
第二種，編輯器直接編譯
相對于第一種編譯方式來說，用編輯器來幫助我們編譯則省去了我們在開發過程中的很多操作。
比如用cd命令進入某個文件夾，退出文件夾之類的，并且不是所有人都熟悉命令操作方式的。
這時候就顯得這種編譯方式可能會更加好用。
我在工作過程中大多數也是用這種方式來進行編譯的，來看具體操作吧：
注意！用編輯器編譯的基礎也是安裝Sass，所以Sass的安裝過程是必不可少的！！！
既然想要讓編輯器幫助我們做事情，那么就需要對編輯器的一些配置進行調整。
來看看 webstorm:
依次打開 setting > tools > file Watch-ers，界面大致如下圖：
打開之后點擊左下角的加號，在彈出的界面里選擇scss。
選擇之后，會彈出一個窗口↓
在這個窗口里有兩項需要調整，我已經用紅框標出來了。
第一項，Program 這里是需要選擇編譯所用的程序，點擊后面的文件夾圖標進行選擇；
windows電腦在安裝Ruby的文件夾里，如果沒有修改的話一般是在C盤：
C:/user/username/AppData/Roaming
Mac電腦一般在“usr/local/bin”，在選擇文件的窗口里按快捷鍵：Command + Shift + G，然后輸入：
usr/local/bin回車
就可以找到對應的文件夾了。
在文件夾里找到一個名字為scss的文件：
第二項，Arguments 這里主要是設置編譯參數，比如前面我們提到的四種編譯格式就可以加載這里面，具體看前面的圖片。
至此，Sass的準備工作我們就做好了，之后我們可以愉快的coding了...
愉快 Coding還離不開web全棧和架構師的進階學習資料，點擊下方即可購買，還有超多大廠面試指南，等你解鎖。
總結
以上是生活随笔為你收集整理的css less 不要作用到子对象_CSS的亲儿子，居然不是Less？？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： weui.js slider的使用笔记
- 下一篇： 单火线取电电路图