女人下面自熨视频,国产日韩欧美亚欧在线,国产精品喷潮抽搐无码动漫

Sass(Syntactically Awesome StyleSheets) 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。它允許你使用變量、嵌套規則、 mixins、導入等眾多功能，并且完全兼容 CSS 語法。

本文基于 Windows 下的 Sublime Text 3 來講述，和 Mac OS 會有些許不同。

安裝 Ruby

先去官網下載最新的 RubyInstaller，下載后直接安裝。安裝過程中需要注意一點，記得勾選上 Add Ruby executables to your PATH 這項，即添加 Ruby 到環境變量，如下圖所示：

RubyInstaller.png

安裝 Sass gem

這一步本該很簡單的，直接安裝就好了：

gem install sass

—— There is always a 'but' in the futrue .

但是由于 GFW 神一樣的存在，導致沒有 VPN 的小伙伴們需要更改 gem sources 。
使用快捷鍵 Win + R 打開 CMD 命令行，進行如下操作：

輸入 gem sources -l 可以看到當前 gem 所使用的 sources ： https://rubygems.org/
輸入 gem sources --remove https://rubygems.org/ 移除默認的 sources
輸入 gem sources --add http://gems.ruby-china.org/ 添加為 Ruby China 的 sources

正常情況下，再執行 gem install sass ，就可以下載了。

