中字幕日韩伦理,亚洲国产高潮国产

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優(yōu)雅。它允許你使用變量、嵌套規(guī)則、mixins、導入等眾多功能，并且完全兼容 CSS 語法。 Sass 有助于保持大型樣式表結構良好，同時也讓你能夠快速開始小型項目，特別是在搭配Compass 樣式庫一同使用時。

語法

Sass 有兩種語法。第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本，這份參考資料使用的就是此語法。也就是說，所有符合 CSS3 語法的樣式表也都是具有相同語法意義的 SCSS 文件。另外，SCSS 理解大多數(shù) CSS hacks 以及瀏覽器專屬語法，例如IE 古老的 filter語法。這種語種語法的樣式表文件需要以 .scss擴展名。

第二種比較老的語法成為縮排語法（或者就稱為 "Sass"），提供了一種更簡潔的 CSS 書寫方式。它不使用花括號，而是通過縮排的方式來表達選擇符的嵌套層級，I 而且也不使用分號，而是用換行符來分隔屬性。很多人認為這種格式比 SCSS 更容易閱讀，書寫也更快速。縮排語法具有 Sass 的所有特色功能，雖然有些語法上稍有差異；這些差異在{file:INDENTED_SYNTAX.md 所排語法參考手冊}中都有描述。使用此種語法的樣式表文件需要以 .sass
作為擴展名。

任一語法都可以導入另一種語法撰寫的文件中。只要使用 sass-convert
命令行工具，就可以將一種語法轉換為另一種語法：

# 將 Sass 轉換為 SCSS
$ sass-convert style.sass style.scss

# 將 SCSS 轉換為 Sass
$ sass-convert style.scss style.sass

-----------------------------------------<以上文字描述轉自http://sass.bootcss.com>

選擇器嵌套

在SCSS中，這樣寫：

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
  .icon {
    display: inline-block;
    margin: 2%;
    border: 4px solid black;
    font-size: 32px;
  }
}

在CSS中編譯出來是這樣的：

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

.container .icon {
  display: inline-block;
  margin: 2%;
  border: 4px solid black;
  font-size: 32px;
}

屬性嵌套

在SCSS中，嵌套不僅限于選擇器。如果在屬性名稱后附加冒號后綴:，也可以嵌套常用的CSS 屬性。
在scss中：

