久久久久Avvv,日韩精品四区,91蜜桃在线视频

一、相關(guān)網(wǎng)站地址

Sass官網(wǎng)：http://sass-lang.com/；
Sass中文網(wǎng)：https://www.sass.hk/；
Sass入門指南：http://www.w3cplus.com/sassguide/。

二、關(guān)于Sass

定義

CSS并不能算是一門真正意義上的“編程”語言，它本身無法未完成像其它編程語言一樣的嵌套、繼承、設(shè)置變量等工作。為了解決CSS的不足，開發(fā)者們想到了編寫一種對CSS進(jìn)行預(yù)處理的“中間語言”，可以實(shí)現(xiàn)一些“編程”語言才有的功能，然后自動編譯成CSS供瀏覽識別，這樣一定程度上彌補(bǔ)了CSS的不足，也無需一種新的語言來代替CSS以供瀏覽器識別。于是CSS預(yù)處理語言SASS（Syntactically Awesome StyleSheets）就應(yīng)運(yùn)而生了。
Sass在CSS的基礎(chǔ)上，引入了變量、嵌套、mixin（混合）、運(yùn)算以及函數(shù)等功能，增加了代碼的靈活性，以更少的代碼實(shí)現(xiàn)同樣的效果，而且代碼的整潔度、可讀性更強(qiáng)。
作為CSS預(yù)處理器，不僅僅只有Sass一種，主流的還有LESS和Stylus。但是Sass在三者中的歷史最久，功能大而全，也吸收其他兩者的優(yōu)點(diǎn)，而且由于Scss完全向下兼容普通的CSS代碼，Sass的使用者比例更高一些。
大體來說，使用Sass分3步：

安裝Sass；
編譯Sass文件成CSS文件；
在項(xiàng)目中引用CSS文件的路徑；

文件格式

Sass有兩種后綴名文件：.sass和.scss。在同一個(gè)項(xiàng)目中，兩種格式文件可以共存（不建議，最好統(tǒng)一為一種格式），但二者有各自的特點(diǎn)：

.sass后綴的文件：使用類Ruby的語法，格式為空格縮進(jìn)式，沒有花括號，靠換行區(qū)分不同屬性，格式要求比較嚴(yán)格。
.scss后綴的文件：Sass3引入的新語法，基本寫法與CSS大致相同，更易于學(xué)習(xí)。

三、安裝

Sass是基于Ruby編寫，所以安裝Sass分2步：先安裝Ruby的環(huán)境，再安裝Sass。

Ruby安裝

Window去Ruby官網(wǎng)http://rubyinstaller.org/downloads下載相應(yīng)版本（注:mac下自帶Ruby無需再安裝Ruby!）

ruby下載

安裝的時(shí)候，選中Add Ruby executables to your PATH這個(gè)選項(xiàng)（不選中，就會出現(xiàn)編譯時(shí)找不到Ruby環(huán)境的情況）

image.png

完成后測試Ruby是否安裝成功，命令行輸入以下命令

ruby -v  
//如安裝成功會打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Sass安裝

安裝ruby成功之后，在開始菜單中，找到剛才我們安裝的ruby，打開Start Command Prompt with Ruby

image.png

然后直接在命令行中輸入

gem install sass    #安裝

按回車鍵確認(rèn)，等待一段時(shí)間就會提示你sass安裝成功。如果你沒有安裝成功，那么請參考下面的淘寶的RubyGems鏡像安裝sass，如果成功則忽略

淘寶RubyGems鏡像安裝

通過gem sources命令來配置源，先移除默認(rèn)的https://rubygems.org源，然后添加淘寶的源https://ruby.taobao.org/，檢查更換成功后再執(zhí)行g(shù)em install sass，最后查看版本。
常用命令：安裝 gem install sass；查看Sass版本 sass –v；更新Sass版本 gem update sass；卸載（刪除）Sass gem uninstall sass

gem sources --remove  #移除自帶源
gem sources –a https://gems.ruby-china.org/  #安裝RubyChina的源
gem sources –l   #查看當(dāng)前的源
gem install sass    #安裝
sass –v      #查看當(dāng)前的版本

四、編譯

