資訊專欄INFORMATION COLUMN
摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。
sass介紹
? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡單且可維護(hù)。
? SASS的本質(zhì)是一種幫助你簡化CSS工作流程的方式，幫助你更容易的維護(hù)和開發(fā)CSS內(nèi)容。
環(huán)境搭建及編譯指令
? 在 Windows 平臺(tái)下安裝 Ruby 需要先有 Ruby 安裝包，大家可以到 Ruby 的官網(wǎng)（http://rubyinstaller.org/downloads）下載對應(yīng)需要的 Ruby 版本。
? Ruby 安裝文件下載好后，可以按應(yīng)用軟件安裝步驟進(jìn)行安裝 Ruby。在安裝過程中，個(gè)人建議將其安裝在 C 盤下，在安裝過程中選擇第二個(gè)選項(xiàng)（不選中，就會(huì)出現(xiàn)編譯時(shí)找不到Ruby環(huán)境的情況），如下圖所示：
? Ruby 安裝完成后，在開始菜單中找到新安裝的 Ruby，并啟動(dòng) Ruby 的 Command 控制面板，如下圖所示：
? 當(dāng)你的電腦中安裝好 Ruby 之后，接下來就可以安裝 Sass 了。同樣的在windows下安裝 Sass 有多種方法。但這幾種方法都是非常的簡單，只需要在你的命令終端輸入一行命令即可。
? 通過命令安裝 Sass
打開電腦的命令終端，輸入下面的命令：gem install sass ? 提醒一下，在使用 Mac
，可能需要在上面的命令前加上"sudo"，才能正常安裝：
sudo gem install sass ? 如果不能正常安裝sass? ? gem sources --remove https://rubygems.org/ ? gem sources -a
https://ruby.taobao.org/[如果你系統(tǒng)不支持https,請將淘寶源更換成：gem sources -a
http://gems.ruby-china.org ] ? gem sources -l ? gem install sass
? 檢測Sass ? sass -v ? 升級sass版本的命令行為 ? gem update sass ? 卸載（刪除）sass
: gem uninstall sass ? 基本用法 ? sass提供四個(gè)編譯風(fēng)格的選項(xiàng)： ? nested :
嵌套縮進(jìn)的css代碼，它是默認(rèn)值 ? expanded:沒有縮進(jìn)的、擴(kuò)展的css代碼 ? compact:簡潔格式的css代碼
? compressed:壓縮后的css代碼
? Css本身包含一個(gè)指令@import,但是CSS中的@import每次執(zhí)行都會(huì)發(fā)送一次新的請求都會(huì)消耗一定的資源
SASS中擴(kuò)展了這個(gè)指令，會(huì)將包含的編譯成一個(gè)CSS文件，切割成小的部分（partials）包含進(jìn)來進(jìn)行處理。
Partials這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的SCSS文件不會(huì)被編譯成CSS文件。
Partials是用來定義公共樣式或者組件的樣式的，專門用于被其他的SCSS文件import進(jìn)行使用的.
? Sass 中還提供了選擇器嵌套功能，但這也并不意味著你在 Sass 中的嵌套是無節(jié)制的，因?yàn)槟闱短椎膶蛹壴缴?，編譯出來的 CSS 代碼的選擇器層級將越深，這往往是大家不愿意看到的一點(diǎn)。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。
? 選擇器嵌套為樣式表的作者提供了一個(gè)通過局部選擇器相互嵌套實(shí)現(xiàn)全局選擇的方法，Sass 的嵌套分為三種：
? 選擇器嵌套
? 屬性嵌套
? 偽類嵌套(了解)
? 選擇器嵌套
sass變量定義
? SASS中的變量，必須是$符號開頭，后面緊跟變量名，變量名稱和變量值之間要使用冒號：進(jìn)行分隔（參考CSS屬性和值的設(shè)定語法），如果值后面加上[!default]就表示默認(rèn)值。
引用變量的值，直接使用變量名稱，即可引用定義的變量的值。
? 普通變量：定義之后可以在全局范圍內(nèi)使用
? 默認(rèn)變量：sass的默認(rèn)變量需要在值的后面加上!default進(jìn)行標(biāo)識(shí)? 默認(rèn)變量的覆蓋：在默認(rèn)變量前后，重新聲明變量并賦值即可
? 默認(rèn)變量是基于組件化開發(fā)的過程中，進(jìn)行優(yōu)化處理的
? 特殊變量：一般情況下，我們定義的變量都是屬性值，可以直接使用，但是如果變量作為屬性或者其他的特殊情況下，必須使用#{$variable}的形式進(jìn)行調(diào)用。
? #{$varialbe}就是取值的一種特殊形式，符合特殊用法。
?
? @if指令是SASS中的一個(gè)控制指令，用于在表達(dá)式滿足條件(true)的時(shí)候輸出指定的樣式，在不滿足條件（false）或者表達(dá)式為null的情況下輸出其他的樣式
@if條件{
//當(dāng)條件為真時(shí)執(zhí)行的樣式
}
同樣，也可以通過@else if 和@else 指令結(jié)合，進(jìn)行多條件的判斷
*
*
? list表示列表類型的值
在CSS中就是表示屬性的一串值
列表中的值可以使用空格或者逗號分隔，如
? border:#ccc solid 1px;值就是列表
? font – family:Courier , “Lucide Console”,monospace;值也是列表
? 列表中可以包含其他的列表，如：
? padding(10px 5px) (5px 5px);可以用括號分開，編譯成css時(shí)會(huì)去掉這些括號
? map就是列表項(xiàng)目中帶名稱的列表
? $map : (key1 : value1,key2:value2,key3:value3)
? $var (key1:value1,key2:value2..):聲明一個(gè)Map
? length($map):獲取map中的元素對個(gè)數(shù)
? map-get($map,key):獲取$map中名稱為key的值
? map-keys($map):獲取指定$map中所有的key
? map-values($map):獲取指定$map中所有的value
? map-has-key($map,key):判斷在$map中是否包含指定的key
? map-merge($map1,$map2):將$map1和$map2合并在一起
? map-remove($map,key):將指定名稱的key從$map中移除
? @for指令在SASS中用于重復(fù)處理一組指令
? 有兩種表現(xiàn)形式
? @for $var from <開始值> through < 結(jié)束值>
? @for $var from
? to和throuch都是表示一個(gè)區(qū)間，唯一的區(qū)別就是停止循環(huán)的地方不一樣。$var可以是任意一個(gè)變量名稱如$i，
? @each在SASS中主要被用來進(jìn)行列表或者映射數(shù)據(jù)的循環(huán)
? 主要表示形式：@each $var in
? $var可以是任意變量名稱，是SASS表達(dá)式并且必須是list.
? sass-mixin函數(shù)(宏)
? sass中可以通過@mixin聲明混合，可以傳遞參數(shù)，參數(shù)名稱以$開始，多個(gè)參數(shù)之間使用逗號分隔，@mixin的混合代碼塊由@include來調(diào)用.
? sass-function介紹
? 函數(shù)的功能主要是數(shù)據(jù)的運(yùn)算，SASS中可以將一些值交給函數(shù)進(jìn)行處理，具體的處理方式由定義的函數(shù)具體的設(shè)計(jì)確定。
? @function 函數(shù)名稱（參數(shù)列表）{
//數(shù)據(jù)處理
}
sass繼承? SASS允許一個(gè)選擇器，繼承另一個(gè)選擇器。比如，現(xiàn)有class1：
.class1 {
border: 1px solid #ffffd;
}
class2要繼承class1，就要使用@extend命令：
.class2 {
@extend .class1;
font-size:120%;
}
<--------------------------------------end---------------------------------------------->
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115748.html
摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國內(nèi)網(wǎng)絡(luò)原因你懂的，導(dǎo)致存放在上面的資源文件間歇性連接失敗。嵌套可以進(jìn)行選擇器的嵌套，表示層級關(guān)系。重要注釋管理項(xiàng)目文件結(jié)構(gòu)預(yù)處理器的特點(diǎn)之一是可以把你的代碼分割成很多文件，而且不會(huì)影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...
摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡單且可維護(hù)。 ? SASS的本...
摘要：未編譯樣式多繼承鏈?zhǔn)嚼^承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數(shù)，參數(shù)名以符號開始，多個(gè)參數(shù)以逗號分開，也可以給參數(shù)設(shè)置默認(rèn)值。 初識(shí)Sass SASS簡介 sass是一種css預(yù)處理器，用專門的編程語言，進(jìn)行網(wǎng)頁樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。Sass是CSS3的擴(kuò)展，它增加了嵌套規(guī)則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...
閱讀 1633·2021-09-02 15:11
閱讀 1972·2019-08-30 14:04
閱讀 2558·2019-08-27 10:52
閱讀 1574·2019-08-26 11:52
閱讀 1195·2019-08-23 15:26
閱讀 2614·2019-08-23 15:09
閱讀 2603·2019-08-23 12:07
閱讀 2231·2019-08-22 18:41
