sass基礎以及實戰

時間 2019-11-29

標籤 sass 基礎以及實戰简体版

原文原文鏈接

爲何要在項目中使用Sass

聽到最多的一句話就是我會CSS，我能使用CSS寫項目，爲何我要花時間去學習Sass，一個本身並不瞭解的東西，一個對於本身來講是全新的東西？看到這樣的問題，讓我想起了2010年討論CSS3的時候，不少同窗一樣有這樣的凝問，CSS3真的會來？我真的要學習CSS3？如今，時間證實了一切。我仍是想說，不少東西並非須要的時候纔去學，機會是給有準備的同窗。css

彷佛有些離題了，咱們仍是回到今天的話題中來，爲何要在項目中使用Sass？在此，我僅想說說我我的的一些見解。html

首先,CSS能完成的事情，Sass同樣能完成，並且可能更好的完成，另外CSS作不到的事情，卻有不少Sass能作到，好比：前端

Sass能夠定義變量，混合宏，%placeholder；
Sass能夠定義函數；
Sass可使用@if、@fore、@while這樣的控制指令；
Sass可使用JSON數據(map)；

固然，除了這些基本功能以外，在項目中使用Sass，還可讓你更好的維護項目，擴展項目，複用項目等。還能讓你的代碼更簡潔。node

說到這裏，還有一種聲音在說，小項目有必要使用Sass？試問，項目有大小之分嗎？既然Sass能幫助咱們更好的開發、管理、維護項目，那麼爲何只容許在大項目中使用Sass，而不能在小項目中使用呢？難道小項目就須要維護嗎？不須要管理嗎？帶着這樣的問題，往下閱讀，或許你會有些改觀。linux

怎麼在項目中使用Sass

說了這麼多，同窗們更爲關心的是怎麼在項目中使用Sass。並不太在乎Sass有多好。由於這樣的爭論也實在是沒有太多的意義。那麼咱們就不說其餘的，就說怎麼在項目中使用Sass吧。css3

通過在項目中使用Sass，我自身有一些見解，或者說個人操做方式吧。也當是經驗吧，但願對初學者有所幫助。git

建立運行Sass的環境

要想在項目中正常使用Sass，你得先保證你的電腦上能運行Sass的環境。這也是Sass受限，也是不被你們愛戴的緣由之一。不少人討論使用Sass，須要先安裝Ruby環境。對於不喜歡命令編譯的同窗，還須要安裝GUI編譯器。github

其實安裝Sass環境也並非件難事，就比如配Wamp環境，整完一次就OK了。但就是這麼第一次的安裝，給初學者帶來不少的障礙，也成了同窗們學習Sass和使用Sass的攔路虎。若是你只是想學習或者瞭解Sass的話，能夠不用在本機上安裝Sass，你能夠藉助在線編輯器，好比：SassMeister、CodePen。並且他們都支持即寫即所得。若是你對Sass已有必定的基礎，想在項目中使用，已經是蠢蠢欲動了，那你仍是離不開在電腦中安裝Sass環境。至於如何在電腦上安裝Sass，在這篇文章中就不作過多的闡述，感興趣的同窗能夠閱讀下面的文章：web

我想根據上面的教程介紹，在你的電腦上安裝Sass不會是件難事。不過在咱們天朝，有些東西被牆了，時常讓你安裝Sass不成功。在這裏給你們介紹一個簡單的方法：bootstrap

假設你已成功安裝好了Ruby。先將Sass下載到本地。並打開你的命令終端：

gem install

此時先不要回車，將你下載下來的Sass安裝包，用鼠標拖到"install"後面，此時你在命令終端，能夠看到：

gem install /Users/airen/Downloads/sass-3.3.14.gem

這個時候再回車，這樣就OK了。爲了確認是否安裝成功，只面要輸入:

sass -v

若是能看到Sass版本號，就表示你已成功安裝了。接下來你就能夠作你想作的事情了。

注：不一樣的系統，不一樣的用戶和版本，對應相關路徑和信息都會不同「/Users/airen/Downloads/sass-3.3.14.gem」。

建立公用的Sass項目模板

在作項目時，無論什麼項目，他們之間老是有一些能夠共用的部分。好比說重置樣式、公用樣式、模塊組件、UI庫等。那麼在Sass項目中也是如此。爲了不在每一個項目中作一些相同的事情，那麼你能夠在你的電腦上建立一個公用的Sass項目模板。好比我建立的：

在這樣的一個模板中，每一個Sass目錄下的文件夾都對應着各類分類的_xxx.scss文件：