Sass編譯方式大概有三種：命令行編譯（基礎(chǔ)方法），GUI可視化圖形編譯及自動化編譯

命令編譯

單文件轉(zhuǎn)換命令

sass style.scss style.css
#把名為style的Sass文件轉(zhuǎn)換為CSS文件。
#文件每次有更新保存之后，都需要執(zhí)行這個(gè)命令。

Sass 提供4種編譯風(fēng)格

sass --style nested style.sass style.css       #嵌套縮進(jìn)的css代碼，它是默認(rèn)值
sass --style expanded style.sass style.css     #沒有縮進(jìn)的、擴(kuò)展的css代碼。
sass --style compact style.sass style.css      #簡潔格式的css代碼
sass --style compressed style.sass style.css   #壓縮后的css代碼。

單文件監(jiān)聽命令（添加--watch命令）

sass --watch style.scss:style.css
#  --watch 參數(shù)加上之后，可以監(jiān)測style這個(gè)文件的變化，更新保存后自動編譯。

多文件（文件夾）監(jiān)聽命令

sass --watch sass/main:dist/css
#監(jiān)視sass目錄下main文件夾中的所有Sass文件，自動編譯為CSS文件之后，放到dist/css目錄下。

GUI編譯工具

對于 GUI 界面編譯工具，目前較為流行的主要有：Koala ( http://koala-app.com/ )，Compass.app（http://compass.kkbox.com/），Scout（http://mhs.github.io/scout-app/），CodeKit（https://incident57.com/codekit/index.html），Prepros（https://prepros.io/），推薦使用Koala或CodeKit

自動化編譯

可以通過webstorm、Sublime等編輯器的相關(guān)插件實(shí)現(xiàn)，也可以借助Grunt、Gulp等自動化構(gòu)建工具來配置。以下為配置webstorm中的Sass，其他這里不研究。
在webstorm中settings中搜索file watchers工具，在此工具中添加一個(gè)SCSS的watcher，按照下圖設(shè)置各項(xiàng)。點(diǎn)擊ok，這樣webstorm中Scss就配置好了。

配置scss

同樣的再添加Sass的watcher，按照下圖設(shè)置各項(xiàng)

配置sass

五、基本用法及常用語法（注：以下有關(guān)案例都是.scss文件的編寫格式）

導(dǎo)入Sass文件

@import命令，用來插入外部文件，使用Sass的@import規(guī)則并不需要指明被導(dǎo)入文件的全名?？梢允÷?sass或.scss文件后綴（見下圖）, Sass的@import也支持導(dǎo)入CSS文件。那效果跟普通CSS導(dǎo)入樣式文件一樣，導(dǎo)入的css文件不會合并到編譯后的文件中，而是以@import方式存在。如果導(dǎo)入CSS文件，則必須寫.css后綴。

@import ‘partial’;   //導(dǎo)入名為“partial.scss”的文件
@import ‘toolbar.css’;  //導(dǎo)入名為“toolbar.css”的文件

注釋

Sass注釋包括三中注釋風(fēng)格：// 注釋、/* 注釋 */ 、/*! 注釋 */

// 注釋：單行注釋（也稱靜默注釋），編譯后消失，只存在Sass文件中。
/* 注釋 */：標(biāo)準(zhǔn)CSS注釋，會保留到編譯后的文件中。
/*! 注釋 */：重要注釋，即使是壓縮模式編譯，也會保留此注釋，常用于聲明版權(quán)信息。

SassScript

在CSS屬性的基礎(chǔ)上Sass提供了一些名為 SassScript的新功能。SassScript可作用于任何屬性，允許屬性使用變量、算數(shù)運(yùn)算等額外功能。
3.1 變量
變量定義以$ 開頭，賦值方法與CSS屬性的寫法一樣，默認(rèn)變量，在值后面加入!default即可。

$width: 5em;
$width: 10rem !default;
#main {
  width: $width;
}
//編譯后
#main { 
  width: 5em; 
}

變量調(diào)用還有另外一種方式：這種方式是將變量嵌套在字符串中，使用#{}

$left: left;
body {
  margin-#{$left}: 10px;
}
//編譯后
body {
  margin-left: 10px;
}