.parent {
  font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

編譯成的css：

.parent {
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-decoration: none;
}

變量

變量在SCSS讓你自己選擇的標識符分配給一個特定的值。
與CSS不同的是，如果您需要調(diào)整值，則只需在一個位置進行更新，并將更改反映在多個規(guī)則中。
在Sass中，$用于定義和引用變量：

$translucent-white: rgba(255,255,255,0.3);

注意：當您首次構建代碼庫時，請務必遵守一個變量的命名約定。這將有助于您在將來輕松引用它們。
首先，在scss的頂部。定義好變量，例如：

scss

定義完之后，在要使用的地方，使用它：

使用時

對應在css中編譯出來是這樣的：

在css中是這樣的

<h3>可分配給變量的類型</h3>
可以將不同的數(shù)據(jù)類型分配給CSS中的變量。
除了我們看到的顏色數(shù)據(jù)類型，還有：
1.數(shù)字，如8.11，12和 10px。請注意，雖然10有一個px與之相關聯(lián)的單位，但仍被視為一個數(shù)字。
2.文字字符串，帶和不帶引號。一些例子是"potato"，'tomato'，span。
3.布爾，或簡單true和false。
4.null，這被認為是一個空值。
5.清單（用逗號或空格分隔，例如border: 4px solid black）
6.地圖（鍵值對存在形式(key1: value1, key2: value2);）

偽元素

在CSS中，偽元素用于對元素的部分進行樣式，例如：
對元素的內(nèi)容::before或::after內(nèi)容進行樣式化。
使用偽類，例如:hover當用戶的鼠標觸摸元素的區(qū)域時設置元素的屬性。
在Sass中，該&字符用于指定父選擇器應插入的位置。它也有助于以不那么重復的方式編寫偽類。
例如，以下sass:

.notecard{ 
  &:hover{
      @include transform (rotatey(-180deg));  
    }
  }

編譯成css是：

.notecard:hover {
  transform: rotatey(-180deg);
}

mixin聲明

除了變量和嵌套之外，Sass還有多個結構可以減少重復。
在Sass中，一個mixin可以使您想要在整個站點中重用CSS組聲明。
創(chuàng)建mixin的符號如下：

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

注意： Mixin名稱和所有其他Sass標識符可互換使用連字符和下劃線。引用的時候：

.notecard {
.front, .back {
    width: 100%;
    height: 100%;
    position: absolute;

    @include backface-visibility;
  }
}

相當于以下CSS：

.notecard .front, .notecard .back {
  width: 100%;
  height: 100%;
  position: absolute;

   backface-visibility: hidden;
  -webkit-backface-visibility: hidden; 
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

Mixins也有能力拿到值。
例如以下這種情況$visibility

@mixin backface-visibility($visibility) {
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

實際上，如果需要一個參數(shù)，你應該只使用一個mixin。
傳遞值的調(diào)用的語法如下：

@include backface-visibility(hidden);

在上面的代碼中，hidden被傳遞給backface-visibilitymixin，它將被分配為它的參數(shù)的值$visibility。
現(xiàn)在修改上上段的代碼：

@mixin backface-visibility {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;

修改為：
@mixin backface-visibility($visibility) {
  backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

然后在調(diào)用的時候：

@include backface-visibility;

修改為：
@include backface-visibility(hidden);

Mixin參數(shù)可以通過使用特殊符號在mixin定義中分配一個默認值。
如果在包含mixin時沒有傳入任何值，則會將默認值分配給參數(shù)。定義每個參數(shù)的默認值是可選的。
符號如下：

@mixin backface-visibility($visibility: hidden) {
   backface-visibility: $visibility;
  -webkit-backface-visibility: $visibility;
  -moz-backface-visibility: $visibility;
  -ms-backface-visibility: $visibility;
  -o-backface-visibility: $visibility;
}

在上面的示例中，如果沒有值被傳遞到backface-visibility，hidden將分配給所有屬性。

一般來說，這里有關于參數(shù)和mixins的5個重要事實：

1.Mixins可以采用多個參數(shù)。
2.Sass允許您在語句中明確定義每個參數(shù)@include。
3.當值被明確指定時，您可以將它們發(fā)送出去。
4.如果一個mixin定義具有默認值和不帶默認值的參數(shù)組合，那么應該首先定義沒有默認值的參數(shù)。
5.mixins可以嵌套。
以下是規(guī)則的具體例子：

@mixin dashed-border($width, $color: #FFF) {
  border: {
     color: $color;
     width: $width;
     style: dashed;
  }
}

span { //only passes non-default argument
    @include dashed-border(3px);
}

p { //passes both arguments
    @include dashed-border(3px, green);
}

div { //passes out of order but explicitly defined
   @include dashed-border(color: purple, width: 5px); 
}

顏色

Sass還允許我們執(zhí)行數(shù)學函數(shù)來計算測量值，包括顏色。
以下是Sass計算顏色的方法：
操作在紅色，綠色和藍色部件上執(zhí)行。
它通過操作每兩位數(shù)來計算答案。

$color: #010203 + #040506;

以上將按如下方式計算：

01 + 04 = 05
02 + 05 = 07
03 + 06 = 09

并編譯到：

color: #050709;

Sass算術還可以計算HSLA和字符串顏色，如red和blue。

Sass專門配備了使顏色更容易使用的功能。
像RGBA或HSLA這樣的顏色的alpha參數(shù)是表示不透明度的掩碼。它指定當兩個顏色彼此頂部時，如何將一個顏色與另一個顏色合并。
1.在Sass中，該函數(shù)fade-out通過取0到1之間的數(shù)字并減少不透明度或Alpha通道，使顏色更透明：

$color: rgba(39, 39, 39, 0.5);
$amount: 0.1;
$color2: fade-out($color, $amount);//rgba(39, 39, 39, 0.4)

2.該fade-in顏色變化功能，通過增加其不透明度顏色：

$color: rgba(55,7,56, 0.5);
$amount: 0.1;
$color2: fade-in($color, $amount); //rgba(55,7,56, 0.6)

3.該功能adjust-hue($color, $degrees)通過拍攝顏色和數(shù)量（通常在-360度和360度之間）來改變顏色的色調(diào)，并將色輪旋轉該量。

Sass 的算術

Sass算術運算是：
加成+，減法 -
乘法*，除法/，和模數(shù)%。
注意：模數(shù)，或%，是給定分割中的余數(shù)，因此“9％2”將為“1”。
SCSS算法要求單元兼容; 例如，您不能乘以像素乘以ems。
另外，就像常規(guī)數(shù)學一樣，將兩個單位相乘可以產(chǎn)生平方單位：10px * 10px = 100px * px。
由于在CSS中沒有像平方單位這樣的東西，上面會出錯。您需要乘以10px * 10才能獲得100px。

來看看在SASS中，/的一些作用：
1.如果值或其任何部分存儲在變量中或由函數(shù)返回。
2.如果值由括號括起來，除非這些括號在列表之外，并且值在里面。
3.如果該值用作另一個算術表達式的一部分。

width: $variable/6; //division
line-height: (600px)/9; //division
margin-left: 20-10 px/ 2; //division
font-size: 10px/8px; //not division

循環(huán)

除了簡單的數(shù)學和顏色轉換，Sass還允許更復雜的功能。
Sass中的每個循環(huán)遍歷列表中的每個值。語法如下：

@each $item in $list {
  //some rules and or conditions
}

該值根據(jù)$item其位置和循環(huán)的迭代動態(tài)分配給列表中對象的值。

在SCSS中的寫法

在html中的結構

表現(xiàn)

Sass中的循環(huán)可用于創(chuàng)建多個元素或一次分配屬性。他們像以前見過的任何循環(huán)一樣工作。
Sass的for循環(huán)語法如下：

@for $i from $begin through $end {
   //some rules and or conditions
}

在上面的例子中：
$i只是索引的一個變量，或列表中元素的位置
$begin并且$end是循環(huán)開始和結束點的占位符。
關鍵字through和to在SCSS互換
For-loop對于很多事情都是有用的，下面的例子中，我們將使用它們來繪制一些彩虹divs：

在SCSS中的寫法

adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創(chuàng)建一個新的顏色；

編譯出來的CSS

在瀏覽器中看

SASS中的if與else

在Sass中，if()是基于條件只能分支兩種情況之一的函數(shù)。您可以使用它內(nèi)聯(lián)來分配屬性的值：
width: if( $condition, $value-if-true, $value-if-false);
對于有兩個以上的結果，@if，@else-if以及@else指令允許更多的靈活性。

@mixin deck($suit) {
 @if($suit == hearts || $suit == spades){
   color: blue;
 }
 @else-if($suit == clovers || $suit == diamonds){
   color: red;
 }
 @else{
   //some rule
 }
}

上面的mixin是一個很好的例子，用個例子來表明一下：
通過.ray根據(jù)元素是偶數(shù)還是奇數(shù)來改變寬度來調(diào)整我們的彩虹的外觀 - 我們可以使用模數(shù)%來確定某些東西是偶數(shù)還是奇數(shù)。在main.scss中，將以下內(nèi)容添加到循環(huán)中：
添加了width和margin-left兩句

SCSS

瀏覽器中看到的

良好的結構組織

良好的文件結構

@import規(guī)則

除了具有固定的文件結構外，大部分的組織結構將邏輯分解成更小的可管理組件。
Sass擴展了現(xiàn)有的CSS @import規(guī)則，允許包含其他SCSS和Sass文件。
通常，所有導入的SCSS文件都將導入到主SCSS文件中，然后將它們組合成一個單一的CSS輸出文件。
主/全局SCSS文件可訪問其導入文件中定義的任何變量或混合。@import命令會導入一個文件名。
默認情況下，@import在相同或其他指定的目錄中查找Sass文件，但有幾種情況下，它將像CSS @import規(guī)則一樣運行：

如果文件的擴展名是.css。
如果文件名以http：//開頭。
如果文件名是url（）。
如果@import有任何媒體查詢。

除了保持代碼組織，導入文件還可以避免重復代碼。例如，如果多個SCSS文件引用相同的變量，則導入帶有變量partial的文件會節(jié)省每次重新定義它們的麻煩。
它們在文件名中使用前綴符號_，告訴Sass單獨編譯文件，并且導入它。

_filename.scss

要將此部分導入主文件或封裝重要規(guī)則和大部分項目樣式的文件，請省略下劃線。
例如，要導入名為_variables.scss的文件，請?zhí)砑右韵麓a行：

@import "variables";

全局文件導入所有組件并集中邏輯。

引用時去掉前面的_

類樣式的延伸

很多時候，當設計元素時，我們希望將一個類的樣式應用到另一個類的樣式，除了自己的個體樣式之外，所以傳統(tǒng)的方法是給元素兩個類。

<span class="lemonade"></span>
<span class="lemonade strawberry"></span>

這是可維護性的潛在錯誤，因為這兩個類始終必須包含在HTML中，以便應用樣式。

輸入Sass的@extend。我們所要做的就是使我們的草莓類得以延伸.lemonade，我們將不再有這個困境。

.lemonade {
  border: 1px yellow;
  background-color: #fdd;
}
.strawberry {
  @extend .lemonade;
  border-color: pink;
}

如果您觀察到CSS輸出，您可以看到如何@extend將.lemonade規(guī)則應用于.strawberry：

.lemonade, .strawberry {
  border: 1px yellow;
  background-color: #fdd;
}

.strawberry {
  @extend .lemonade;
  border-color: pink;
}

如果我們認為.lemonade是延伸器，并且.strawberry作為擴展器，我們可以將Sass添加到擴展器選擇器到extendedee定義中的規(guī)則聲明。
這樣就可以通過刪除元素上的多個類來維護HTML代碼。

先定義

再在需要的地方@extend

編譯出來之后：

SCSS與CSS對比圖

@extend被編譯出來的樣式

占位符

有時候，您可以創(chuàng)建類，僅用于擴展它們，而不是在HTML中實際使用它們。
Sass預料到這一點，并允許一種稱為占位符的特殊類型的選擇器，其行為就像一個類或id選擇器，但使用%符號而不是#或. 。
占位符阻止規(guī)則自身呈現(xiàn)為CSS，只有在擴展id或類可以擴展的任何地方才能生效。

a%drink {
    font-size: 2em;
    background-color: $lemon-yellow;
 }

 .lemonade {
  @extend %drink;
  //more rules
 }

會被翻譯成

a.lemonade {
    font-size: 2em;
    background-color: $lemon-yellow;
 }

.lemonade {
  //more rules
}

占位符是一種很好的方法來整合在HTML中自己實際使用的規(guī)則。

將占位符放在占位符專屬SCSS中

在要用的SCSS中導入占位符SCSS后，使用它

@mixin 與 @extend 在編譯輸出上的不同

與擴展選擇器不同的是，mixins將代碼插入到選擇器規(guī)則的所有位置，只要包含“原始”代碼，如果它們通過參數(shù)為規(guī)則的屬性分配新值。
我們來看看@mixin和@extend構造密切比較輸出：

@mixin no-variable {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

%placeholder {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

span {
  @extend %placeholder;
}

div {
  @extend %placeholder;
}

p {
  @include no-variable;
}

h1 {
  @include no-variable;
}

編譯為：

// 這里用的是占位符，然后@extend
span, div{
  font-size: 12px;
  color: #FFF;
  opacity: .9;
}

// 以下是用@mixin
p {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
  //rules specific to ps
}

h1 {
  font-size: 12px;
  color: #FFF;
  opacity: .9;
  //rules specific to ps
}

可以清楚地看到，結果更清晰，效率更高，輸出盡可能少地重復。
作為一般的經(jīng)驗法則，你應該

嘗試只創(chuàng)建混合參數(shù)，否則你應該擴展。
總是看看你的CSS輸出，以確保你的擴展是按照你的意圖行事。

自己的話

以上的內(nèi)容都出自codecademy網(wǎng)站里面的SASS教程。雖然比較短，算是自己短暫學習的一些筆記。不過對于SASS也有了個大概的了解。目前工作上還沒機會用到，主要是怕用了之后，到時候后臺的同事看到了，不會更改我的東西就完蛋了QAQ。
自己還要繼續(xù)努力，早日找個好的工作！

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Sass | Sass的一些基本概念

Sass | Sass的一些基本概念

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Sass | Sass的一些基本概念

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av