題外話：
以往都是使用淘寶的鏡像的，但是最近沒人維護，所以會提示：
Error fetching https://ruby.taobao.org/: SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://ruby.taobao.org/specs.4.8.gz)
HTTPS 的認證失敗，還有就是資源不全。Get More Information(http://ruby-china.org/topics/29250)

下載完成后可以使用 sass -v 檢測 Sass 版本。至此，環境配置啥的都準備 OK 了。
Let's move on .

安裝 Packages

需要下載三個插件：

Sass
Sass Build 使用 Ctrl + B 快捷鍵編譯
SublimeOnSaveBuild 用于 Ctrl + S 保存文件的時候自動編譯

打開 Sublime Text ，Ctrl + Shift + P 調出 Package Control 的輸入框，輸入 Install Package ，再依次搜索下載 Sass 、 Sass Build 、 SublimeOnSaveBuild 三個插件。
此時，新建一個 .scss 的文件，Ctrl + S 就可以保存并且自動編譯了。

Tips：
第一次保存編譯的時候，會提示 SASS 和 SASS - Compressed 兩個選項，這里解釋一下兩個的區別：

SASS ：編譯成普通的 css 文件，默認不壓縮
SASS - Compressed ：編譯成壓縮格式的 css 文件

后期如果想要更改 Build 規則，可以通過 Sublime Text > Tools > Build System 來選擇

I sense there is a 'but' in the futrue .
如果不能編譯成功，基本上就三個原因：

Ruby 環境變量沒配置好（跟著我的步驟是不會出現這個問題）
文件目錄包含中文名稱（雖然咱英語差，這不是還有翻譯助手嗎）
代碼編碼不正確（常見于注釋）

修改 CSS 文件默認生成目錄

Tips：
其實修改路徑的方法就在插件文檔里，Get More Information

但是細心的同學會發現，默認編譯生成的 .css 文件（比如：demo.css）是在當前 .scss 文件（比如：demo.scss）同一目錄下的，并且自帶會生成 .map 文件（比如：demo.css.map，該文件主要用于調試，Get More Information）。
默認生成的目錄結構示意如下：

demo/
└── src/
    └── scss/
        ├── demo.css
        ├── demo.css.map
        └── demo.scss

啥，你說不介意這個目錄結構？騷年，還能不能有點追求，還想不想找女朋友？
非處女座表示，這樣的目錄我也不喜歡，.scss 和 .css 文件都混在一起太扯了。還有 .map 文件我也不想要。
我就想要這樣簡單整潔的：

demo/
└── src/
    ├── css/
    |   └── demo.css
    └── scss/
        └── demo.scss

客官，別急，這就給您上菜~
Sublime Text > Preferences > Browse Packages 打開 Packages 目錄，我的路徑如下：
C:\Users\***\AppData\Roaming\Sublime Text 3\Packages
來到 Sublime Text 3 下載插件包的文件夾，即：
C:\Users\***\AppData\Roaming\Sublime Text 3\Installed Packages
你會看到你所下載的許多插件，找到 SASS Build.sublime-package 文件（這個就是 SASS Build 插件包），使用 WinRAR 打開：

Build.png

其實這兩個配置文件內容差不多，來，用 Sublime Text 打開：

SASS - Compressed.sublime-build 文件內容：

{

    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style", "compressed"],

    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

SASS.sublime-build 文件內容

{

    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    }

}

都可以看到配置文件中有這么一句：

"$file:${file_path}/${file_base_name}.css"

對頭，這個就是生成目錄路徑的關鍵所在，${file_path} 就是當前 css 文件的路徑，${file_base_name} 就是該 css 文件的文件名稱。
我們將它改成如下：

"$file:${file_path}/../css/${file_base_name}.css"

我相信這點改變你還是看的懂的，這樣就可以生成我們所想要的目錄了。

Tips:
你可能多次嘗試后發現，改變配置文件會說文件正在被使用之類的錯誤，哈哈哈 O(∩_∩)O
其實呢，順序很關鍵，先 Sublime Text 打開這個文件，修改保存后關閉 Sublime Text，注意別關閉該文件。此時 WinRAR 會提示文件已修改，是否更新，點擊 是（Y） 就好了

【加鹽】修改生成的 CSS 代碼樣式

以上所有部分，基本都能通過百度搜索的到，相信你也看累了，來點你沒見過的~

使用 Beyond Compare 軟件對比 SASS.sublime-build 、SASS - Compressed.sublime-build 兩個配置文件，可以看出兩個配置文件差別很小，其實就是 SASS - Compressed.sublime-build 多了 "--style", "compressed" 這兩項而已：

compare.png

這兩個選項的意思就是：使用壓縮（compressed）的樣式（style）輸出 css 文件
等效于：

"--style=compressed"

你想知道我咋知道的？那就打開 CMD 吧，輸入 sass -h 或者 sass --help：

sassHelp.png

看以看到，除了 compressed 外，還有 expanded ，我們來改變插件文件來對比一下這三種配置的輸出區別：

style.jpg

是不是一目了然。所以，當你不使用 compressed 樣式的時候，建議使用 expanded ，因為這種樣式縮進比較美觀。——個人觀點，不服來打我啊 (●ˇ?ˇ●)*

【加鹽】使用 Watch 實時編譯

除此之外，還可以發現這一項：

"--update"

這貨到底是干啥的，仍舊打開 CMD 查看 sass --help：

watch.png

嗯哼，大致意思就是簡單的編譯并更新生成的 css 文件了。
我們可以看到上面還有個 --watch 命令，告訴你，這貨很好玩哦~
我們把 --update 改成 --watch 試試，保存 .scss 文件的時候你會發現 Sublime Text 底部 log （你要是不喜歡看見這個 log，ESC 鍵就好，不過這個不能中斷 watch）：

sublimeWatchFile.png

這就表明正在監聽這個文件，一旦這個文件發生改變（需要保存），就會自動編譯這個文件。

你可能會覺得沒什么，反正都要保存，不都是會觸發編譯嗎？
咳咳，騷年，一看你就是太年輕，代碼寫的不夠多啊。——請容許我裝會兒逼，嗯，就靜靜地 (????)??

在做大一點的項目的時候，為了模塊化開發，同時也為了方便代碼管理，通常會將一個組件 .scss （比如：dialog.scss）拆分成多個子文件（比如：_header.scss、_body.scss、_footer.scss），如下示意結構：

demo/
└── src/
    ├── css/
    |   └── dialog.css
    └── scss/
        ├── part/
        |   ├── _header.scss
        |   ├── _body.scss
        |   └── _footer.scss
        |
        └── dialog.scss

然后在 dialog.scss 通過 Sass 的 import 方式引進來:

@import 'part/header';
@import 'part/body';
@import 'part/footer';

// To Do

使用 --update：

每個文件修改，都需要重新編譯 dialog.scss 才能看到最新樣式。

使用 --watch：

只需要對 dialog.scss 文件 Ctrl + S 保存編譯一次，就可以監聽這個文件以及它所引用的所有子文件的改變。
每當 _header.scss、_body.scss、_footer.scss 或 dialog.scss 被修改保存，就會自動觸發一次 build。瞬間解放勞動力~

當然，你也可以使用腳手架啥的，也就不需要這 watch 了，當然也就不需要Sublime Text 編譯了。當然咯，你會看到這里就說明你沒使用腳手架~——機智如我 wow~ ⊙o⊙

【加鹽】不生成 Source Map 文件（.map）

很簡單，在配置文件里加上這一項：

"--sourcemap=none"

【加鹽】不編譯以下劃線開頭的文件（_header.scss）

這個坑是我上周才填完的，嗯~ o(*￣▽￣*)o

*** 問題：
當將 .scss 文件（比如：dialog.scss）拆分成多個子文件（比如：_header.scss、_body.scss、_footer.scss*）引入。
每次新建一個子文件， Sublime Text 都會自動編譯一次子文件。此外，每次手賤習慣性 Ctrl + S 保存，也自動編譯了....好累 (ˉ▽ˉ；)...

這個解決方法就是修改 SublimeOnSaveBuild 配置項，不過這個不需要修改源文件。
先看看默認配置，Sublime Text > Preferences > Packages Settings > SublimeOnSaveBuild > Packages - Defaults 打開：

{
    "filename_filter": "\\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

可以看到鍵名： filename_filter，簡單翻譯為 “文件名稱過濾器” 。——嗯，我就是只過了四級，還是裸考哦~ o(*￣▽￣*)o
對應的鍵值為：\\.(css|js|sass|less|scss)$，就是一段正則了，表示以 .css 或者（js、sass、less、scss）結尾的文件。（嗯，這兩個 \ 有個是轉義的，我正則不大好，有錯請指出）

復制如上配置，粘貼至 Sublime Text > Preferences > Packages Settings > SublimeOnSaveBuild > Packages - User，并修改為：

{
    "filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

小插曲：
我最開始寫了段簡單的 JS 正則測試了一下：

let reg = /^[^\_]\w*.(sass|less|scss)$/,
    arr = [
        'a.scss',
        '_a.scss',
        'a_.scss'
    ];

> arr.forEach(function( filename ) {
    console.log( filename + '\t' + reg.test(filename) );
});

> // a.scss true
// _a.scss  false
// a_.scss  true

代碼在瀏覽器下是可以的，但是放到配置項里就不行了，首先 \w+ 就需要轉義，不然報錯：
Error trying to parse settings: Invalid escape in Package\User\SublimeOnSaveBuild.sublime-settings:2:24
好吧，我轉義成：^([^_])\\w*.(sass|less|scss)$，仍舊無效 ╮(╯-╰)╭

總結

To you：
貼上個人的配置:

SASS - Compressed.sublime-build：

{

>   "cmd": ["sass", "--watch", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style=compressed", "--sourcemap=none"],

>   "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

>   "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

>   "windows":
    {
        "shell": "true"
    }

>}

SASS.sublime-build：

{

>   "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache", "--style=expanded", "--sourcemap=none"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

>   "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

>   "windows":
    {
        "shell": "true"
    }

>}

***SublimeOnSaveBuild ***：

{
    "filename_filter": "(/|\\\\|^)(?!_)(\\w+)\\.(css|js|sass|less|scss)$",
    "build_on_save": 1
}

嗯，這就是我在使用 Sublime Text 3 開發 Sass 時所遇見和踩到的坑了，有啥不懂的歡迎留言~

尾記

雖然說 WebStrom 也挺好的，功能強大，但是我就不喜歡它。啟動慢，大概是胖子就跑不快的緣故吧...╮(╯-╰)╭
最近在看 Bootstrap 4.0 的 css 源碼，用的就是 Sass。代碼組織結構很值得借鑒，有興趣的小伙伴們可以去看看。

這是我第一次在簡書寫博客，也是第一篇，Markdown 用的也不是很熟練，將就著看吧。嗯，加油~ o(*￣▽￣*)o

Merry Christmas ~ ~ o(*￣▽￣*)ブ
—— 2016/12/25 By Live

MerryChristmas.PNG

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Sublime Text 配置 Sass

Sublime Text 配置 Sass

安裝 Ruby

安裝 Sass gem

安裝 Packages

修改 CSS 文件默認生成目錄

【加鹽】修改生成的 CSS 代碼樣式

【加鹽】使用 Watch 實時編譯

【加鹽】不生成 Source Map 文件（.map）

【加鹽】不編譯以下劃線開頭的文件（_header.scss）

總結

尾記

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Sublime Text 配置 Sass

安裝 Ruby

安裝 Sass gem

安裝 Packages

修改 CSS 文件默認生成目錄

【加鹽】修改生成的 CSS 代碼樣式

【加鹽】使用 Watch 實時編譯

【加鹽】不生成 Source Map 文件（.map）

【加鹽】不編譯以下劃線開頭的文件（_header.scss）

總結

尾記

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频