變量支持塊級作用域，嵌套規(guī)則內(nèi)定義的變量只能在嵌套規(guī)則內(nèi)使用（局部變量），不在嵌套規(guī)則內(nèi)定義的變量則可在任何地方使用（全局變量）。將局部變量轉(zhuǎn)換為全局變量添加 !global 即可。

#main {
  $width: 5em  !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//編譯后
#main { 
  width: 5em; 
}
 #sidebar { 
  width: 5em; 
}

3.2 數(shù)據(jù)類型
SassScript支持6種主要的數(shù)據(jù)類型：

數(shù)字：1, 2, 13, 10px
字符串：有引號字符串和無引號字符串，“foo”,‘bar’,baz
顏色：red，#cc6699，#888，rgba(255,255,255,0.5)
布爾型：true，false
空值：null
數(shù)組（list）：用空格或者逗號做分割符，10px 15px 0 0，(5px 10px) (20px 30px)
maps：相當(dāng)于JavaScript的object，(key1: value1, key2: value2)

3.3 運(yùn)算
Sass具有運(yùn)算的特性，支持加減乘除及取整運(yùn)算 +, -, *, /, %，關(guān)系運(yùn)算 <, >, <=, >= ，相等運(yùn)算 ==, != 等, 注意運(yùn)算符前后各留一個(gè)空格。

$colsNum：12;          //列的個(gè)數(shù)
$colsWidth: 60px;       //一列的寬度
$gap: 5px;             //列之間的間隙
$rowWidth: $colsNum * $colsWidth + ($colsNum – 1) * $gap;     //一行的總寬度
.row {
  width: $rowWidth;
}
//編譯后
.row {
  width: 775px;
}

嵌套

Sass支持選擇器及屬性嵌套，可以避免代碼的重復(fù)書寫。
4.1 選擇器嵌套
由于CSS是從右向左解析，層級過多影響瀏覽器引擎解析效率，所以盡量避免嵌套層級過多，一般推薦嵌套不超過三層。

div {
  h1 {
    color：#333;
  }
  p {
      margin-bottom: 14px;
    a {
        color: #999;
    }
   }
}
//編譯后
div h1 { color: #333;}
div p { margin-bottom: 14px;}
div p a { color: #999;}

大多數(shù)情況下上面那種簡單的嵌套都沒問題。但如果要在嵌套的選擇器里邊應(yīng)用一個(gè)類似于：hover的偽類，就需要用到 & 這個(gè)連接父選擇器的標(biāo)識符
4.2 屬性嵌套

div {
    border: {
    style: solid;
        width: 1px;
        color: #ccc;
    }
}
//編譯后
div {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

div {
    border: 1px solid #ccc {
      left：0;
      right: 0;
    }
}
//編譯后
div {
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
}

繼承

Sass中，選擇器繼承可以讓選擇器繼承另一個(gè)選擇器的所有樣式，并聯(lián)合聲明。使用選擇器的繼承，要使用關(guān)鍵詞@extend，后面緊跟需要繼承的選擇器。

.class1 {
    border: 1px solid #333;
}
.class2 {
    @extend .class1;
    background-color: #999;
}
//編譯后
.class1, .class2 {
    border: 1px solid #333;
}
.class2 {
    bakground-color：#999;
}

如上示例，.class2不僅會繼承.class1自身的所有樣式，也會繼承任何跟.class1有關(guān)的組合選擇器樣式，如下：

.class1 {
    border: 1px solid #333;
}
.class1 a{
    color: red;
}
.class2 {
    @extend .class1;
}

//編譯后

.class1, .class2 {
    border: 1px solid #333;
}
.class1 a, .class2 a{
    color: red;
}

Mixin

Sass中使用@mixin聲明混合，可以傳遞參數(shù)，參數(shù)名以$符號開始，多個(gè)參數(shù)以逗號分開，也可以給參數(shù)設(shè)置默認(rèn)值。聲明的@mixin通過 @include+mixin名稱來調(diào)用。

無參數(shù)mixin聲明及調(diào)用：

@mixin mixName {
    float: left;
    margin-left: 10px;
}
div {
    @include mixName;
}
//編譯后
div {
    float: left;
    margin-left: 10px;
}

帶參數(shù)mixin聲明及調(diào)用
可以不給參數(shù)值直接寫參數(shù)，如果給了值的話，就是參數(shù)的默認(rèn)值，在調(diào)用的時(shí)候傳入其他值就會把默認(rèn)值覆蓋掉。

@mixin left($value: 10px){
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}
//編譯后
div {
    float: left;
    margin-left: 66px;
}

帶多組數(shù)值參數(shù)的mixin聲明及調(diào)用

@mixin rounded($vert,$horz,$radius: 10px){
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius -#{$vert}#{$horz}: $radius;
    -webkit- border-#{$vert}-#{$horz}-radius: $radius;
}
#nav li {
    @include rounded(top,left);
}
#footer {
    @include rounded(top,left,5px);
}
//編譯后
#nav li{
    border-top-left-radius: 10px;
    -moz-border-radius -topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