base：放置一些基本樣式的SCSS文件，好比重置樣式_normalize.scss，基本樣式_base.scss，文本排版樣式_typography.scss等
components：放置一些公用組件，好比：按鈕_buttons.scss、表單_form.scss、表格_tables.scss、選項卡_tabs.scss等
helps：放置一些輔助功能性文件，好比：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
layout：放置一些跟頁面佈局相關的，好比：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等
pages:放置跟具體項目頁面相關的樣式文件。
themes：對於一些有先後臺頁面，或者需換膚的項目，就能夠將相關文件放置在這裏。
vendors：引用的外部插件或者框架的SCSS文件，好比_bootstrap.scss、_foundation.scss。
style.scss這是主樣式文件，最終編譯，就編譯這個問題。固然根據項目大小，可作一些其餘處理。好比說針對不一樣的頁面,建立不一樣的page_xxx.scss文件。

固然每一個人或許會有不一樣的方式方法。建立好了這樣的一個模板以後，之後只要有新項目，就能夠複製、粘貼，而後修改項目名稱，這樣就便可。

不過，對於一些公共使用的部分，仍是儘可能在公用模板中修改。好比說你添加的混合宏mixin、佔位符%placeholder、函數功能function。還有就是一些公用的組件。

或許這樣複製並不方便，那是否能夠考慮像Compass這樣的框架，本身寫一個可安裝的功能呢？或者將公用的部分，引用到你全部須要的項目中？不過這兩種方法，我都沒有嘗試過。其一，本身不會寫那種帶有gem安裝功能的東東，其二，沒有單獨試過在不一樣的項目中使用相對路徑調用資源。若是您嘗試過，記得與咱們一塊兒分享。

組織Sass項目

其實就是將公用的這個看成是一個Sass項目，只不過這個Sass項目是用來作備用的，能夠無限制的複用。那麼在建立這樣的一個項目時，就須要合理的組織，便天后期的使用。

早前翻譯過John W. Long的一篇文章：如何組織一個Sass項目。上面的文件組織結構的思路就是來源於此。固然，你們還能夠參考一些大型Sass框架作爲參考：

Compass

Foundation

Bootstrap-Sass

除此以外，還有：

Sass項目的編譯與調試

具有上述以後，你在具體編寫Sass的時候，還須要掌握Sass的編譯和調試。衆所周知，在項目中具體引用的是.css文件而不是.scss或者.sass文件。因此你要將寫好的Sass編譯成須要的CSS。對於如何編譯？其實方法不少種，你要是喜歡使用命令，你能夠直接在命令終端編譯，若是你不喜歡命令編譯，你還可使用GUI這樣的界面工具輔助編譯。具體的能夠閱讀：

除此以外，你要是對Node,Grunt和Gulp熟悉，你還可使用他們幫你編譯Sass。好比《Nodejs+Grunt配置SASS項目自動編譯》一文所介紹。

至於如何調試，前端開發人員都知道可使用Firebug這樣的工具來調試CSS。其實使用Sass的同窗，也很是期待能在Firebug下直接調試Sass。那麼如今在Chromet和Firefox瀏覽器都支持了Sass的Soucemap功能，能夠直接在瀏覽器中調試相應的Sass。以下面的幾篇文章所言：

Sass在項目中的實戰

說了這麼多，咱們仍是以一個實例來作示例吧，這樣形象一些。假設收到這樣一個項目：

在「後臺」和「前臺」各對應了一些設計圖。這些咱們並不須要太多關心，他們長成什麼樣子。先將建立好的公用Sass項目複製一份，並將其粘貼到你本地項目環境中，修改爲你須要的項目名，好比我這裏將其稱爲「tuhaokuai」。

拋棄其餘因素不看，僅看"sass"目錄，Sass公用項目和新項目「tuhaokuai」長得是如出一轍。固然，在裏面會不同的。主要在pages目錄中，針對所需的頁面建立了不一樣的頁面文件：

如此一來，針對不一樣的頁面，添加其對應的樣式代碼，好比：

_index.scss

_mysite.scss

其餘文件就不一一展現了，看上去是否是很是清楚。其實簡單點說，這些東西就是一些零件，咱們要讓項目樣式生效，就須要把須要的零件裝上去，而後固定他。這樣就行了。在這個項目中，因爲他並不太複雜，只使用了一個主樣式：style.scss。而且將須要的東西經過@import引入進來：

此時你只須要將style.scss編譯成style.css，引用到你的項目就好了。

其實你也能夠按照你本身的需求去組裝，假設，首頁我只須要首頁用到的樣式，那麼你徹底能夠建立一個index.scss的SCSS文件，而後將須要的引入進來：

接下來，在index.html引用編譯出來的樣式文件index.css便可（文件名你能夠換成本身想要的）。

結論

在這篇文章中主要介紹了本身如何將Sass運用到實際項目之中。簡單人介紹了爲何要在項目使用Sass，之前使用Sass以前要作些什麼？又是如何具體操做。但願這篇文章對初學者有所幫助。也但願更多的同還來分享項目中使用Sass的體驗與碰到的問題。並且又是如何解決這些問題。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。