#footer {
    border-top-left-radius: 5px;
    -moz-border-radius -topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

顏色函數(shù)

7.1 RGB顏色函數(shù)

rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；
rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；
red($color)：從一個(gè)顏色中獲取其中紅色值；
green($color)：從一個(gè)顏色中獲取其中綠色值；
blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；
mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

7.2 HSL顏色函數(shù)

hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色；
hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色；
hue($color)：從一個(gè)顏色中獲取色相（hue）值；
saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值；
lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值；
adjust-hue($color,$degrees)：通過改變一個(gè)顏色的色相值，創(chuàng)建一個(gè)新的顏色；
lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個(gè)新的顏色；
darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個(gè)新的顏色；
saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個(gè)新的顏色
desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個(gè)新的顏色；
grayscale($color)：將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);
complement($color)：返回一個(gè)補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg);
invert($color)：返回一個(gè)反相色，紅、綠、藍(lán)色值倒過來，而透明度不變。

7.3 Opacity 函數(shù)

alpha($color) / opacity($color)：獲取顏色的alpha分量（不透明度）；
rgba($color, $alpha)：更改顏色透明度；
opacify($color, $amount) / fade-in($color, $amount)：讓顏色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：讓顏色更透明。

7.4 其他顏色函數(shù)

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：增加或減少一個(gè)或多個(gè)顏色成分；
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])：流暢顏色的一個(gè)或多個(gè)屬性；
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：改變顏色的一個(gè)或多個(gè)屬性；
ie-hex-str($color)：將顏色轉(zhuǎn)化為IE識別的格式。

lighten(#cc3, 10%)  // #d6d65c   變亮
darken(#c33, 10%)   // #a3a329   變暗
grayscale(#cc3)     // #808080  變灰
complement(#cc3)    // #33c     補(bǔ)充色

六、高級用法

條件語句

當(dāng) @if 的表達(dá)式返回值不是 false 或者 null 時(shí)，條件成立，輸出 {} 內(nèi)的代碼，@if 聲明后面可以跟多個(gè) @else if 聲明，或者一個(gè) @else 聲明。如果 @if 聲明失敗，Sass 將逐條執(zhí)行 @else if 聲明，如果全部失敗，最后執(zhí)行 @else 聲明，例如：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
$type: warning;
.msg {
    @if type == success {
        color: green;
} @else if type == warning {
    color: yellow;
} @else if type ==danger {
    color: red;
} @else {
    color: black;
}
}
//編譯為
p {
    border: 1px solid; }
.msg {
    color: yellow; }

三目判斷
語法為：if($condition, $if_true, $if_false) 。三個(gè)參數(shù)分別表示：條件，條件為真的值，條件為假的值

a {
    color: if(true, red, black);
    font-size: if(false, 12px, 16px);
}
//編譯后
a {
color: red; 
font-size: 16px; }

循環(huán)語句

2.1 @for
這個(gè)指令包含兩種格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，區(qū)別在于 through 與to的含義：當(dāng)使用through時(shí)，條件范圍包含 <start> 與 <end> 的值，而使用to時(shí)條件范圍只包含<start>的值不包含<end>的值。另外，$var可以是任何變量，比如$i；<start>和<end>必須是整數(shù)值

@for $i from 1 to 3 {
  .item-#{$i} {width: 2rem * $i}
}
@for $i from 1 through 3 {
  .tab-#{$i} {width: 2rem * $i;}
}
//編譯為
.item-1 {
  width: 2rem; }
.item-2 {
  width: 4rem; }
.tab-1 {
  width: 2rem; }
.tab-2 {
  width: 4rem; }
.tab-3 {
  width: 6rem; }

2.2 @while
@while 指令重復(fù)輸出格式直到表達(dá)式返回結(jié)果為 false。這樣可以實(shí)現(xiàn)比 @for 更復(fù)雜的循環(huán)，只是很少會用到。例如

$i: 6;
@while $i>0 {
  .item-#{$i} {width: 2rem * $i;}
  $i: $i – 2;
}
//編譯為
.item-6 {
  width: 12rem; }
.item-4 {
  width: 8rem; }
.item-2 {
  width: 4rem; }

2.3 @each
這個(gè)指令的格式是@each $var in <list>, $var 可以是任何變量名，比如 $length或者 $name，而 <list> 是一連串的值，也就是值列表

單字段list數(shù)據(jù)循環(huán)

@each $animal in tiger, lion, monkey, elephant {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//編譯為
.tiger-icon {
  background-image: url('/images/tiger.png'); }
.lion-icon {
  background-image: url('/images/lion.png'); }
.monkey-icon {
  background-image: url('/images/monkey.png'); }
.elephant-icon {
  background-image: url('/images/elephant.png'); }

多字段list數(shù)據(jù)循環(huán)

$fruit-data: (apple, red, default),(lemon, yellow, pointer);
@each $fruit, $color, $cursor in $fruit-data {
  #{fruit}-icon {
    background-image: url('/images/#{$fruit }.png');
    color: $color;
    cursor: $cursor;
  }
}
//編譯為
.apple-icon {
  background-image: url('/images/apple.png');
  color: red;
  cursor: default; }
.lemon-icon {
  background-image: url('/images/lemon.png');
  color: yellow;
  cursor: pointer; }

多字段map數(shù)據(jù)循環(huán)

$headings: (h1: 2rem, h2: 1.5rem, h3: 1.2rem);
@each $header, $size in $headings {
    #{$header}: {
    font-size: $size;
  }
}
//編譯為
h1 {
  font-size: 2rem; }
h2 {
  font-size: 1.5rem; }
h3 {
  font-size: 1.2rem; }

自定義函數(shù)

Sass定義了很多內(nèi)置函數(shù)，如上邊提到的顏色函數(shù)，同時(shí)也支持自定義函數(shù)，以@function開始。

$grid-width: 40px; 
$gutter-width: 10px;
@function grid-width($n) { 
  @return $n * $grid-width + ($n - 1) * $gutter-width; 
} 
#sidebar { 
  width: grid-width(5); //或者寫成 width: grid-width($n: 5)
}
//編譯為
#sidebar {
  width: 240px; }

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

sass基礎(chǔ)

sass基礎(chǔ)

一、相關(guān)網(wǎng)站地址

二、關(guān)于Sass

定義

文件格式

三、安裝

Ruby安裝

Sass安裝

淘寶RubyGems鏡像安裝

四、編譯

命令編譯

GUI編譯工具

自動化編譯

五、基本用法及常用語法（注：以下有關(guān)案例都是.scss文件的編寫格式）

導(dǎo)入Sass文件

注釋

SassScript

嵌套

繼承

Mixin

顏色函數(shù)

六、高級用法

條件語句

循環(huán)語句

自定義函數(shù)

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

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

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

sass基礎(chǔ)

一、相關(guān)網(wǎng)站地址

二、關(guān)于Sass

定義

文件格式

三、安裝

Ruby安裝

Sass安裝

淘寶RubyGems鏡像安裝

四、編譯

命令編譯

GUI編譯工具

自動化編譯

五、基本用法及常用語法（注：以下有關(guān)案例都是.scss文件的編寫格式）

導(dǎo)入Sass文件

注釋

SassScript

嵌套

繼承

Mixin

顏色函數(shù)

六、高級用法

條件語句

循環(huán)語句

自定義函數(shù)

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

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

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

一、相關(guān)網(wǎng)站地址

二、關(guān)于Sass

五、基本用法及常用語法（注：以下有關(guān)案例都是.scss文件的編寫格式）

六、高級用法